@font-face {
	font-family: 'orbikular-semibold';
	src: url('/fonts/orbikular-semibold.woff2') format('woff2'),url('/fonts/orbikular-semibold.woff') format('woff');
	} 

@font-face {
	font-family: 'aeonik-regular';
	src: url('/fonts/aeonik-regular.woff2') format('woff2'),url('/fonts/aeonik-regular.woff') format('woff');
	}

@font-face {
	font-family: 'aeonik-medium';
	src: url('/fonts/aeonik-medium.woff2') format('woff2'),url('/fonts/aeonik-medium.woff') format('woff');
	}

/* engraving fonts */

@font-face {
	font-family: 'corsiva';
	src: url('/fonts/monotype_corsiva-webfont.woff2') format('woff2'),url('/fonts/monotype_corsiva-webfont.woff') format('woff');
	}
@font-face {
	font-family: 'edscript';
	src: url('/fonts/edwardian_script-webfont.woff2') format('woff2'),url('/fonts/edwardian_script-webfont.woff') format('woff');
	}
@font-face {
	font-family: 'enscript';
	src: url('/fonts/english_script-webfont.woff2') format('woff2'),url('/fonts/english_script-webfont.woff') format('woff');
	}
@font-face {
	font-family: 'stonehenge';
	src: url('/fonts/stonehenge-webfont.woff2') format('woff2'),url('/fonts/stonehenge-webfont.woff') format('woff');
	}
@font-face {
	font-family: 'castellar';
	src: url('/fonts/castellar-webfont.woff2') format('woff2'),url('/fonts/castellar-webfont.woff') format('woff');
	}
@font-face {
	font-family: 'oldenglish';
	src: url('/fonts/old_english-webfont.woff2') format('woff2'),url('/fonts/old_english-webfont.woff') format('woff');
	}
@font-face {
	font-family: 'parkavenue';
	src: url('/fonts/parkana_-webfont.woff2') format('woff2'),url('/fonts/parkana_-webfont.woff') format('woff');
	}
/*! jQuery UI - v1.14.1 - 2025-04-02 
* https://jqueryui.com
* Includes: draggable.css, core.css, resizable.css, selectable.css, sortable.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, progressbar.css, selectmenu.css, slider.css, spinner.css, tabs.css, tooltip.css, theme.css
* Copyright OpenJS Foundation and other contributors; Licensed MIT */

.ui-draggable-handle{touch-action:none}.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}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important;pointer-events:none}.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}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-resizable{position:relative}.ui-resizable-handle{position:absolute;font-size:0.1px;display:block;touch-action:none}.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle{display:none}.ui-resizable-n{cursor:n-resize;height:7px;width:100%;top:-5px;left:0}.ui-resizable-s{cursor:s-resize;height:7px;width:100%;bottom:-5px;left:0}.ui-resizable-e{cursor:e-resize;width:7px;right:-5px;top:0;height:100%}.ui-resizable-w{cursor:w-resize;width:7px;left:-5px;top:0;height:100%}.ui-resizable-se{cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.ui-resizable-sw{cursor:sw-resize;width:9px;height:9px;left:-5px;bottom:-5px}.ui-resizable-nw{cursor:nw-resize;width:9px;height:9px;left:-5px;top:-5px}.ui-resizable-ne{cursor:ne-resize;width:9px;height:9px;right:-5px;top:-5px}.ui-selectable{touch-action:none}.ui-selectable-helper{position:absolute;z-index:100;border:1px dotted black}.ui-sortable-handle{touch-action:none}.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}.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}.ui-menu-icons{position:relative}.ui-menu-icons .ui-menu-item-wrapper{padding-left:2em}.ui-menu .ui-icon{position:absolute;top:0;bottom:0;left:.2em;margin:auto 0}.ui-menu .ui-menu-icon{left:auto;right:0}.ui-button{padding:.4em 1em;display:inline-block;position:relative;line-height:normal;margin-right:.1em;cursor:pointer;vertical-align:middle;text-align:center;-webkit-user-select:none;user-select:none}.ui-button,.ui-button:link,.ui-button:visited,.ui-button:hover,.ui-button:active{text-decoration:none}.ui-button-icon-only{width:2em;box-sizing:border-box;text-indent:-9999px;white-space:nowrap}input.ui-button.ui-button-icon-only{text-indent:0}.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}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}.ui-controlgroup-vertical .ui-spinner-input{width:calc( 100% - 2.4em )}.ui-controlgroup-vertical .ui-spinner .ui-spinner-up{border-top-style:solid}.ui-checkboxradio-label .ui-icon-background{box-shadow:inset 1px 1px 1px #ccc;border-radius:.12em;border:none}.ui-checkboxradio-radio-label .ui-icon-background{width:16px;height:16px;border-radius:1em;overflow:visible;border:none}.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon{background-image:none;width:8px;height:8px;border-width:4px;border-style:solid}.ui-checkboxradio-disabled{pointer-events:none}.ui-datepicker{width:17em;padding:.2em .2em 0;display:none}.ui-datepicker .ui-datepicker-header{position:relative;padding:.2em 0}.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next{position:absolute;top:2px;width:1.8em;height:1.8em}.ui-datepicker .ui-datepicker-prev-hover,.ui-datepicker .ui-datepicker-next-hover{top:1px}.ui-datepicker .ui-datepicker-prev{left:2px}.ui-datepicker .ui-datepicker-next{right:2px}.ui-datepicker .ui-datepicker-prev-hover{left:1px}.ui-datepicker .ui-datepicker-next-hover{right:1px}.ui-datepicker .ui-datepicker-prev span,.ui-datepicker .ui-datepicker-next span{display:block;position:absolute;left:50%;margin-left:-8px;top:50%;margin-top:-8px}.ui-datepicker .ui-datepicker-title{margin:0 2.3em;line-height:1.8em;text-align:center}.ui-datepicker .ui-datepicker-title select{font-size:1em;margin:1px 0}.ui-datepicker select.ui-datepicker-month,.ui-datepicker select.ui-datepicker-year{width:45%}.ui-datepicker table{width:100%;font-size:.9em;border-collapse:collapse;margin:0 0 .4em}.ui-datepicker th{padding:.7em .3em;text-align:center;font-weight:bold;border:0}.ui-datepicker td{border:0;padding:1px}.ui-datepicker td span,.ui-datepicker td a{display:block;padding:.2em;text-align:right;text-decoration:none}.ui-datepicker .ui-datepicker-buttonpane{background-image:none;margin:.7em 0 0 0;padding:0 .2em;border-left:0;border-right:0;border-bottom:0}.ui-datepicker .ui-datepicker-buttonpane button{float:right;margin:.5em .2em .4em;cursor:pointer;padding:.2em .6em .3em .6em;width:auto;overflow:visible}.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current{float:left}.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}.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}.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-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%;opacity:0.25}.ui-progressbar-indeterminate .ui-progressbar-value{background-image:none}.ui-selectmenu-menu{padding:0;margin:0;position:absolute;top:0;left:0;display:none}.ui-selectmenu-menu .ui-menu{overflow:auto;overflow-x:hidden;padding-bottom:1px}.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup{font-size:1em;font-weight:bold;line-height:1.5;padding:2px 0.4em;margin:0.5em 0 0 0;height:auto;border:0}.ui-selectmenu-open{display:block}.ui-selectmenu-text{display:block;margin-right:20px;overflow:hidden;text-overflow:ellipsis}.ui-selectmenu-button.ui-button{text-align:left;white-space:nowrap;width:14em}.ui-selectmenu-icon.ui-icon{float:right;margin-top:0}.ui-slider{position:relative;text-align:left}.ui-slider .ui-slider-handle{position:absolute;z-index:2;width:1.2em;height:1.2em;cursor:pointer;touch-action:none}.ui-slider .ui-slider-range{position:absolute;z-index:1;font-size:.7em;display:block;border:0;background-position:0 0}.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-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}.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;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}.ui-widget{font-family:Arial,Helvetica,sans-serif;font-size:1em}.ui-widget .ui-widget{font-size:1em}.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:Arial,Helvetica,sans-serif;font-size:1em}.ui-widget.ui-widget-content{border:1px solid #c5c5c5}.ui-widget-content{border:1px solid #ddd;background:#fff;color:#333}.ui-widget-content a{color:#333}.ui-widget-header{border:1px solid #ddd;background:#e9e9e9;color:#333;font-weight:bold}.ui-widget-header a{color:#333}.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default,.ui-button,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 #ccc;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:#fff}.ui-icon-background,.ui-state-active .ui-icon-background{border:#003eff;background-color:#fff}.ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited{color:#fff;text-decoration:none}.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;font-weight:normal}.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled{opacity:.35;background-image:none}.ui-icon{width:16px;height:16px}.ui-icon,.ui-widget-content .ui-icon{background-image:url("images/ui-icons_444444_256x240.png")}.ui-widget-header .ui-icon{background-image:url("images/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/ui-icons_555555_256x240.png")}.ui-state-active .ui-icon,.ui-button:active .ui-icon{background-image:url("images/ui-icons_ffffff_256x240.png")}.ui-state-highlight .ui-icon,.ui-button .ui-state-highlight.ui-icon{background-image:url("images/ui-icons_777620_256x240.png")}.ui-state-error .ui-icon,.ui-state-error-text .ui-icon{background-image:url("images/ui-icons_cc0000_256x240.png")}.ui-button .ui-icon{background-image:url("images/ui-icons_777777_256x240.png")}.ui-icon-blank.ui-icon-blank.ui-icon-blank{background-image:none}.ui-icon-caret-1-n{background-position:0 0}.ui-icon-caret-1-ne{background-position:-16px 0}.ui-icon-caret-1-e{background-position:-32px 0}.ui-icon-caret-1-se{background-position:-48px 0}.ui-icon-caret-1-s{background-position:-65px 0}.ui-icon-caret-1-sw{background-position:-80px 0}.ui-icon-caret-1-w{background-position:-96px 0}.ui-icon-caret-1-nw{background-position:-112px 0}.ui-icon-caret-2-n-s{background-position:-128px 0}.ui-icon-caret-2-e-w{background-position:-144px 0}.ui-icon-triangle-1-n{background-position:0 -16px}.ui-icon-triangle-1-ne{background-position:-16px -16px}.ui-icon-triangle-1-e{background-position:-32px -16px}.ui-icon-triangle-1-se{background-position:-48px -16px}.ui-icon-triangle-1-s{background-position:-65px -16px}.ui-icon-triangle-1-sw{background-position:-80px -16px}.ui-icon-triangle-1-w{background-position:-96px -16px}.ui-icon-triangle-1-nw{background-position:-112px -16px}.ui-icon-triangle-2-n-s{background-position:-128px -16px}.ui-icon-triangle-2-e-w{background-position:-144px -16px}.ui-icon-arrow-1-n{background-position:0 -32px}.ui-icon-arrow-1-ne{background-position:-16px -32px}.ui-icon-arrow-1-e{background-position:-32px -32px}.ui-icon-arrow-1-se{background-position:-48px -32px}.ui-icon-arrow-1-s{background-position:-65px -32px}.ui-icon-arrow-1-sw{background-position:-80px -32px}.ui-icon-arrow-1-w{background-position:-96px -32px}.ui-icon-arrow-1-nw{background-position:-112px -32px}.ui-icon-arrow-2-n-s{background-position:-128px -32px}.ui-icon-arrow-2-ne-sw{background-position:-144px -32px}.ui-icon-arrow-2-e-w{background-position:-160px -32px}.ui-icon-arrow-2-se-nw{background-position:-176px -32px}.ui-icon-arrowstop-1-n{background-position:-192px -32px}.ui-icon-arrowstop-1-e{background-position:-208px -32px}.ui-icon-arrowstop-1-s{background-position:-224px -32px}.ui-icon-arrowstop-1-w{background-position:-240px -32px}.ui-icon-arrowthick-1-n{background-position:1px -48px}.ui-icon-arrowthick-1-ne{background-position:-16px -48px}.ui-icon-arrowthick-1-e{background-position:-32px -48px}.ui-icon-arrowthick-1-se{background-position:-48px -48px}.ui-icon-arrowthick-1-s{background-position:-64px -48px}.ui-icon-arrowthick-1-sw{background-position:-80px -48px}.ui-icon-arrowthick-1-w{background-position:-96px -48px}.ui-icon-arrowthick-1-nw{background-position:-112px -48px}.ui-icon-arrowthick-2-n-s{background-position:-128px -48px}.ui-icon-arrowthick-2-ne-sw{background-position:-144px -48px}.ui-icon-arrowthick-2-e-w{background-position:-160px -48px}.ui-icon-arrowthick-2-se-nw{background-position:-176px -48px}.ui-icon-arrowthickstop-1-n{background-position:-192px -48px}.ui-icon-arrowthickstop-1-e{background-position:-208px -48px}.ui-icon-arrowthickstop-1-s{background-position:-224px -48px}.ui-icon-arrowthickstop-1-w{background-position:-240px -48px}.ui-icon-arrowreturnthick-1-w{background-position:0 -64px}.ui-icon-arrowreturnthick-1-n{background-position:-16px -64px}.ui-icon-arrowreturnthick-1-e{background-position:-32px -64px}.ui-icon-arrowreturnthick-1-s{background-position:-48px -64px}.ui-icon-arrowreturn-1-w{background-position:-64px -64px}.ui-icon-arrowreturn-1-n{background-position:-80px -64px}.ui-icon-arrowreturn-1-e{background-position:-96px -64px}.ui-icon-arrowreturn-1-s{background-position:-112px -64px}.ui-icon-arrowrefresh-1-w{background-position:-128px -64px}.ui-icon-arrowrefresh-1-n{background-position:-144px -64px}.ui-icon-arrowrefresh-1-e{background-position:-160px -64px}.ui-icon-arrowrefresh-1-s{background-position:-176px -64px}.ui-icon-arrow-4{background-position:0 -80px}.ui-icon-arrow-4-diag{background-position:-16px -80px}.ui-icon-extlink{background-position:-32px -80px}.ui-icon-newwin{background-position:-48px -80px}.ui-icon-refresh{background-position:-64px -80px}.ui-icon-shuffle{background-position:-80px -80px}.ui-icon-transfer-e-w{background-position:-96px -80px}.ui-icon-transferthick-e-w{background-position:-112px -80px}.ui-icon-folder-collapsed{background-position:0 -96px}.ui-icon-folder-open{background-position:-16px -96px}.ui-icon-document{background-position:-32px -96px}.ui-icon-document-b{background-position:-48px -96px}.ui-icon-note{background-position:-64px -96px}.ui-icon-mail-closed{background-position:-80px -96px}.ui-icon-mail-open{background-position:-96px -96px}.ui-icon-suitcase{background-position:-112px -96px}.ui-icon-comment{background-position:-128px -96px}.ui-icon-person{background-position:-144px -96px}.ui-icon-print{background-position:-160px -96px}.ui-icon-trash{background-position:-176px -96px}.ui-icon-locked{background-position:-192px -96px}.ui-icon-unlocked{background-position:-208px -96px}.ui-icon-bookmark{background-position:-224px -96px}.ui-icon-tag{background-position:-240px -96px}.ui-icon-home{background-position:0 -112px}.ui-icon-flag{background-position:-16px -112px}.ui-icon-calendar{background-position:-32px -112px}.ui-icon-cart{background-position:-48px -112px}.ui-icon-pencil{background-position:-64px -112px}.ui-icon-clock{background-position:-80px -112px}.ui-icon-disk{background-position:-96px -112px}.ui-icon-calculator{background-position:-112px -112px}.ui-icon-zoomin{background-position:-128px -112px}.ui-icon-zoomout{background-position:-144px -112px}.ui-icon-search{background-position:-160px -112px}.ui-icon-wrench{background-position:-176px -112px}.ui-icon-gear{background-position:-192px -112px}.ui-icon-heart{background-position:-208px -112px}.ui-icon-star{background-position:-224px -112px}.ui-icon-link{background-position:-240px -112px}.ui-icon-cancel{background-position:0 -128px}.ui-icon-plus{background-position:-16px -128px}.ui-icon-plusthick{background-position:-32px -128px}.ui-icon-minus{background-position:-48px -128px}.ui-icon-minusthick{background-position:-64px -128px}.ui-icon-close{background-position:-80px -128px}.ui-icon-closethick{background-position:-96px -128px}.ui-icon-key{background-position:-112px -128px}.ui-icon-lightbulb{background-position:-128px -128px}.ui-icon-scissors{background-position:-144px -128px}.ui-icon-clipboard{background-position:-160px -128px}.ui-icon-copy{background-position:-176px -128px}.ui-icon-contact{background-position:-192px -128px}.ui-icon-image{background-position:-208px -128px}.ui-icon-video{background-position:-224px -128px}.ui-icon-script{background-position:-240px -128px}.ui-icon-alert{background-position:0 -144px}.ui-icon-info{background-position:-16px -144px}.ui-icon-notice{background-position:-32px -144px}.ui-icon-help{background-position:-48px -144px}.ui-icon-check{background-position:-64px -144px}.ui-icon-bullet{background-position:-80px -144px}.ui-icon-radio-on{background-position:-96px -144px}.ui-icon-radio-off{background-position:-112px -144px}.ui-icon-pin-w{background-position:-128px -144px}.ui-icon-pin-s{background-position:-144px -144px}.ui-icon-play{background-position:0 -160px}.ui-icon-pause{background-position:-16px -160px}.ui-icon-seek-next{background-position:-32px -160px}.ui-icon-seek-prev{background-position:-48px -160px}.ui-icon-seek-end{background-position:-64px -160px}.ui-icon-seek-start{background-position:-80px -160px}.ui-icon-seek-first{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}.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}.ui-widget-overlay{background:#aaa;opacity:.3}.ui-widget-shadow{box-shadow:0 0 5px #666}
/* ------------------------------------------------------------------------------------
	SCREEN - v6 swiffy 2023
	Filename : swiffy.css 
	Last Updated : 04. 04. 2023
------------------------------------------------------------------------------------- */
.swiffy-slider  {
	position: relative;
	display: block;
	width: 100%;
	--swiffy-slider-snap-align: center;
	--swiffy-slider-item-width: 100%;
	--swiffy-slider-item-gap: 1rem;
	--swiffy-slider-item-reveal: 0rem;
	--swiffy-slider-item-ratio: 1/1;
	--swiffy-slider-item-count: 1;

	--swiffy-slider-nav-zoom: 1;
	--swiffy-slider-track-opacity: 0.1;
	--swiffy-slider-track-height: 0;
	--swiffy-slider-nav-outside-size: 3.5rem;
	--swiffy-slider-indicator-outside-size: 1.5rem;
	--swiffy-slider-animation-duration: .75s;
	--swiffy-slider-animation-delay: 0s;
	--swiffy-slider-animation-timing: ease-in-out;
}

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

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

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

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

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

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

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

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

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

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

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

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


.slider-indicators {
	display: flex;
	justify-content: center;
	padding: 0;
	list-style: none;
	width:100%;
}

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

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


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

	
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	Table of Contents
		=Definitions
		=Reset
		=Normalise
		=Page 
		=Typography 	
		=Grid Layout
		=SiteContainers		
		=FIXEDTop Panel #ptf		
		=Top Panel #pt	
		=Center Panel #pc
		=Main Panel #pmid
		=Footer Panel #pf
		=Bottom Panel #pb
		=FIXEDBottom Panel #pbf
		=Breadcrumb
		=Sitemap  
		=Client Specific Stylings 

/* -------------------------------------------------------------------------------------	
=Definitions
------------------------------------------------------------------------------------- */
:root {
	--spacer-width: calc((100% - var( --site-max-width)) / 2);
	--site-max-width: 1440px;

	--checkout-process-width:500px;
	--site-inner-width:1163px;
	--menu-max-width: calc(100vw - 2rem);
	--left-panel-width: calc(var(--site-max-width) / 5);
	--right-panel-width: calc(var(--site-max-width) / 5);
	--line-height: 1.25;
	--letter-spacing: normal;
	--outline-width: 3px;
	--spacing: 1rem;
	--half-spacing: .5rem;
	
	/* client color scheme */
	--black:rgba(13, 7, 7, 1);
	--pure-white:rgba(255, 255, 255, 1);
	--white-alpha:rgba(255, 255, 255, .5);
	
	--off-white:rgba(69, 89, 102, 0.05);
	--off-white-alpha:rgba(69, 89, 102, 0.75);
	
	--light-grey:rgba(246, 247, 247, 1);
	--grey:rgba(242, 240, 237, 1);
	--dark-grey:rgba(217, 217, 217, 1);
	
	--dark-blue:rgba(24, 31, 36, 1);
	--blue:rgba(33, 55, 68, 1);
	--light-blue:rgba(69, 89, 102, 1);
	--light-blue-alpha:rgba(69, 89, 102, .25);
	

	/* client color scheme */


	
	/*standard colors */
	--white: var(--pure-white);
	--featured-color:var(--dark-blue);
	--featured-alt-color:var(--blue);
	
	--error-color: var(--blue);
	--warn-color: rgb(230 167 27);
	--info-color: #5eb20a;
	--help-color: var(--blue);


	/*Section colors */
	--background-color: var(--white);
	--top-bar-color: var(--blue);
	--top-bar-text-color: var(--white);
	--top-bar-link-color: var(--white);
	--top-panel-color: var(--grey);
	
	--center-panel-color: var(--off-white);
	--main-panel-color: var(--white);
	
	--footer-panel-color: var(--off-white);
	--footer-panel-alt-color: var(--grey);
	
	--bottom-panel-color: var(--blue);
	--bottom-panel-heading-color: var(--white);
	--bottom-panel-text-color: var(--white);
	--bottom-bar-color: var(--blue);
	
	--bottom-bar-text-color: var(--white);
	--panel-color: var(--white);
	--dropdown-color: var(--white);
	--popout-color: var(--white);
	--form-color: var(--white);
	--typography-spacing-vertical: 1rem;
	--block-spacing-vertical: calc(var(--spacing) * 2);
	--block-spacing-horizontal: var(--spacing);
	--form-element-spacing-vertical: 0.5rem;
	--form-element-spacing-horizontal: .725rem;
	--form-label-font-weight: var(--text-font-weight);

	/* font-sizes */
	--large-heading-font-size:30px;
	--heading-font-size:24px;
	--sub-heading-font-size:18px;
	--statement-font-size:20px;
	--text-size:16px;

	/* fonts
	
	orbikular-semibold
	aeonik-regular
	aeonik-medium
	*/

	--heading-font:"orbikular-semibold", serif;
	--heading-font-weight: 500;
	
	--sub-heading-font: "aeonik-regular", serif;
	--sub-heading-font-weight: 400;

	--text-font:  "aeonik-regular", sans-serif;
	--text-font-weight: 400;
	
	--button-font:  "aeonik-medium", sans-serif;
	--button-font-weight: 400;
	
	--font-awesome: "Font Awesome 6 Pro";
	--font-size: 16px;
	
	--navbar-dropdown-text:"aeonik-regular", sans-serif;
	--navbar-heading-font: "aeonik-regular", sans-serif;
		
	
	/* grid info */
	--grid-spacing-vertical: var(--spacing);
	--grid-spacing-horizontal: var(--spacing);

	/*nav */
	--nav-element-spacing-vertical: 1rem;
	--nav-element-spacing-horizontal: 0.5rem;
	--nav-link-spacing-vertical: 0.5rem;
	--nav-link-spacing-horizontal: 0.5rem;
	--navbar-heading-font-size: 1em;
	--navbar-color: var(--featured-color);
	--navbar-heading-color: var(--black);
	--navbar-heading-weight: 400;
	--navbar-link-color: var(--black);
	--navbar-icon-color: var(--grey);
	/*hover/active */
	--navbar-active-color: transparent;
	--navbar-active-text-color: var(--black);
	--navbar-hover-color: var(--off-white);
	--navbar-hover-text-color: var(--black);
	/*nav - dropdowns*/
	--navbar-dropdown-width: 240px;
	--navbar-dropdown-item-height: 40px;
	--navbar-dropdown-color: var(--grey);
	--navbar-dropdown-text-color: var(--black);
	--navbar-dropdown-text-size: .875rem;
	--navbar-sidebar-color: var(--off-white);
	--navbar-sidebar-text-color: var(--grey);
	--navbar-sidebar-hover-color: var(--off-white);
	--navbar-popout-color: var(--white);
	--navbar-menu-button-color:var(--blue);
	
	/*Buttons */
	--button-color: var(--blue);
	--button-border-color: var(--button-color);
	--button-text-color: var(--white);
	--button-alt-color: var(--blue);
	--button-alt-border-color: var(--button-alt-color);
	--button-alt-text-color: var(--white);
	--button-hover-text-color: var(--white);
	--button-hover-color: var(--button-alt-color);
	--button-hover-border-color: var(--button-alt-color);
	--button-padding:1rem 2rem;
	--checkout-button: var(--featured-alt-color);
	--checkout-button-text: var(--white);
	--info-button: var(--info-color);
	--info-button-text: var(--white);
	--icon-color: var(--error-color);
	
	/*Borders */
	--border-color: var(--grey);
	--border-alt-color: var(--grey);
	--border-color-light: var(--light-grey);
	--border-radius: 2em;
	--border-width: 1px;

	/* shadows */
	--box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
	--transition: 0.5s ease-in-out;
	
	/*Text */
	--color: var(--black);
	--text-color: var(--black);
	--text-link-color: var(--blue);
	--text-link-color-hover: var(--blue);
	--text-link-color-focus: transparent;
	--text-decoration: none;
	--text-decoration-color: var(--blue);
	
	/*swiffy nav options */
	--swiffy-slider-nav: var(--featured-color);
	--swiffy-slider-item-color: var(--grey);
	--swiffy-slider-active-item-color: var(--featured-color);
}

/* -------------------------------------------------------------------------------------
=Reset 
------------------------------------------------------------------------------------- */

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

/* To enable HTML5 elements in IE */

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section {
	display: block;
}

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

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

/* -------------------------------------------------------------------------------------
=Normalise v8.0.1 | MIT License | github.com/necolas/normalize.css 
------------------------------------------------------------------------------------- */

html {
	line-height: var(--line-height);
	-webkit-text-size-adjust: 100%;
}

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

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

a {
	background-color: transparent;
}

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

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

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

small {
	font-size: 80%;
}

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

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

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

.imgcont {}

.imgcont img {
	display: block;
}

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

button,input {
	overflow: visible;
}

button,select {
	text-transform: none;
}

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

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

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

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

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

progress {
	vertical-align: baseline;
}

textarea {
	overflow: auto;
}

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

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

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

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

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

details {
	display: block;
}

summary {
	display: list-item;
}

template {
	display: none;
}

[hidden] {
	display: none;
}

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

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

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

/* -------------------------------------------------------------------------------------
=Page 
------------------------------------------------------------------------------------- */

html {
	-webkit-font-smoothing: antialiased
}

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


/* -------------------------------------------------------------------------------------
=Typography 
------------------------------------------------------------------------------------- */
/* Defaults
------------------------------------------------------- */
p {
	/* --letter-spacing: -.32px; */
	font-family: var(--text-font);
	/* overflow-wrap: break-word; */
	/* text-wrap:pretty; */
	/* letter-spacing:var(--letter-spacing); */
	margin-bottom: var(--typography-spacing-vertical);
	font-size:var(--font-size, 1em);
}
h1 + p,
h2 + p,
h3 + p{
	font-size:larger;
}

b,strong {
	font-weight: 600;
	--letter-spacing:10px;
}

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

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

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

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

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

h1,h2,h3,h4,h5,h6 {
	--heading-color:var(--dark-blue);
	margin-top: 0;
	margin-bottom: var(--typography-spacing-vertical);
	font-family: var(--heading-font);
	font-size: var(--font-size);
	overflow-wrap: break-word;
	color:var(--heading-color, #000);
	letter-spacing:var(--letter-spacing);
	text-wrap:pretty;
}

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

h1 {
	--typography-spacing-vertical: 1rem;
	font-size: var(--large-heading-font-size, 2.5em);
	font-weight:var(--heading-font-weight, 400);
	text-align:left;
	letter-spacing:-1px
}
h2 {
	--typography-spacing-vertical: 1rem;
	font-size: var(--large-heading-font-size, 2em);
	font-weight:var(--heading-font-weight, 400);
	text-align:left;
	letter-spacing:-1px
}
h3 {
	--typography-spacing-vertical: 1rem;
	font-size: var(--heading-font-size, 1.5em);
		letter-spacing:-1px
}
h4 {
	--typography-spacing-vertical: 1rem;
	font-family:var(--sub-heading-font);
	font-size: var(--statement-font-size, 1.25em);
}
h5 {
	--typography-spacing-vertical: 1rem;
	font-family:var(--sub-heading-font);
	font-size: var(--statement-font-size, 1.125em);
}

em {
	font-style: italic;
}

blockquote{
	color:var(--blue);
	border-left:1px solid var(--blue);
	padding-left:2em;
	margin:2em 0;
	margin-left:2em;
}

blockquote footer:before{
	content:"—";
	margin-right:.5em;
}

blockquote footer{
	font-family:var(--sub-heading-font);
	color:var(--black)
}

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

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

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

kbd {
	--text-font-weight: 400;
}

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

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

/* Articles - may require many unsets for other things
------------------------------------------------------- */
li::marker {
  color: var(--blue);
}

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

/*expect this to break lots of things - we need to start adding classes to list elements */
#pm .artp ul li{
	margin:1em;
	margin-block-start: 1em;
	margin-block-end: 1em;
}

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

.artp ol li {}

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

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

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

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

.btn.white{
	--button-color:var(--white);
	background-color:var(--white);
	--button-text-color:var(--text-color);
	--button-border-color:var(--text-color);
}

.btn.alt{
	--button-color:transparent;
	--button-text-color:var(--text-color);
	--button-border-color:var(--text-color);
}

.btn.alt:hover a,
.btn.alt:hover{
	--button-text-color:var(--white);
	color:var(--white);
}

.btn.link{
	--button-color:transparent;
	--button-text-color:var(--text-color);
	--button-border-color:var(--text-color);
	--button-hover-text-color:var(--text-color);
	border:none;
}

.btn.link:after{
	content:"";
	width:100%;
	height:1px;
	background-color:var(--text-color);
	display:block;
}

.btn.link:hover {
	text-decoration: none;
	--button-hover-color:transparent;
	--button-hover-text-color:var(--text-color);
	border:none;
}

/* iphone specific overrides */
textarea,
input.text,
input.inputtext,
input.inputtext_short,
.ui-widget select,
input[type="text"],
input[type="email"],
input[type="button"],
input[type="submit"],
input[type="image"],
input#searchbox,
.input-checkbox {
	font-size: 16px;
	font-weight: 400;
	width: auto;
	border-width: 1px;
	border-style: solid;
}

td a.btn {
	display: block;
}

input.inputtext,
input.inputtext_light {
	font-size: 1rem;
	padding: .5em 1em;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	color: var(--text-color);
	background-color:var(--grey);
}

input::placeholder{
	color:var(--dark-grey);
}

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

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


/* -------------------------------------------------------------------------------------
=MyAccount
------------------------------------------------------------------------------------- */
/* is this the sign in page form */
.form.myaccount#psign {}
.page_useraccount{}

.page_useraccount #pl,
.page_orderinfo #pl,
.page_register #pl{
	/*display:none;*/
}

/* Account messages
------------------------------------------------------- */
.acctmsg h3{
	text-align:center;
}

/* account menu panel
------------------------------------------------------- */
	
#pmam + .pmfull{
	width: calc(var(--site-max-width) - 2rem);
}

/* this shows on other account pages - is no longer needed with the menu button*/
a.myacct{
	/* display:none; */
}

/* show/hide menu button */
#mamtrigbtn {
	vertical-align: middle;
	text-align: center;
	padding: var(--half-spacing) var(--spacing);
	border: var(--border-width) solid var(--border-color);
	border-radius: var(--border-radius);
	cursor: pointer;
	font-size: .825rem;
	font-family: var(--text-font);
	font-weight: var(--text-font-weight);
	display:inline-block;
}

#mamtrigbtn span{
	display:block;
}

#mamtrigbtn span:before {
	content: "\f7f3";
	font-family: var(--font-awesome);
	display: inline-block;
	font-size: 1em;
	margin-right: .5rem;
}
	
#pmam .myacctmenu{
	height: 100%;
	width: 50%; /* 0 width - change this with JavaScript */
	max-width:300px;
	position: fixed;
	z-index: 10001; 
	top: 0; 
	left: 0;
	background-color: var(--popout-color);
	overflow-x: hidden; /* Disable horizontal scroll */
	transition: var(--transition);
	box-shadow: var(--box-shadow);
	padding:1rem;
	display:none;
}

#pmam .myacctmenu.showmyacctmenu{
	display:block;
}

#pmam li{
	list-style:none;
	margin-bottom:.5rem;
}

/*how many times am I going to add this back in... */
/*we don't want the icons here! */
#pmam li a.img{
	display:none;
}


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

/* close member panel button */
.mamclsdiv {
	text-align:right;
}

.mamclsdiv .mamclsspn{
	display:inline-block;
	border:1px solid var(--off-white);
	color:var(--grey);
	background-color:var(--off-white);
	border-radius:50%;
	font-family:monospace;
	padding:.125rem;
	margin:0rem;
	width:1rem;
	height:1rem;
	line-height:1;
	text-align:center;
	cursor:pointer;
	display:inline-block;
}

/* account recent items
------------------------------------------------------- */
.page_useraccount .ritm{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-column-gap: var(--grid-spacing-horizontal);
	grid-row-gap: var(--grid-spacing-vertical);
	position: relative;
	margin: 1em 0;
}

.page_useraccount .ritm h3.header{
	grid-column:1/-1;
	text-align:center;
	font-size:2.5em;
}

/* account articles
------------------------------------------------------- */
.page_useraccount .arts{
	grid-area:memberarts;
}

/* account 
------------------------------------------------------- */
.page_useraccount .carousel.prod{
	grid-area:memberarts;
}

/* page_orderinfo
------------------------------------------------------- */
.page_orderinfo{}

.page_orderinfo ul.order,
.page_orderinfo ul.order span,
.page_orderinfo ul.order label{
	display:block;
}

.page_orderinfo ul.order li{
	list-style:none;
	margin-bottom:1em;
}


/* member orders view 
------------------------------------------------------- */
.member-orders{
	margin:1em 0
}

/* Wishlists 
------------------------------------------------------- */
.wishlist{}


/* Delivery Information
------------------------------------------------------- */
#pm .art.deliveryInfo h3 {}
#pm .art.deliveryInfo h4,
#pm .art.deliveryInfo table {}
.deliveryInfo table {}
.deliveryInfo table th {}
.deliveryInfo table td {}
#pm .deliveryInfo .artp table td p {}

/* -------------------------------------------------------------------------------------
=Forms
------------------------------------------------------------------------------------- */
/* Defaults
------------------------------------------------------- */
.form {
	background-color: var(--form-color);
	grid-column:1/-1;
	margin:auto;
}

/*bit of a hack - really don't want to be using an img as a way of identifying a required field */
form img{
	width:auto !important;
	height:auto
}

form ul {
	margin: 0;
	padding: 0;
}

form li,
.form li{
	list-style: none;
	display:block;
}


form .help {
	color: var(--help-color);
	font-size: small;
}

form label {
	display:block
}

form select,
form textarea,
form input {
	margin-bottom: var(--spacing)
}

/* DON'T try grid layout here - its too restrictive*/
form li.reqmsg {
	color: var(--error-color);
}

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

form label img {
	display: inline-block;
}

form li.help,
form li.info {
	font-size: .825em;
}

form li.info  img{
	display:inline;
}

form form .submit {
	display: block;
}

form .g-recaptcha {
	text-align: right;
	display: block;
	margin-left: auto;
}

/* fix for checklists*/
form  ul.check input {
	margin-right: var(--half-spacing);
}

/* fix for radio buttons */
form ul.radio input {
	margin-right: var(--half-spacing);
}

/* fix for subscribe checkbox */
form li.subscribe input {
	margin-right: var(--half-spacing);
	width:auto;
}

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

.exstreglnk,
.exstfgtpwd {}

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

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

.page_dept #pm .pmind{
	grid-gap:0;
}

/*this would be avoided if we just wrote the content out in blocks
would be also better if we could add our own "blocks" for things to be in
you currently can't have a banner and an article side by side because of this */
#pm .pmind .pbnr {
	grid-column: 1/-1;
}

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

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

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

/* layout base classes
------------------------------------------------------- */
.fullWidth {
	grid-column: 1/-1;
}
.halfWidth {
	grid-column: auto / span 6;
}
.quarterWidth {
	grid-column: auto / span 3;
}
.threeQuarter{
	grid-column: auto / span 9;
}
.thirdWidth{
	grid-column: auto / span 4;
}
.twoThirdWidth {
	grid-column: auto / span 8;
}

.fullWidth,
.halfWidth,
.quarterWidth,
.threeQuarter,
.thirdWidth,
.twoThirdWidth {
	position: relative;
}

.fullWidth img,
.halfWidth img,
.quarterWidth img,
.threeQuarter img,
.thirdWidth img,
.twoThirdWidth img{
	width:100%;
}

.textImage{
	display:grid;
	grid-template-areas:"text image";
	grid-template-columns:1fr minmax(auto,654px);
	grid-gap:2em;
	align-items:center;
}

.textImage .artp{
	grid-area:text;
	text-align:left;
}


/* Headers
------------------------------------------------------- */
.plainHeader{
	grid-column:1/-1;
	margin:1em 0;
}

.plainHeader h2{
	text-align:center;
	font-size:40px;
	margin:1em 0;
}


.deptHeader{
	text-align:center;
	border-top-right-radius:1em;
	border-top-left-radius:1em;
	background-color:var(--off-white);
	padding:4em 15%;
}
.deptHeader h2{
	text-align:center;
	font-size:61px;
	position:relative;
	z-index:1;
}

.deptHeader h2:before{
	content:'';
	width:100%;
	height:70px;
	background:url('https://s3-eu-west-1.amazonaws.com/wentworthpewtercom/i/art/bg1.png') no-repeat center;
	display:block;
	position:absolute;
	bottom:-5px;
	z-index:-1;
}

.headerImg,
.deptHeaderImg{
	display:grid;
	grid-template-areas:
		"title image"
		"text image";
	grid-template-columns:1fr 1fr;
	align-items:center;
	grid-column-gap:2em;
	padding:2em;
	padding-left:6em;
	border-top-right-radius:1em;
	border-top-left-radius:1em;
	background-color:var(--off-white);
}

.headerImg{
	border-radius:1em;
}

.headerImg h2,
.deptHeaderImg h2{
	grid-area:title;
	align-self:end;
	font-size:48px;
	position:relative;
	z-index:1;
}
.headerImg h2:before,
.deptHeaderImg h2:before{
	content:'';
	width:100%;
	height:38px;
	background:url('https://s3-eu-west-1.amazonaws.com/wentworthpewtercom/i/art/bg2.png') no-repeat left;
	display:block;
	position:absolute;
	bottom:0;
	z-index:-1;
}

.headerImg h2:before{
	content:'';
	width:100%;
	height:58px;
	background:url('https://s3-eu-west-1.amazonaws.com/wentworthpewtercom/i/art/bg3.png') no-repeat left;

}
.headerImg .artp,
.deptHeaderImg .artp{
	grid-area:text;
	align-self:start;
	text-align:left;
	padding:0;
	line-height:1.5;
}
.headerImg .imgcont,
.deptHeaderImg .imgcont{
	grid-area:image;
}

.headerImg .imgcont img,
.deptHeaderImg .imgcont img{
	border-radius:2em;
	width:100%;
	aspect-ratio:654/403;
	object-fit:cover;
}

.deptHeader ul,
.deptHeaderImg li{}

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

.categoryLink{
	grid-column:auto/span 6;
	border-radius:1em;
	background-color:var(--off-white);
	padding: 2em;
	padding-bottom:1.5em;
	display:grid;
	grid-template-areas:
		"title image"
		"text image";
	grid-template-columns:calc(60% - 3em) 40%;
	grid-column-gap:3em;
	align-items:center;
}
.categoryLinkLrg{
	grid-column:auto/span 4;
	border-radius:1em;
	background-color:var(--off-white);
	padding: 2em;
	padding-bottom: 0em;
	display:grid;
	grid-template-areas:
		"image"
		"title"
		"text";
}


.categoryLink ul,
.categoryLinkLrg ul{
	display:inline-block;
	/* margin-bottom:1em; */
}
.categoryLink li,
.categoryLinkLrg li{
	display:inline-block;
}

.categoryLink h2,
.categoryLinkLrg h2{
	grid-area:title;
	align-self:center;
	margin:0;
	margin:.5rem 0;
	font-size:36px;

}
.categoryLink .artp,
.categoryLinkLrg .artp{
	grid-area:text;
	align-self:start;
	text-align:left;
	color:var(--off-white-alpha)
}

.categoryLink small,
.categoryLinkLrg small{
	display:block;
	padding-top:.5em;
	border-top: 1px var(--off-white-alpha) dashed;

}
.categoryLink .imgcont,
.categoryLinkLrg .imgcont{
	grid-area:image;
	align-self:start;
	
}

.categoryLink .imgcont img,
.categoryLinkLrg .imgcont img{
	border-radius:1em;
}

/* responsive iframe - used in articles*/
.responsive-iframe {
	width: calc(100% - 2em);
	margin: 1em;
	display: inline-block;
	vertical-align: top;
}

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

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

/* client specific classes for standardisation*/
ul.inline{
	padding-inline-start: 0em !important;
	margin-block-start: 0em !important;
	margin-block-end: 0em !important;
}
.inline li{
	list-style:none;
	display:inline-block;
	margin:1em;
}

/* Swiffy Sliders
------------------------------------------------------- */

/*dept sliders */
.slider-product{
    --swiffy-slider-item-count: 5;
}

/*dept sliders */
.slider-dept{
    --swiffy-slider-item-count: 5;
    --swiffy-slider-nav-light: #fff;
}
.slider-dept-alt{
    --swiffy-slider-item-count: 10;
}

/*Featured sliders */
.slider-featured{
    --swiffy-slider-item-count: 5;
}

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

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

.slider-cta li{
	margin:0;
}

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

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


/* -------------------------------------------------------------------------------------
=SiteContainers
------------------------------------------------------------------------------------- */
#cont {
	margin: auto;
	display:flex;
	flex-direction:column;
	min-height:100vh;
}

#site {
	background-color: var(--background-color);
	flex:1;
	display:flex;
	flex-direction:column;
}

/* -------------------------------------------------------------------------------------
=FIXEDTop Panel #ptf
------------------------------------------------------------------------------------- */
#ptf {
	top: 0px;
	width: 100%;
	background-color: var(--top-bar-color);
	color: var(--white);
	text-align: center;
}

#ptf p,
#ptf h1,
#ptf h2,
#ptf h3,
#ptf h4{
	margin:0;
	padding:.5em;
	font-size:14px;
}

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

/*see media queries for other layouts layout */
#pt .ext {
	--logo-width: 260px;
	--demo-width:auto;
	--nav-width:1fr;
	--search-width:426px;
	width:var(--menu-max-width);
	max-width:100%;
	background-color: var(--top-panel-color);
	margin: 0 auto;
	position: relative;
	display: grid;
	grid-column-gap: 0rem;
	grid-template-columns: 
		var(--spacer-width)
		var(--logo-width)
		1fr
		var(--search-width)
		1fr
		auto
		auto
		var(--spacer-width);
	grid-template-areas:
	". logo . search . icons basket ."
	"nav nav nav nav nav nav nav nav";
	align-items: center;
	position:relative;

	padding-bottom:.5em;
	}

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

/* defaults */
li.pipe{
	display:none;
}


/* logo
------------------------------------------------------- */
#a138936322 {
	grid-area: logo;
	padding: 3em 0em;
}

/* search toggle
------------------------------------------------------- */
#a138805250{
	display:none;
}

/* search
------------------------------------------------------- */
#pt .search {
	grid-area: search;
	/* margin-left: auto; */
	text-align: center;
	font-size:16px;
	border:1px solid var(--dark-blue);
	border-radius:3em;
	padding:5px 10px;
}

#pt .search form {
	width:calc(100% - 0px);
	display:grid;
	grid-template-areas:
	"search button";
	grid-template-columns:1fr 53px;
}

#pt .search input {
	display: block;
}

#pt .search input#searchbox {
	margin: auto;
	background-color:transparent;
	color:var(--black);
	font-size:16px;
	/* padding: 0; */
	border:none;
	width:calc(100% - 37px);
	/* outline:1px red solid; */
	height:100%;
}

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

#pt .search input#searchbox::placeholder{
	color:var(--black);
}

/*could do with some way of nicely seeing font awesome icons in coms */
#pt .search input#search {
	margin: 0;
	padding:0;
	border:none;
	border-radius:0;
	background-color:transparent;
	width:56px;
	font-family: var(--font-awesome);
}

/* icons
------------------------------------------------------- */
#p52559873,
#p53018630{
	grid-area:icons;
	margin-right:1em;
}

#p52559873 img,
#p53018630 img{
	max-height:1.5em;
	width:auto;
}

#p52559873 ul,
#p53018630 ul{
	display:grid;
	grid-template-columns: auto auto auto;
	align-items:center;
	grid-template-areas:"tel favourites account";
	grid-gap:1em;
}


#p52559873 li.tel,
#p53018630 li.tel{
	display:block;
	margin:auto;
	background-color:var(--white);
	border-radius:2em;
	padding:1em 2em;
}

#p52559873 li.wish,
#p53018630 li.wish{
	display:block;
	margin:auto;
	background-color:var(--white);
	border-radius:2em;
	padding:1em;
}

#p52559873 li.sin,
#p52559873 li.acct,
#p53018630 li.sin,
#p53018630 li.acct{
	display:block;
	margin:auto;
	background-color:var(--white);
	border-radius:2em;
	padding:1em;
}

#p52559873 li a.lnk,
#p52559873 li.reg,
#p53018630 li a.lnk,
#p53018630 li.reg{
	display:none;
}

/* basket
------------------------------------------------------- */
#pt .bskt {
	grid-area: basket;
	position:relative;
	display:block;
	margin:auto;
	background-color:var(--white);
	border-radius:2em;
	padding:1em;
}

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

#pt .bskt img {
	max-height:1.5em;
	width:auto;
}

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

/* new checkout changes the way the basket works... 
------------------------------------------------------- */
#mybskt{
	grid-area: basket;
	position:relative;
	display:block;
	margin:auto;
	background-color:var(--white);
	border-radius:2em;
	padding:1em;
}

#mybskt .bsktitems,
#mybskt .bsktvalue,
#mybskt h4{
	display:none;
}

#mybskt .bsktitems{
	display:block;
	position:absolute;
	top:0;
	right:0;
	background-color:var(--light-blue);
	border-radius:2em;
	z-index:1;
}

#mybskt .bsktitems p{
	font-size:.725em;
	margin:0;
	font-family:monospace;
	width:1rem;
	height:1rem;
	align-content:center;
	text-align:center;
	color:var(--white);
}

#mybskt .bsktitems span{
	display:none;
}

#mybskt a.btn{
	position:relative;
	display:block;
	margin:auto;
	background-color:var(--white);
	border-radius:2em;
	padding: 0;
	border:none;
}

#mybskt img{
	--button-color:transparent;
	--button-text-color:transparent;
	--button-border-color:transparent;
	font-size: 1em;
	text-align: center;
	cursor: pointer;
	border: none;
	border-radius: var(--border-radius);
	outline: none;
	padding: 0;
	max-height:1.5em;
	width:auto;
}

#mybskt a.btn:hover{
	border:none;
}

#mybskt a.btn img:hover{
	--button-hover-color:transparent;
}
/* Nav Settings
------------------------------------------------------- */
.nav-wrapper .nav{
	border-top:1px solid rgba(155, 168, 174, 0.25);
	border-bottom:1px solid rgba(155, 168, 174, 0.25)
}

/* client specific 
------------------------------------------------------- */

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

/*top ctas
------------------------------------------------------- */
#a138313729{
	background-color:var(--blue);
	color:var(--white);
	padding:1em;	
}

.deptHeaderImg + #a138313729,
.deptHeader + #a138313729{
	border-bottom-left-radius:1em;
	border-bottom-right-radius:1em;
}

#a138313729 .artp{
	width:var(--site-max-width);
	max-width:100%;
	margin:auto;
}
#a138313729 .slidecont{
	text-align:center;
	grid-gap:var(--spacing);
	display:block;
}
#a138313729 a{
	color:var(--white);
}

#pm #a138313729 li{
	border-right:1px solid var(--white-alpha);
	margin:0em;
	margin-block-start: 0em;
	margin-block-end: 0em;
}
#pm #a138313729 li:last-child{
	border-right:none;
}

#a138313729 button,
#a138313729 .slider-indicators{
	display:none;
}

/* -------------------------------------------------------------------------------------
=Main Panel #pmid
------------------------------------------------------------------------------------- */
#pmid {
	width: 100%;
	margin: auto;
	background-color: var(--main-panel-color);
	/* display: flex; */
	flex:1;
	padding-bottom:4em;
}

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

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

/* left panel - when filter is in use
------------------------------------------------------- */
#pl {
	width: 0px;
	transition: var(--transition);
}

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

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

.pmstd {
	width: var(--site-max-width);
}

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

#pf .ext {
	margin: 0 auto;
	position: relative;
	/*padding should be put in media queries */
	max-width:1200px;
	width: 100%;
	padding: 0;
	padding-top: 2em;
	padding-bottom: 2em;	
}

/*this could do with some dev work to tidy it up */
#pf .ext .arts .bc{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: var(--spacing);
	grid-auto-flow: dense;
	/*don't put margin here*/
}

/* -------------------------------------------------------------------------------------
=Bottom Panel #pb
------------------------------------------------------------------------------------- */
#pb {
	width: 100%;
	margin: auto;
	/* margin-top:4em; */
	--text-link-color:var(--white);
	--bottom-panel-heading-color:var(--white);
	--bottom-panel-text-color:var(--white);
	
}

#pb .ext {
	--logo-width:190px;
	z-index:1;
	background-color: var(--bottom-panel-color);
	border-top-right-radius:2em;
	border-top-left-radius:2em;
	margin: 0 auto;
	padding: 5em 0 ;
	position: relative;
	display: grid;

	grid-template-areas:". logo customerservices productinfo contact .";
	grid-template-columns: var(--spacer-width) 2fr 1fr 1fr 1fr var(--spacer-width)
}

#a138936323{
	grid-area:logo;
}

#a138936323 svg{
	/* to make the image align with the font */
	margin:0;
	margin-top: 12px;
	margin-right:auto;
	max-width:260px;

}

#p46137355,
#p9568265{
	grid-area:customerservices;
}

#p46137356,
#p9568266{
	grid-area:productinfo;
}

#a119865346{
	grid-area:contact;
}

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

#pb .info h3 {
	font-size: 20px;
	text-transform: capitalize;
	/* margin-bottom: 2.5rem; */
	color: var(--bottom-panel-heading-color);
}

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

#pb .info a{
	color:rgba(255,255,255,.75);
}
#pb .info ul {
	padding: 0;
}

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


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

#pb .art h2,
#pb .art h3 {
	font-size: 20px;
	font-weight:400;
	text-transform: capitalize;
	color: var(--bottom-panel-heading-color);
}

#pb h1 + p,
#pb h2 + p,
#pb h3 + p{
	font-size:initial;
}

#pb .art p{
	color:rgba(255,255,255,.75);
	line-height:1.5;
}

#pb .art a{
	color:rgba(255,255,255,.75);

}

#pb li{
	list-style:none;
}

/* -------------------------------------------------------------------------------------
=FIXEDBottom Panel #pbf
------------------------------------------------------------------------------------- */
#pbf {
	background-color: var(--bottom-bar-color);
	--font-size: 14px;
	--text-link-color:var(--white);
	font-size:small;
}

#pbf .ext {
	margin: 0 2em;
	position: relative;
	display: grid;
	text-align: center;
	color: var(--white);
	grid-template-areas:". copyright links .";
	grid-template-columns: var(--spacer-width) 1fr 1fr var(--spacer-width);
	border-top:1px solid rgba(69, 89, 102, 0.25);
	padding:1.5em
}

.etailcopy{
	grid-area:copyright;
	text-align:left;
}
.etailcopy p{
	display:inline-block;
	margin:0 .5rem;
}

.etail,
.etail a{
	color:rgba(255, 255, 255, 0.25);
}

#a138313730{
	grid-area:links;
	text-align:right;
}

#a138313730 li{
	display:inline-block;
	margin:0 .5em;
}

#a138313730 a{
	text-decoration:underline;
}

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

.home .bdcb {
	display: none;
}

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

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

.bdcb li a,
.bdcb li h1{
	font-family: var(--text-font);
	color:var(--text-color-light);
	font-size: 12px;
	font-weight: normal;
	padding: 0;
	margin: 0;
	display: inline-block;
	vertical-align:middle;
	letter-spacing:normal;
}

/*active page */
.bdcb li h1 {
	font-size: 12px;
	margin:0;
}

/*for the break between the crumb*/
.bdcb li:after {
	display:inline-block;
	font-family: var(--text-font);
	color:var(--text-color-light);
	font-size: .825rem;
	font-weight: normal;
	content:">";
	margin: .25rem;
}

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

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

.bdcb h1 {}


/* -------------------------------------------------------------------------------------
=Sitemap 
------------------------------------------------------------------------------------- */
#pm .smap ul {
	list-style-position: inside;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
#pm .smap ul li {}
/* First Level */
#pm .smap ul li {}
#pm .smap ul li a {
	font-weight: var(--heading-font-weight);
	font-size: 1.2em;
}
/* Second Level */
#pm .smap ul li ul {
	grid-template-columns: 1fr;
}
#pm .smap ul li ul li {
	width: 100%;
}
#pm .smap ul li ul li a {
	font-weight: normal;
	font-size: 1em;
}
/* Third Level */
#pm .smap ul li ul li ul li a {
	font-weight: normal;
}

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

.searchheader {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"items filter sort-by";
	grid-gap: 1em;
	align-items: center;
	
	padding: 1em .5em;
	position:sticky;
	top:0;
	z-index:99;
	background-color: var(--main-panel-color);
}

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

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

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

.searchheader {

}


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

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

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

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

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

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

.paging .currpg {
	font-size: 1em;
	display: inline-block;
	margin-right: .5em;
	border-radius:50%;
	background-color:var(--blue);
	color:var(--white);
	width:55px;
	height:55px;
	align-content:center;
}

.paging a {
	font-size: 1em;
	display: inline-block;
	margin-right: .5em;
	border-radius:50%;
	background-color:var(--off-white);
	width:55px;
	height:55px;
	align-content:center;
}

.paging a:last-child {
	margin-right: 0;
	width:unset;
	height:unset;
	background-color:transparent;
	border-radius:0;
	text-decoration:underline;
}

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

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

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

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

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

.depttree{
	display:block !important;
}

.depttree h4.tagline{}

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

.depttree li{
	position:relative;
	border-radius:1em;
	margin:0;
	overflow:hidden;
	align-items:center;
	background-color:var(--grey);
	display:grid;
	grid-template-columns:1fr;
}

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

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

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

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

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

#deptlist .fprdcont,
#searchlist .fprdcont {}

/* lets use grid layouts cos they are awesome! */
.fprd {
	position: relative;
	/*so that the border radius works on the image */
	overflow:hidden;
}
.fprd {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/*use grid template areas */
	grid-template-areas:
		"image image"
		"title title"
		"selling-price prev-price";
	grid-template-rows:auto auto 1fr;
}

/* reset margins and paddings */
.fprd p,
.fprd h3,
.fprd h4,
.fprd h5 {
	margin: 0;
	padding: 0;
}

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

/* image 
------------------------------------------------------- */
.fprd .fprdimg {
	grid-area: image;
}

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

.fprd .fprdimg img {
	margin: 0 !important;
	object-fit:cover;
	width:100%;
	border-radius:1em;
}

.fprd .fprdimg img:hover {}

/* title
------------------------------------------------------- */
.fprd .fprdtitle,
.fprd a.title{
	grid-area: title;
	font-family:var(--heading-font);
	font-size:24px;
	font-weight:600;
	margin-top:.5rem;
}

.fprd .fprdtitle a.lnk,
.fprd a.title {
	color:var(--dark-blue);
}

/*strapline */
.fprd .strap {
	grid-area: strapline;
	display:none;
}

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

/* pricing structure
------------------------------------------------------- */
.fprd h6 {
	margin: 0;
	padding: 0;
	font-family:var(--text-font);
	font-weight:500;
	margin-top:.5rem;
}

.fprd h6 span {
	font-size: small;
	display: block;
}

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

.fprd .prevprice {
	grid-area:prev-price;
}
.fprd .prevprice label {}
.fprd .prevprice h6 {
	text-decoration: line-through;
}

.fprd .price {
	grid-area: selling-price;
	color:var(--dark-blue);
	align-self:end;
}
.fprd .price label {
	display:none;
}

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

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

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

/* Unit specifics 
------------------------------------------------------- */
.fprd .unit {
	grid-area: unit-price;
}

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

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

.fprd .qty {
	grid-area: carton;
	text-align: center;
}
.fprd .qty h6 span {
	display: block;
	font-size: small;
	font-weight: normal;
	font-family: var(--text-font);
}

/* clientref/model code
------------------------------------------------------- */
.fprd .clientref span {}
.fprd .model,
.fprd .clientref {
	margin: 0;
	font-size: small
}

.fprd .model span,
.fprd .clientref span {
	font-size: small;
	display: block;
}

.fprd .clientref {
	grid-area: client-ref;
	font-size: .725em;
	text-align: left;
}

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

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

.fprdimg .piflags .f18022400{
	display:none;
}

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

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

.fprd .piflags img {
	width: auto;
	border-radius:0;
}

/* flag could be any auto sys flag like no stock, offer etc */
.fprd .flag {
	position:absolute;
	display:block;
}

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

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

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

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

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

.fprd form select {}

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

.fprd button {
	display:inline-block;
	vertical-align:middle;
	font-weight:600;
	padding: .5em .75em;
}

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

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


/* Wishlist/Savefor later on fprd
------------------------------------------------------- */
.sfl{
	grid-area:unset;
	position:absolute;
	top:.5em;
	right:.5em;
	z-index:1;
}

.sfl .submit {
	border:0;
	padding:0.5em;
	width:3em;
	line-height:1;
	background-color:var(--white);
}

/* Email when in stock
------------------------------------------------------- */
.fprd .ewis {
	grid-area: buy-pane;
	margin: 0;
	padding: 0 .5rem;
}

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

.fprd.add .bnr{
	width: 100%;
	height:100%;
	object-fit: cover;
	color:var(--white);
}

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

.fprd.add .toi{
	position:absolute;
	top:1em;
	padding:2em;
}
.fprd.add h3{
	--heading-color:var(--white);
	font-size:40px;
	position:relative;
	z-index:1;
	margin-bottom:2rem;
}
.fprd.add h3:before{
	content:'';
	width:100%;
	height:38px;
	background:url('https://s3-eu-west-1.amazonaws.com/wentworthpewtercom/i/art/bg2.png') no-repeat left;
	opacity:.5;
	display:block;
	position:absolute;
	bottom:0;
	z-index:-1;
}

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

/* -------------------------------------------------------------------------------------
=Client Specific Stylings 
------------------------------------------------------------------------------------- */

/* home page
------------------------------------------------------- */
#prom-1529118719{}


/* HP Static 
------------------------------------------------------- */
#p46137353,
#p53018634{
	max-width:var(--site-max-width);
	margin:auto;
}

#p46137353 .imgcont,
#p53018634 .imgcont{
	position:relative;
}
#p46137353 picture:before,
#p53018634 picture:before
{
	content:'';
	display:block;
	height:100%;
	width:100%;
	background:url('https://s3-eu-west-1.amazonaws.com/wentworthpewtercom/i/art/hpimageoverlay.webp') no-repeat left;
	z-index:1;
	position:absolute;
	left:0;
	top:0;
}
#p46137353 picture img,
#p53018634 picture img{
	z-index:-2;
}

#p46137353 h2,
#p46137353 h3,
#p53018634 h2,
#p53018634 h3{
	font-size:62px;
	line-height:1;
	position:relative;
	z-index:1;
}

#p46137353 h2:before,
#p46137353 h3:before,
#p53018634 h2:before,
#p53018634 h3:before{
	content:'';
	width:100%;
	height:70px;
	background:url('https://s3-eu-west-1.amazonaws.com/wentworthpewtercom/i/art/bg1.png') no-repeat center;
	display:block;
	position:absolute;
	bottom:-5px;
	z-index:-1;
}

#p46137353 p,
#p53018634{
	font-size:16px;
}

/* HP Trusted by 
------------------------------------------------------- */
#a138510341{
	display:grid;
	grid-template-areas:"title logos";
	align-items:center;

	border-bottom:1px solid var(--light-blue-alpha);
	padding-bottom:2em;
}

#a138510341 h2{
	text-align:center;
	font-weight:normal;
	color:var(--light-blue);
}

#a138510341 .slidecont picture,
#a138510341 .slidecont{
	align-content:center;
	align-items:center;
	height:100%;
}

#a138510341 .slider-indicators{
	display:none;
}

/* HP Rooted in Sheffield
------------------------------------------------------- */
#a138575878.headerImg{
	display:grid;
	grid-template-areas:
		" image title"
		" image text";
	grid-template-columns:minmax(auto,654px) minmax(auto,1fr);
	align-items:center;
	grid-column-gap:2em;
	padding:2em;
	border-top-right-radius:1em;
	border-top-left-radius:1em;
	background-color:var(--off-white);
}


	#a138575878.headerImg img{
		border-radius:1em;
		width:100%;
		aspect-ratio:654/403;
		object-fit:cover;
		border-radius:1em;
	}
/* ------------------------------------------------------------------------------------
	SCREEN - v6 nav 2025 
	Filename : nav.css
	Last Updated : 16. 01. 2025
	Copyright :(c) 2025 Etail Systems Ltd
	Author : Etail Systems Ltd 
------------------------------------------------------------------------------------- */

:root{
	--menu-line-height:50px;
}

picture,
picture img{
	display:block;
}

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

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

/*wrapper 
------------------------------------------------------- */
.nav-wrapper *,
.nav-wrapper *:before,
.nav-wrapper *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.nav-wrapper {
	grid-area:nav;
	position: relative;
	width: 100%;
	min-height: var(--navbar-height);
	margin: 0 auto;
	text-align:center;
}

.nav-wrapper ul,
.nav-wrapper li{
	margin:0;
	padding:0;
	list-style: none;
}

/* -------------------------------------------------------------------------------------
=Top Nav
------------------------------------------------------------------------------------- */

.nav-wrapper .nav {
	margin: 0 auto;
	padding: 0;
	list-style: none;
	position: relative;
	/*used to stop the gaps with inline block stuff
	font-size:0;*/
	width: 100%;
	max-width: var(--menu-max-width);
	text-align:center;
	color:var(--navbar-dropdown-text-color);
}

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

/* top nav links
------------------------------------------------------- */
ul.nav .l0>a,
ul.nav .l1>a{
	display: block;
	line-height:var(--menu-line-height);
	/* if drop down icon is being used
	padding: 0 calc(1em + 6px) 0 0.5em;*/
	padding: 0 1em 0 1em;
	color: var(--navbar-heading-color);
	font-family:var(--navbar-heading-font);
	font-size:var(--navbar-heading-font-size);
	font-weight:var(--navbar-font-weight);
	text-decoration: none;
	border-bottom:2px solid transparent;
}

ul.nav>li>a:only-child {}

@media(min-width:922px) {
	ul.nav>li>a:hover,
	ul.nav>li:hover>a {
		background: var(--navbar-active-color);
		color:var(--navbar-active-text-color);
		border-bottom:2px solid var(--blue);
		/*don't change the font weight on hover unless you want elements to shift left/right as the size changes */
	}
}
ul.nav>li.active-menu-item>a,
ul.nav>li.first-menu-item>a {
	background: var(--navbar-active-color);
	/* color:var(--navbar-active-text-color); */
	border-bottom:2px solid var(--blue);
}

ul.nav>li>a .fa {
	position: relative;
	width: 24px;
}

ul.nav>li>a>img {
	max-width: 16px;
	display: block;
}

/* Classic Dropdown
-------------------------------------------------------------------------------------------------------------- */

/* dropdown icons
------------------------------------------------------- */
.nav .deptlink{
	display:grid;
}


.nav .classic .deptlink{
	display:grid;
	grid-template-areas:"link popout";
	grid-template-columns:1fr 2em;
	align-items:center;
}

.nav .classic .deptlink a.img{
	grid-area:image;
	padding:.5em;
}

.nav .classic .deptlink a.txt{
	grid-area:link;
	display:block;
	padding:1em;
	font-family:var(--text-font);
	font-weight:600;
	font-size:var(--navbar-heading-font-size);
	/* color:var(--navbar-dropdown-text-color); */
}

/* css arrows if has child item */
.deptlink:after{
	font-family: var(--font-awesome);
	text-decoration: none;
	font-size: 16px;
	padding: 0;
	content: '\f105';
	grid-area:popout;
	margin:auto;
	text-align:center;
	/* outline:1px red solid; */
}

.deptlink:only-child:after,
.l3 .deptlink:after{
	content: "";
}

ul.nav>li.classic {
	display:inline-block;
	position:relative;
}

/* 2nd Level
------------------------------------------------------- */
ul.nav>li>ul.l2,
ul.nav>li>.menu-drop-down{
	position: absolute;
	width: var(--navbar-dropdown-width);
	z-index:1001;
	text-align:left;
	background: var(--navbar-dropdown-color);
	-webkit-box-shadow: var(--box-shadow);
	-moz-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
}

ul.nav>li>ul.l2 li:hover {
	background: var(--navbar-active-color);
	color:var(--navbar-active-text-color);
}



/* 3rd Level
------------------------------------------------------- */

ul.nav>li>ul>li>ul.l3{
	position: absolute;
	width: var(--navbar-dropdown-width);
	z-index:1001;
	text-align:left;
	background: var(--navbar-dropdown-color);
	-webkit-box-shadow: var(--box-shadow);
	-moz-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
	color:var(--navbar-dropdown-text-color);
	left: var(--navbar-dropdown-width);
	top: 0;
}


/* 4th Level
------------------------------------------------------- */
ul.nav>li>ul>li>ul>li>ul.l4,
ul.nav>li>ul>li>ul>li>ul.l5{
	display:none;
}

/* this class should only be applied to top level menu items if their sub menu flows outside of the viewport,
used for dropdowns that are close to the right edge - this change should align the right edge of the dropdown to the right edge of the screen
removing horizontal scroll
*/

.over .l2{
	/* outline:1px red solid; */
	right:0;
}
ul.nav>li.over>ul>li>ul.l3,
ul.nav>li.popl>ul>li>ul.l3{
	left: auto;
	right: var(--navbar-dropdown-width);
		-webkit-box-shadow: var(--box-shadow-alt);
	-moz-box-shadow: var(--box-shadow-alt);
	box-shadow: var(--box-shadow-alt);
}


/* -------------------------------------------------------------------------------------
=Mega-menu / Mega-menu-classic 
------------------------------------------------------------------------------------- */

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

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

/*  Content Related */
ul.nav>li.mega-menu-classic>div ul{
	margin: 0;
}

/* don't show l2;s */
.mega-menu-classic .l2 .menu-grid-lined{
	display:none;
}


/* Mega Menus
------------------------------------------------------- */
ul.nav>li.mega-menu-classic>div,
ul.nav>li.mega-menu>div {
	position: absolute;
	z-index:1001;
	width: var(--menu-max-width);
	height: auto;
	top: var(--navbar-height);
	left: 0;
	background: var(--navbar-dropdown-color);
	overflow: hidden;
	-webkit-box-shadow: var(--box-shadow);
	-moz-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
}

/* Mega Menu - Clasic
------------------------------------------------------- */
.mega-menu-classic{}

.mega-menu-classic .menu-grid > .menu-row ul.l2{
	display:grid;
	grid-template-columns:repeat(5,1fr);
	grid-gap:1rem;
	margin-bottom:1rem;
}

.mega-menu-classic .menu-grid > .menu-row ul.l2  a.txt{
	font-family:var(--heading-font);
	font-weight:var(--heading-font-weight);
}

.mega-menu-classic .menu-grid > .menu-row ul.l3{
	text-align:left;
}

.mega-menu-classic .menu-grid > .menu-row ul.l3  a.txt{
	font-family:var(--text-font);
	font-weight:var(--text-font-weight);
}

.nav .mega-menu-classic .deptlink{
	display:grid;
	grid-template-areas:
		"image";
	grid-template-columns:1fr;
	align-items:end;
}

.nav .mega-menu-classic .deptlink a.img{
	grid-area:image;
}

.nav .mega-menu-classic .deptlink a.img img{
	width:100%;
}

.nav .mega-menu-classic .deptlink a.txt{
	grid-area:image;
	background-color:rgba(255, 255, 255, 50%);
	padding:1rem 1rem;
	font-family:var(--heading-font);
	font-weight:var(--heading-font-weight);
	font-size:1.125em;
	min-height:5em;
	align-content:center;
	text-align:center;
}

.mega-menu-classic .deptlink:after{
	content: "";
	display:none;
}

 
/* Mega Menu - Clasic with article
------------------------------------------------------- */
.mega-menu-classic.witharticle{}

.mega-menu-classic:has(.deptarticle){}

.mega-menu-classic:has(.deptarticle) div.menu-grid .menu-row,
.mega-menu-classic:has(.deptarticle) div.menu-grid-lined .menu-row {
	display:grid;
	padding:1em;
	grid-template-columns:auto 1fr;
	grid-gap:4rem;
	margin-bottom: 0rem;
}

.mega-menu-classic:has(.deptarticle) .menu-grid > .menu-row ul.l2{
	display:block;
	margin:0;

}
.mega-menu-classic:has(.deptarticle) .menu-grid > .menu-row ul.l2  a.txt{
	font-family:var(--text-font);
	font-weight:700;
}

.mega-menu-classic:has(.deptarticle) .depts ul{
	column-count:1;
	padding:.5em;
}

.mega-menu-classic:has(.deptarticle) .deptlink{
	display:block;
}

.mega-menu-classic:has(.deptarticle) .deptlink a.img{
	display:none;
}

.mega-menu-classic:has(.deptarticle) .deptlink a.img img{
	width:100%;
}

.mega-menu-classic:has(.deptarticle) .deptlink a.txt{
	display:block;
	background:none;
	padding:.25em;
	font-size:18px;
	min-height:auto;
	align-content:center;
	text-align:left;

}

.mega-menu-classic:has(.deptarticle) .deptlink:after{
	content: "";
	display:none;
}

.mega-menu-classic .deptarticle{
	text-align:left;
}

.mega-menu-classic .deptarticle img{
	width:unset;
	margin:0;
	margin-right:auto;
}

.mega-menu-classic .deptarticle p{
	margin:0;
	color:var(--blue);
	text-transform:capitalize;
	font-weight:700;
}

.mega-menu-classic .deptarticle img{
	border-radius:1em;
	margin-bottom:1rem;
}


/* Mega Menu
------------------------------------------------------- */
.mega-menu .menu-grid > .menu-row ul{
	display:grid;
	grid-template-columns: repeat(5,1fr);
	grid-gap:1rem;
}

.nav .mega-menu .deptlink{
	display:grid;
	grid-template-areas:
		"image"
		"link";
	grid-template-columns:1fr;
	align-items:center;
	text-align:center;
}

.nav .mega-menu .deptlink a.img{
	grid-area:image;
}

.nav .mega-menu .deptlink a.img img{
	width:100%;
}

.nav .mega-menu .deptlink a.txt{
	grid-area:link;
	display:block;
	padding:.5em;
}

ul.nav>li.mega-menu>div>ul.mega-menu-nav {
	position: relative;
	width: var(--navbar-dropdown-width);
	height: 100%;
	margin:0;
	/* height: 500px;  if you don't want javascript to define height, use manual height */
	left: 0;
	top: 0;
	background: var(--navbar-sidebar-color);
	color:var(--navbar-sidebar-text-color);
}


/*side bar items */
ul.nav > li.mega-menu > div > ul.mega-menu-nav > li > .deptlink{
	display:grid;
	grid-template-areas:
		"image title popout";
	grid-template-columns:3em 1fr 1em;
	align-items:center;
	text-align:left;
	min-height:var(--navbar-dropdown-item-height);
	padding:.5em;
}

ul.nav > li.mega-menu > div > ul.mega-menu-nav > li:hover > .deptlink{
	background-color:var(--navbar-active-color);
	color:var(--white);
}


ul.nav > li.mega-menu > div > ul.mega-menu-nav > li > .deptlink a.img{
	display:block;
	grid-area:image;
	padding:.5em;
}

ul.nav > li.mega-menu > div > ul.mega-menu-nav > li > .deptlink a.txt{
	display:block;
	grid-area:title;
	font-family:var(--heading-font);
}

ul.nav > li.mega-menu > div > ul.mega-menu-nav > li:hover > .deptlink a.txt{
text-decoration:none;
}



/*sort out icons - none in side bar */
.mega-menu-nav .l2 .deptlink .img{
	display:none;
}

ul.nav > li.mega-menu > div > ul.mega-menu-nav > li.active-menu-item > .deptlink
ul.nav > li.mega-menu > div > ul.mega-menu-nav > li.first-menu-item > .deptlink {
  background: var(--navbar-sidebar-hover-color);
}

ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>a {
	display: block;
	line-height: 40px;
	padding: 0 15px;
	text-decoration: none;
}

ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.active-menu-item>a,
ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.first-menu-item>a {
	background: #e6e6e6;
}

ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div.menu-grid {
	position: absolute;
	width: calc(var(--menu-max-width) - var(--navbar-dropdown-width));
	height: auto;
	max-height:100%;
	min-height: 100%;
	left: var(--navbar-dropdown-width);
	top: 0;
	background: var(--navbar-popout-color);
}

.mega-menu-nav .l3 .deptlink .img{
	display:block;
}

ul.nav>li.mega-menu>div>ul.mega-menu-nav>li:hover>a {
	background: #ddd;
}



.mega-menu-nav .l4 {
	display:none;
}



.nav-wrapper .visible-xs {
	visibility: hidden;
	position: absolute;
}
/* DEVICES EXCEPT MOBILE/tablet */
@media(min-width:991px) {

	/*  CLASSIC 2ND, 3RD, 4TH LEVEL --> HIDE ON NON-MOBILE */
	ul.nav>li>ul,
	ul.nav>li>ul>li>ul,
	ul.nav>li>ul>li>ul>li>ul {
		/* hide */
		visibility: hidden;
		opacity: 0;
	}
	/*  CLASSIC 2ND, 3RD, 4TH LEVEL --> SHOW ON NON-MOBILE WHEN HOVERED TO PARENT */
	ul.nav>li:hover>ul,
	ul.nav>li>ul>li:hover>ul,
	ul.nav>li>ul>li>ul>li:hover>ul {
		/* show */
		visibility: visible;
		opacity: 1;
	}
	/*  MEGA, MEGA BLOG, MEGA SHOP --> HIDE ON NON-MOBILE */
	ul.nav>li.mega-menu-classic>div,
	ul.nav>li.mega-menu>div {
		/* hide */
		visibility: hidden;
		opacity: 0;
		z-index:-1001;
	}
	/*  MEGA, MEGA BLOG, MEGA SHOP --> SHOW ON NON-MOBILE */
	ul.nav>li.mega-menu-classic:hover>div,
	ul.nav>li.mega-menu:hover>div {
		visibility: visible;
		opacity: 1;
		z-index:1001;
		background: var(--navbar-dropdown-color);
		background-color:var(--white);
		border-radius:1em;
		border:1px rgba(155, 168, 174, 0.25) solid;
	}

	/*  MEGA BLOG */
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div:not(.deptlink) {
		/* hide */
		visibility: hidden;
		opacity: 0;
	}
	ul.nav>li.mega-menu:hover>div>ul.mega-menu-nav>li.active-menu-item>div,
	ul.nav>li.mega-menu:hover>div>ul.mega-menu-nav>li.first-menu-item>div	{
		visibility: visible;
		opacity: 1;
	}
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li:hover>div {
		visibility: visible;
		opacity: 1;
		z-index: 101;
	}

	ul.nav>li.l1>a:not(:only-child):after {
		/* css down-arrows if has child item 
		font-family: var(--font-awesome);
		text-decoration: none;
		content: '\f107';
		font-size:1rem;
		position: absolute;
		margin-left: 5px;*/
	}
	ul.nav>li:hover>a:after {
		-webkit-transform: rotate(-180deg);
		-moz-transform: rotate(-180deg);
		-o-transform: rotate(-180deg);
		-ms-transform: rotate(-180deg);
		transform: rotate(-180deg);
	}
	

	

	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.active-menu-item>a:after,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li.first-menu-item>a:after,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li:hover>a:after {
		content: "";
		position: absolute;
		right: 0;
		margin-top: 13px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 6px 8px 6px 0;
		border-color: transparent #fff transparent transparent;
	}
	
}

/* ################## RESPONSIVE STYLES ###################### */

@media(max-width:992px) {

	/*start showing the menu toggle icon */
	.home-hamburger{
		display:block;
		z-index: 1000;
	}

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

	div.nav-wrapper .hidden-xs {
		visibility: hidden;
		display: none;
	}
	div.nav-wrapper {
		z-index:1001;
		background:var(--navbar-color);
	}
	.nav-wrapper .visible-xs {
		visibility: visible;
		position: absolute;
		left: 0;
		top: 0;
	}


	/* MENU DROPDOWN TOGGLE - MOBILE */
	span.dropdown-toggle {
		grid-area:toggle;
		align-self:center;
		margin:auto;
		z-index: 1000000;
		cursor: pointer;
	}

	span.dropdown-toggle:after {
		/* css down-arrows if has child item */
		font-family: var(--font-awesome);
		text-decoration: none;
		content: '\f107';
		color: var(--white);
		font-size: 25px;
		right: 0;
	}
	span.dropdown-toggle.dropdown-toggle-rotate {
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		transform: rotate(180deg);
	}

	.mega-menu-nav > li > .deptlink{
		grid-template-areas:
			"image link";
		grid-template-columns:3em 1fr;
	}

	/* no need for css arrows if has child item  as we are now doing a vertical menu*/
	.mega-menu-nav .deptlink:after{
		content: '';
	}

	.nav .deptlink{
		display:grid;
		grid-template-areas:
			"image link";
		grid-template-columns:3em 1fr;
		align-items:center;
		/* min-height:var(--menu-line-height); */
	}

	.nav .deptlink a.img{
		grid-area:image;
		padding:.5em;
	}

	.nav .deptlink a.txt{
		grid-area:link;
		padding:.5em;
		color:var(--blue);
		text-align:left;
	}

	/* -------------------------------------------------------------------------------------
	=Top Nav
	------------------------------------------------------------------------------------- */

	div.nav-wrapper>ul.nav {
		position: absolute;
		/* top: 50px; */
		width: 100%;
		background-color:var(--blue);
		text-align:left;
		/* padding-bottom:1em; */
		margin-top:1em;
		border-bottom-left-radius:1rem;
		border-bottom-right-radius:1rem;
		box-shadow: 1px 2px 2px 0px rgba(0, 0, 0, 0.25);
	}

	ul.nav>li,
	ul.nav>li.classic	{
		float: none;
		display:grid;
		grid-template-areas:"toggle title"
		"dropdown dropdown";
		grid-template-columns:3em 1fr;
		text-align:left;
	}

	ul.nav>li>ul.l2,
	ul.nav>li>.menu-drop-down{
		-webkit-box-shadow: none;
		-moz-box-shadow:  none;
		box-shadow: none;
	}

		ul.nav>li>ul>li>ul.l3{
		-webkit-box-shadow: none;
		-moz-box-shadow:  none;
		box-shadow: none;
	
	}


	/* home icon added on mobile */
	ul.nav>li.l0>a:before{
		content: '\e3af';
		text-align:center;
		font-family:var(--font-awesome);
		font-weight:600;
		font-size:25px;
		width: 50px;
		height: 50px;
		color:var(--navbar-heading-color);
		position: absolute;
		left: 0;
		top: 0;
	}

	/*side bar items */
	.l1 .deptlink,
	.l2 .deptlink,
	.l3 .deptlink{
		grid-area:title;
	}


	ul.nav>li.active-menu-item>a,
	ul.nav>li.first-menu-item>a {
		background: transparent;
		/* color:var(--navbar-active-text-color); */
		font-weight:400;
	}

	/* classic */

	.classic{}

	.classic li.l2{
		float: none;
		display:grid;
		grid-template-areas:"toggle title"
		". dropdown";
		grid-template-columns:50px 1fr;
	}


	ul.nav>li>ul.l2 li:hover {
		background: var(--off-white);
		color:var(--navbar-active-text-color);	
	}

	.nav .classic .deptlink:after{
		display:none;
		content: "";
	}

/* mega menu / mega menu classic */
	.mega-menu li.l0,
	.mega-menu li.l1,
	.mega-menu li.l2,
	.mega-menu-classic li.l2{
		float: none;
		display:block;
		display:grid;
		grid-template-areas:"toggle title"
							"dropdown dropdown";
		grid-template-columns:50px 1fr;
		margin-left:1em;
		
	}

	.mega-menu-classic .menu-grid > .menu-row ul.l2{
		display:grid;
		grid-template-columns:repeat(2,1fr);
		grid-gap:1rem;
		margin-bottom:1rem;
	}

	.mega-menu-classic li.l2{
		float: none;
		display:block;
		display:grid;
		grid-template-areas:"title"
							"dropdown";
		grid-template-columns:1fr;
		margin:0;
	}

	ul.nav>li>a,
	ul.nav .l1>a{
		grid-area:title;
		color:var(--white)
	}
	ul.nav>li>a:only-child {
		padding: 0 1em;
	}


	/* MENU MEGA */
	ul.nav>li.mega-menu-classic,
	ul.nav>li.mega-menu {
		position: relative;
	}
	ul.nav>li.mega-menu-classic>div,
	ul.nav>li.mega-menu>div {
		position: relative;
		top: auto;
		left: auto;
		border-top: none;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}
	ul.nav > li.mega-menu > div > ul.mega-menu-nav > li:hover > .deptlink{
		background-color:unset;
	}



	
	/* MENU MEGA */
	ul.nav>li.mega-menu>div>ul.mega-menu-nav {
		width: 100%;
		height: auto;
		left: auto;
		top: auto;
	}
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li {
		position: relative;
	}
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>a,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>.deptlink{
		/*no... you can't remove the !important */
		grid-area:title !important;
		line-height: 50px;
		padding: 0;
	}
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div {
		position: relative;
		width: 100%;
		min-height: auto;
		left: auto;
		top: auto;
		z-index: auto;
	}

	


	/* MENU HIDE/SHOW SUBMENUS - MOBILE */
	ul.nav>li>ul>li>ul>li>ul,
	ul.nav>li>ul>li>ul,
	ul.nav>li>ul,
	ul.nav,
	ul.nav>li.mega-menu-classic>div,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div:not(.deptlink),
	ul.nav>li.mega-menu>div:not(.deptlink){
		max-height: 0;
		transform: scaleY(0);
		overflow: hidden;
	}
	ul.nav>li>ul.mobile-sublevel-show,
	ul.nav>li>ul>li>ul.mobile-sublevel-show,
	ul.nav>li>ul>li>ul>li>ul.mobile-sublevel-show,
	ul.nav.mobile-sublevel-show,
	ul.nav>li.mega-menu-classic>div.mobile-sublevel-show,
	ul.nav>li.mega-menu>div.mobile-sublevel-show,
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div.mobile-sublevel-show
	{
		max-height: 20000px;
		transform: scaleY(1);
		position:initial;
		width:100%;
		height:auto !important; /* added possible due to chris playing with images, mobile dropdown stopped working */
		grid-area:dropdown;
	}

	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div.menu-grid{
		position:initial;
		width:100%;
	}

	div.menu-grid>div.menu-row {
		position: relative;
		padding:0;
		height:auto;
	}
	div.menu-grid > div.menu-row ul.l3{
		display:block;
		background: var(--navbar-popout-color);
		margin-bottom:0;
	}

	div.menu-grid > div.menu-row ul.l3 li.l3 .deptlink a.img{
		max-width: 50px;
		background-color:transparent;
	}
	
	/* Hamburger icon - mobile */
	.c-hamburger {
		display: block;
		position: relative;
		overflow: hidden;
		margin: auto;
		padding: 0;
		width: 44px;
		height: 24px;
		font-size: 0;
		text-indent: -9999px;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		box-shadow: none;
		border-radius: 0;
		border: none;
		cursor: pointer;
		-webkit-transition: background 0.3s;
		transition: background 0.3s;
	}
	.c-hamburger:focus {
		outline: none;
	}
	/*middle bit of the x */
	.c-hamburger span {
		display: block;
		position: absolute;
		top: 50%;
		margin:auto;
		left: var(--half-spacing);
		right: var(--half-spacing);
		height: 3px;
		background:var(--blue);
		width:50%;
	}
	/* top and bottom bits of the x */
	.c-hamburger span::before,
	.c-hamburger span::after {
		position: absolute;
		display: block;
		left: 0;
		width: 100%;
		height: 3px;
		background-color: var(--blue);
		content: "";
	}
	.c-hamburger span::before {
		top: -7px;
	}
	.c-hamburger span::after {
		bottom: -7px;
	}
	/**
   * Hamburger to "x" (htx). Takes on a hamburger shape, bars slide
   * down to center and transform into an "x".
   */
	.c-hamburger--htx {
		background-color:transparent;
	}
	.c-hamburger--htx span {
		-webkit-transition: background 0s 0.3s;
		transition: background 0s 0.3s;
	}
	.c-hamburger--htx span::before,
	.c-hamburger--htx span::after {
		-webkit-transition-duration: 0.3s, 0.3s;
		transition-duration: 0.3s, 0.3s;
		-webkit-transition-delay: 0.3s, 0s;
		transition-delay: 0.3s, 0s;
	}
	.c-hamburger--htx span::before {
		-webkit-transition-property: top, -webkit-transform;
		transition-property: top, transform;
	}
	.c-hamburger--htx span::after {
		-webkit-transition-property: bottom, -webkit-transform;
		transition-property: bottom, transform;
	}
	/* active state, i.e. menu open */
	.c-hamburger--htx.is-active {
		background-color: transparent;
	}
	.c-hamburger--htx.is-active span {
		background: none;
	}
	.c-hamburger--htx.is-active span::before {
		top: 0;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.c-hamburger--htx.is-active span::after {
		bottom: 0;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.c-hamburger--htx.is-active span::before,
	.c-hamburger--htx.is-active span::after {
		-webkit-transition-delay: 0s, 0.3s;
		transition-delay: 0s, 0.3s;
	}
}

/* MEDIA QUERY --> SMALL DEVICES */

@media(min-width:768px) and (max-width:991px) {
	.nav-wrapper .hidden-md {
		visibility: hidden;
		display: none;
	}
	div.nav-wrapper {}
	ul.nav>li.mega-menu>div>ul.mega-menu-nav {}
	ul.nav>li.mega-menu>div>ul.mega-menu-nav>li>div {}
	
	div.menu-grid.menu-grid-lined>div.menu-row:after {
		background: none;
	}
}


/* TRANSITION EFFECTS */
@media(min-width:767px) {
	/* Arrows */
	ul.nav>li>a:after {
		transition: all 0.3s ease;
	}
	ul.nav>li>ul>li>a:after,
	ul.nav>li>ul>li>ul>li>a:after,
	ul.nav>li>ul>li>ul>li>ul>li>a:after {
		transition: all 0.3s ease;
	}
	/* 1st level move-up effect */
	ul.nav>li>ul,
	ul.nav>li>div {
		/*transform: translateY(25px);*/
		transition: all 0.3s ease;
	}
	ul.nav>li:hover>ul,
	ul.nav>li:hover>div {
		transform: translateY(0);
	}
	/* 2nd 3rd 4th level move-left/right effect */
	ul.nav>li>ul>li>ul,
	ul.nav>li>ul>li>ul>li>ul,
	ul.nav>li>ul>li>ul>li>ul>li>ul {
		/*transform: translateX(25px);*/
		transition: all 0.3s ease;
	}
	ul.nav>li>ul>li:hover>ul,
	ul.nav>li>ul>li>ul>li:hover>ul,
	ul.nav>li>ul>li>ul>li>ul>li:hover>ul {
		transform: translateX(0);
	}
}
/* -------------------------------------------------------------------------------------
=ProductPage  
------------------------------------------------------------------------------------- */
#pmid.page_buy {}

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

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

#pi .main{
	margin: 0 auto;
	position: relative;
	width: var(--site-max-width);	
	display:grid;
	grid-template-columns:689px  1fr;
	grid-template-areas:"top top"
						"left right"
						"bottom bottom";
	grid-column-gap:2rem;
}

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

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

#pi .main .right{
	grid-area:right;
	display:grid;
	grid-template-areas:"model reviews"
						"title title"
						"price stock"
						"description description"
						"buy-pane buy-pane"
						"message message"
						". .";
	grid-template-rows:auto auto auto auto auto auto 1fr;
	max-width:454px;
	margin:0 auto;
}

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

/*same class used for a div outside of the main section */
#pi .main + .bottom{
	margin-top:1rem;
}

/*model 
------------------------------------------------------- */
#pi .main .left .brandmanu.model{
	display:none;
}
.brandmanu.model{
	grid-area:model;
}
.brandmanu.model h5,
.brandmanu.model h6{
	font-size:12px;
	font-weight:500;
	margin:0;
	display:inline;
	color:var(--light-blue);
	font-weight:400;
	letter-spacing:normal;
}

.brandmanu.model h5{
	margin-right:.5em;
}
/* Product Title
------------------------------------------------------- */
#pi .main .left .pititle{
	display:none;
}
#pi .pititle {
	--font-size:1em;
	grid-area: title;
	padding:1em 0;
	border-bottom:1px rgba(69, 89, 102, 0.25) solid;
}

#pi .pititle  h2{
	--typography-spacing-vertical: 1rem;
	font-size:40px;
	font-weight:600;
	margin:0;
	text-align:left;
	line-height:110%;
}

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

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

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

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

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

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

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

#pi .gallery #galleryimages{
	--swiffy-slider-item-count: 6;
	margin-top:1em;
	margin-bottom:2em;
}

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

/*main gallery videos */
.youtubeplayercontainer >* {
	min-height: 20rem
}
.youtubeplayercontainer >*{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover
}
.youtubeplayercontainer>*{
	-o-object-fit: contain;
	object-fit: contain
}

#pi .gallery img{
	width: 100%;
	object-fit: cover;
	margin:auto;
	border-radius:1em;
	aspect-ratio:1/1;
}

#pi .gallery #galleryimages .video:after{
	font-family:var(--font-awesome);
	color:var(--dark-grey);
	content:"\f144";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	margin:auto;
	text-align:center;
	align-content:center;
	font-size:4em;
	pointer-events:none;
}

#pi .gallery h4 {
	display: none;
}

/* separate youtube element 
------------------------------------------------------- */
#pi .youtube {
	margin:0;
	grid-area: product-video;
	align-content:center;
	align-items:center;
	border-radius:1em;
}

#pi .youtube .responsive-iframe {
	margin:0;
	width:100%;
}

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

#pi .youtube li{
	display:block;
}

#pi .youtube iframe{
	border-radius:1em;
}

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

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

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

#pi .top .flags .freedel{
	position:absolute;
	right:0;
	top:0rem;
}
#pi .top .flags .prdel img{
	max-width:150px;
}

#pi .top .flags .offer{

	position:absolute;
	right:1rem;
	top:0rem;
}
#pi .top .flags .offer img{
	max-width:120px;
}

/* pricecomp
------------------------------------------------------- */
#pi .main .left .pricecomp{
	display:none;
}
.pricecomp{
	grid-area:price;
	padding:.5em 0;
}

.pricecomp .price h6{
	font-size:20px;
	margin:0;
}
.pricecomp .price label{
	display:none;
}

/*offer price */
.pricecomp .offer {
	display:inline-block;
}
.pricecomp  .offer h6 {
	font-size:1.5rem;
	font-weight:var(--heading-font-weight);
	color:var(--red);
}

/*previous price (goes with offer) */
.pricecomp .prevprice {
	display:inline-block;
	grid-area: prev-price;
	margin-right:1em;
}
.pricecomp  .prevprice h6 {
	text-decoration: line-through;
}

/* piflags
------------------------------------------------------- */
#pi .piflags{
	grid-area:stock;
	align-self:center;
	margin-left:auto;
}

#pi .piflags .f18022400 img{
	max-width:71px;
}

#pi .piflags .f18022401{
	display:none;
}

/* Buy Panel
------------------------------------------------------- */
#pi .pibuy {
	grid-area: buy-pane;
	margin:1em 0;
}

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

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

/*normal price */
#pi .pibuy .price {
	display:none;
	grid-area: sellingprice;
}
#pi .pibuy .price h6 {
	font-size:1.25rem;
	font-weight:var(--heading-font-weight);
}

/*offer price */
#pi .pibuy .offer {
	display:none;
	grid-area: sellingprice;
}
#pi .pibuy .offer h6 {
	font-size:1.5rem;
	font-weight:var(--heading-font-weight);
	color:var(--red);
}

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

/* Messages */
#pi .pibuy p {}
#pi .pibuy p#bspresponse {
	grid-area: bspresponse;
}
#pi .pibuy h4 {}
#pi .pibuy h5 {}
#pi .pibuy p.p_stock {}
#pi .pibuy .qty {
	display: none;
}

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

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

/* quantity in basket info */
#pi .pibuy .qtyInBskt {
	display: none;
}

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

/* Buy Form
-------------------------------------------------------*/
#buy_form {
	grid-area: buypane;
}

.attrqty{
	margin:1em 0;
	display:grid;
	grid-template-columns:auto 1fr;
	grid-gap:1em;
}

.attrqty .qtyinput{
	display:inline-block;
}

.attrqty label{
	display:none;
}

.attrqty button{
	background-color:var(--off-white);
	outline:none;
	border:none;
	border-radius:50%;
	width:55px;
	height:55px;
}

.attrqty #skuqtysub{
	border-top-right-radius:0;
	border-bottom-right-radius:0;
}

.attrqty #skuqtyadd{
	border-top-left-radius:0;
	border-bottom-left-radius:0;
}

.attrqty input.inputtext,
.attrqty input.inputtext_light{
	background-color:var(--off-white);
	height:55px;
	align-content:center;
	text-align:center;
	border-radius:0;
	border:0
}

.attrqty input.inputtext:focus-visible,
.attrqty input.inputtext_light:focus-visible{
	outline:none;
}

.attrqty #buy{}

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

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

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

/*duplicated product title auto written out in the description */
#pi .pidesc h2[itemprop="name"] {
	display: none;
}

.pidescx{
	grid-area:description;
	border-top:1px rgba(69, 89, 102, 0.25) solid;
	border-bottom:1px rgba(69, 89, 102, 0.25) solid;
	padding:1em 0;
}
.pidescx p{
	margin-bottom:0;
	color:var(--blue)
}

/* Product leadtime
-------------------------------------------------------*/
#pi .pidesc.desp {
	grid-area: product-leadtime;
}

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

#pi .pidesc.desp p{
	grid-area:text;
}

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

/* Bullets
-------------------------------------------------------*/
#pi .bullets {
	grid-area: product-bullets;
}

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

#pi .pilinks li {}

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

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

/* Reviews IO Widget 
------------------------------------------------------- */
#pi .main .left .reviewssmallsummary{
	display:none;
}

.reviewsiosmallsummarypanel,
.reviewssmallsummary{
	grid-area:reviews;
	text-align:right;
}


.reviewsiosmallsummarypanel:hover,
.reviewssmallsummary:hover{
	cursor:pointer;
}

.reviewssmallsummary img{
	display:none;
}

.reviewsiosmallsummarypanel .title,
.reviewssmallsummary .title{
	display:none;
	
}

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

.reviewsiosmallsummarypanel .stars img,
.reviewssmallsummary .stars img{
	display:inline-block;
	height:11px;
}

.reviewsiosmallsummarypanel .ratingNumber,
.reviewssmallsummary .ratingNumber{
	display:inline-block;
	margin-right:.5rem;
	color:var(--light-blue);
}

.reviewsiosmallsummarypanel .ratingNumber span,
.reviewssmallsummary .ratingNumber span{
	display:inline-block;
}

.reviewsiosmallsummarypanel .ratingCount,
.reviewssmallsummary .ratingCount{
	display:inline-block;
	margin-left:.5rem;
	font-size:.725rem;
}

/* reviews.io tab content 
-------------------------------------------------------*/
.reviews{
	text-align:center;
}

.reviews a.link{
	margin:auto;
	display:inline-block;
	text-align:center;
}

.reviews a.link img.btn{
	background-color:transparent;
	border:none;
}

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

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

.reviews .rating .stars img{
	display:inline-block;
}

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

.reviews .customer{
	font-weight:600;
	font-size:.825rem;
}

.reviews .date{
	color:var(--light-blue);
	font-size:.725rem;
}

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

.replies{
	margin:1rem;
	font-size:smaller;
	background-color:var(--off-white);
	padding:.5rem;
}

/* Flags (site flags like offer)
-------------------------------------------------------*/
#pi .flags {
	grid-area: product-flags;
}

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

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

/* Product flags
-------------------------------------------------------*/
#pi .left .piflags {
	grid-area: product-piflags;
	margin-top:1em;
}

#pi .left .piflags li {}

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

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

#pi .f18022400{
	display:none;
}

/* Next Day Delivery Countdown
-------------------------------------------------------*/
#pi #ordercutofftime {}
#pi #ordercutofftime img{}
#pi #ordercutofftime .countdown{}
#pi #ordercutofftime .countdown span{}
/* Product Files
-------------------------------------------------------*/
#pi .pifile {
	grid-area: product-file;
}

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

#pi .alldepts a {
	display: inline-block;
	padding: var(--spacing);
}

/* Product PDL Article - could do with a class
-------------------------------------------------------*/
#a138444800{
	grid-area:message;
	background-color:var(--off-white);
	border:1px var(--dark-grey) solid;
	border-radius:.5em;
	padding:.5em 3em ;
}

#a138444800 p{
	margin:0;
	padding:.5em;
	text-align:center;
	font-weight:500;
}

#a138444800 p + p{
	border-top:1px var(--dark-grey) dashed;
}

/* Tabbed Descriptions
-------------------------------------------------------*/
#pi .pi_tab,
#pi #pi_wrapper {
	grid-column:1/-1;
	z-index:2;
	width:926px;
	margin:4em auto;
}

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

#pi ul.pi_tabs li {
	list-style: none;
	margin: 0;
	padding: 1em;
	text-align: center;
	display:inline-block;
	background-color:var(--light-grey);
	border-top-right-radius:.5em;
	border-top-left-radius:.5em;
	margin-right:1em;
	border:1px solid var(--light-grey);
	z-index:2;
}

#pi ul.pi_tabs li.selected {
	font-weight:600;
	border:1px solid var(--dark-grey);
	border-bottom:2px solid var(--white);
	background-color:var(--white);
}

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

#pi .pi_tab_content {
	margin:auto;
	padding:3rem 2rem;
	max-height:400px;
	overflow-y:auto;
	border:1px solid var(--dark-grey);
	position:relative;
	top:-1px;
	z-index:-1;
	width:100%;
}

#pi .pi_tab_content br{
	display:none;
}
#pi .pi_tab_content ul{
	margin:0 2em;
	line-height:1.5;
}

#pi .pi_tab_content .youtube {
	margin:0;
	grid-area: product-video;
	background-color:transparent;
	align-content:center;
	align-items:center;
	border-radius:1em;
	padding:0;
}

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

#pi .pi_tab_content .youtube ul{
display:grid;
grid-template-columns:1fr 1fr;}

#pi .pi_tab_content .youtube li{
	display:block;
}

#pi .pi_tab_content .youtube iframe{
	border-radius:1em;
}

/* Recent Items
-------------------------------------------------------*/
.ritm{
	grid-column:1/-1;
}

.ritm h3{
	font-weight:600;
	font-size:24px;
	letter-spacing:-1px
}

.ritm .recent_item{
	display:grid;
	grid-template-columns:repeat(6, 1fr);
	grid-gap:1em
}

.ritm .recent_item .price,
.ritm .recent_item .prevprice{
	display:none;
}

.ritm  li{
	display:grid;
	grid-template-areas:"image"
						"title"
						"price";
	grid-template-rows:auto auto 1fr;
}

.ritm  img{
	width:100%;
	border-radius:1em;
	margin:0 !important;
}

.ritm a.txt{
	font-family:var(--heading-font);
	color:var(--dark-blue);
	font-weight:600;
	margin:.5rem 0;
	font-size:21px;
}

.ritm .price{
	align-self:end;
}
.ritm .price label{
	display:none;
}

.ritm .price h6 {
	font-family:var(--text-font);
	margin:0;
}

/* Associated Products
-------------------------------------------------------*/
#pi .pass {
	grid-column: 1/-1;
	margin-top: 1rem;
}

#pi .pass h3 {
	font-size:40px;
	text-align:center;
	margin: 4rem 0;
}

#pi .pass .price,
#pi .pass .prevprice{
	display:none;
}

/* -------------------------------------------------------------------------------------
=Super Attributes - old horrid code
------------------------------------------------------------------------------------- */	
.sacontainerpanel{}

/* attributeTypeText_Box_Free_Text_Entry 
***************************************************************/
not(.cls_superattrribute_group) .attributeTypeText_Box_Free_Text_Entry .bc .attrContainer > div{
	position:relative;
	display:grid;
	align-items:start;
	grid-template-columns:50% 50%;
	padding:.5rem 0;
}

.attributeTypeText_Box_Free_Text_Entry div span{
	line-height:1.5;
	font-size:.75em;
}

.attributeTypeText_Box_Free_Text_Entry .inputtext{
	width:100%;
	background-color:var(--grey);
}


/*attributeTypeDrop_down_list
***************************************************************/
not(.cls_superattrribute_group) .attributeTypeDrop_down_list .bc .attrContainer> div {
	position:relative;
	display:grid;
	align-items:start;
	grid-template-columns:50% 50%;
	padding:.5rem 0;
}


/* -------------------------------------------------------------------------------------
=Super Attributes 
------------------------------------------------------------------------------------- */
.cls_superattrribute.hideAttr:not(.attributeTypeDimensions){
	visibility:hidden;
	display:block;
	height:0;
	opacity:0;
	padding:0 !important;
	transform: translateY(0);
	transition: all .1s ease;
}

.sacontainerpanel{}

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

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

/*this needs a code review - be dealt with in a standard message way like add to basket popups etc */
/*currently displays if you can't make that blind - and is a different message to if you put in measurements outside of the limits, try using max width and drop of blind to demo*/
.cls_superattrribute #sa_pnl_product_not_found {
	display: none;
	z-index: 2000;
}

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


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

.attributeTypePrice_Matrix_Calculator #saten_pnl_show {}

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

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


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

.attributeTypePrice_Matrix_Calculator label{
	display:inline-block;
}

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

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

.att_X{
	grid-area:attX;
}

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

.att_Y{
	grid-area:attY;
}
.att_Y label:after{
	display:inline-block;
	font-family: var(--font-awesome);
	margin:var(--half-spacing);
	content: '\f07d';
	color:var(--green)
}
/*
.att_Y:after{
	content:'cm';
	display:inline-block;
}*/

.att_X input::-webkit-outer-spin-button,
.att_X input::-webkit-inner-spin-button,
.att_Y input::-webkit-outer-spin-button,
.att_Y input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

.att_X input[type=number],
.att_Y input[type=number]{
    -moz-appearance:textfield; /* Firefox */
}

.sa_error{
	color:var(--error-color);
	display:inline-block !important;
	vertical-align:top;
}


/*should be the measure in cm/inch/mm control - currently not displaying as there are no choices yet we still may be writing it out*/
.attributeTypePrice_Matrix_Calculator .att_measure{
	display:none;
}


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

.attributeTypePrice_Matrix_Calculator .calc_price .submit{
	display:inline-block;
	width:100%;
	padding: 1em;

	border-radius: var(--border-radius);
	text-align: center;
}
/*the widths on these are not nice - need making better !*/
.attributeTypePrice_Matrix_Calculator input.inputtext_short{
	width: 8rem;
}
.attributeTypePrice_Matrix_Calculator .calc_price .submit {}


/*NEW 2023 shutter price element - html structure needs correcting !!! */

.attributeTypePrice_Matrix_Calculator  .shuttercalc{
	/* border:1px red solid; */
	text-align:center;
	margin:0;
		text-transform:uppercase;
}

.attributeTypePrice_Matrix_Calculator  .shuttercalc .shuttercalc{
	border:1px var(--error-color) solid;
	display:block;
	margin:1em 0;
	text-align:center;
}

.attributeTypePrice_Matrix_Calculator  .shuttercalc div{
	display:inline-block;
	font-weight:500;
	padding:.25em;
}

.helplink{
	font-style:italic;
}

.helplink:hover{
		cursor:pointer;
}

/* attributeTypeDimensions 
***************************************************************/
.attributeTypeDimensions {
	position:relative;
}
.attributeTypeDimensions .attrContainer{
	display:grid;
	grid-template-columns:1fr 1fr;
	text-align:center;
}
.attributeTypeDimensions .sa_name{
	grid-column:1/-1;
	text-align:left;
	margin-bottom:1rem;
	font-weight:600;
}

.attributeTypeDimensions .width,
.attributeTypeDimensions .drop{
	display:grid;
	grid-column:1/-1;
	grid-template-columns:1fr 1fr 1fr;
	grid-gap:1rem;
}

.attributeTypeDimensions .width .sa_name,
.attributeTypeDimensions .drop .sa_name{
	display:block;
	margin:0;
	font-weight:normal;
}

.attributeTypeDimensions .width input,
.attributeTypeDimensions .drop input{
	width:100%;
}

.attributeTypeDimensions .width span,
.attributeTypeDimensions .drop span{
	display:none;
}

.cls_superattrribute.attributeTypeDimensions img[id^="help"] {}
.attributeTypeDimensions  .submit{
	grid-column:1/-1;
	display:inline-block;
	width:100%;
	padding: 1em;
	margin-bottom:1em;

	border-radius: var(--border-radius);
	text-align: center;
}


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

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

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

.attributeTypeText_Box_Free_Text_Entry div label{
	line-height:1;
}
/* end hack*/


.attributeTypeText_Box_Free_Text_Entry div span{
	line-height:1.5;
	font-size:.75em;
}

.attributeTypeText_Box_Free_Text_Entry .inputtext{
	max-width:100%;
	width:calc(100% - 3rem);
}



/*attributeTypeDrop_down_list
***************************************************************/
.attributeTypeDrop_down_list .bc .attrContainer > div {
	position:relative;
	display:grid;
	align-items:center;
	grid-template-columns:50% 50%;
	padding:.5rem 0;
}

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

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

.attributeTypeDrop_down_list select{
	margin:0;
}

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

/*attributeTypeSingle_Image_Upload 
***************************************************************/
.attributeTypeSingle_Image_Upload {
	position:relative;
}

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

/*delete image */
.attributeTypeSingle_Image_Upload .siup_triggerdel{
	position:absolute;
	bottom:1rem;
	right:1rem;
}
/*should be the file uploader*/
.attributeTypeSingle_Image_Upload input{
	grid-area:fileupload;
	padding:1rem;
}
.attributeTypeSingle_Image_Upload .progress {}
/*should be the uploaded image */
.cls_superattrribute.attributeTypeSingle_Image_Upload div[id^="siup"]{
	grid-area:image;
}

/* -------------------------------------------------------------------------------------
= popup super attriubutes
------------------------------------------------------------------------------------- */
.supattrquest{
	display:grid;
	grid-template-columns:1fr 1fr;
	align-items:center;
}

.supattrqtext{
	font-weight:600;
	font-family:var(--text-font);
}

.supattrqbtn label{
	display:inline-block;
	padding:.5em 1.5em;
	background-color:var(--grey);
	color:var(--blue);
	border-radius:2em;
	text-align:center;
	cursor:pointer;
}

.supattrqbtn input{
	-webkit-appearance: none;
}

.supattrqbtn label + input{
	margin-left:1em;
}

.supattrqbtn input:checked + label{
	background-color:var(--blue);
	color:var(--grey);
	cursor:initial;
}

.cls_superattribute_trigger{
	margin-top:1em;
	display:grid;
	grid-template-columns:1fr 1fr;
	align-items:center;
}

.cls_superattribute_trigger:before{
	content:"Add your name or message";
	grid-column:1;
	font-weight:600;
	font-family:var(--text-font);
}
.cls_superattribute_trigger .supatttrigbtn{
	grid-column:2;
	margin-right:auto;
	padding:.5em 1.5em;
	border-radius:2em;
	background-color:var(--blue);
	color:var(--grey);
	text-transform: capitalize;
	cursor: pointer;
	outline: none;
}

.popup{
	position:fixed;
	background-color:rgba(13, 7, 7,  0.25);
	width:100%;
	height:100%;
	top:0;
	left:0;
	text-align:center;
	align-content:center;
	overscroll-behavior: contain;
	z-index:9999;
}

.innerpanel{
	max-width:900px;
	padding:2em;
	margin:auto;
	display:block;
	background-color:var(--white);
	position:relative;
	border-radius:1em;
}

.innerpanel > .cls_closebtn{
	display:none
}

.controlspanel{
	margin:auto;
	display:grid;
	grid-template-columns:auto 1fr;
	grid-template-areas:"image engraving";
	grid-column-gap: 3em;
}

.controlspane .bt,
.controlspane .bb{
	display:none;
}

.grppic{
	grid-area:image;
	background-color:var(--white);
	position:relative;
}

.sapopupgrp{
	grid-area:engraving;
	text-align:left;
}

.sapopupgrp .cls_closebtn{
	color:var(--white);
	background-color:var(--blue);
	display:inline-block;
	padding:.5em 2em;
	border-radius:2em;
	cursor:pointer;
}

.sapopupgrp .attrContainer{
	margin-bottom:1em;
	position:relative;
}

.sapopupgrp .sa_name{
	display:block;
	font-family:var(--text-font);
	font-weight:500;
	letter-spacing:-.5px;
	color:var(--dark-blue);
	margin-bottom:.5rem;
}
.sapopupgrp > .sa_name{
	display:none;
}
.sapopupgrp input,
.sapopupgrp select{
	display:block;
	width:calc(100% - 2em);
	padding:1em 1.5em;
}

.sapopupgrp textarea{
	display:block;
	width:calc(100% - 2em);
	height:6em;
	border-radius:1em;
}

.sapopupgrp span{
	display:block;
	text-align:left;
	color:var(--off-white-alpha);
	font-size:small;
}

.grppic img{
	margin:0;
	max-width:403px;
	border-radius:1em;
}

.grppicovl{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	align-content:center;
}

.grppicovl[data-charband="over30"] p{
	margin:0;
	font-size:1.5em;
}

.grppicovl[data-charband="over60"] p{
	margin:0;
	font-size:.9em;
}

.grppicovl[data-charband="over90"] p{
	margin:0;
	font-size:.5em;
}

.grppicovl p{
	margin:0;
	font-size:2em;
	background-color:#666666;
	-webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
	text-shadow: rgba(245,245,245,0.5) 1px 1px 1px;
}

.fs-roman p{
	font-family:"times new roman", serif;
}

.fs-corsiva p{
	font-family:corsiva;
}
.fs-edscript p{
	font-family:edscript;
}
.fs-enscript p{
	font-family:enscript;
}
.fs-garamond p{
	font-family:adobe-garamond-pro, serif;
}
.fs-stonehenge p{
	font-family:stonehenge;
}
.fs-castellar p{
	font-family:castellar;
	text-transform:uppercase;
}
.fs-oldenglish p{
	font-family:oldenglish;
}
.fs-parkavenue p{
	font-family:parkavenue;
}

/* Tooltips
-------------------------------------- */
.helpicon {
    display:inline-block;
    position:absolute;
    top: .5rem;
    right:0;
    text-align:left;
}

.helpicon h3 {
	margin:var(--half-spacing) 0;
}

.helpicon .lefttooltip {
    min-width:100px;
    max-width:300px;
    top:50%;
    right:100%;
    margin-right:.5rem;
    transform:translate(0, -50%);
    padding:var(--half-spacing);
    color:var(--text-color);
    background-color:var(--light-grey);
    position:absolute;
    z-index:1000;
    box-sizing:border-box;
    display:none;
    border:1px solid var(--border-color);
}

.helpicon:hover .lefttooltip {
    display:block;
	line-height:1;
}

.helpicon .lefttooltip i {
    position:absolute;
    top:50%;
    left:100%;
    margin-top:-12px;
    width:12px;
    height:24px;
    overflow:hidden;
}

.helpicon .lefttooltip i::after {
    content:'';
    position:absolute;
    width:12px;
    height:12px;
    left:0;
    top:50%;
    transform:translate(-50%,-50%) rotate(-45deg);
    background-color:#FFFFE0;
    border:1px solid #DCA;
}




@media only screen and (max-width: 768px) {
	#pmid.page_buy #pm.pmfull {
		width: calc(var(--site-max-width) - 2rem);
	}

	/* Product Panels 
	------------------------------------------------------- */
	#pi .main{
		grid-template-columns:1fr;
		grid-template-areas:"top"
							"left "
							"right"
							"bottom";
	}

	#pi .main .left{
		grid-area:left;
		position:relative;
		display:grid;
		grid-template-columns:auto 1fr;
		grid-template-areas:"model reviews"
							"title title"
							"price stock"
							"gallery gallery"
							"buy-pane buy-pane"
							"message message"
							". .";

	}
	/* Product Title
	------------------------------------------------------- */
	.pititle{
		display:none;
	}
	#pi .main .left .pititle{
		display:block;
	}


	/*model 
	------------------------------------------------------- */
	.brandmanu.model{
		display:none;
	}
	#pi .main .left .brandmanu.model{
		display:block;
	}

	/* Reviews IO Widget 
	------------------------------------------------------- */
	.reviewssmallsummary{
		display:none;
	}
	#pi .main .left .reviewssmallsummary{
		display:block;
	}

	/* pricecomp
	------------------------------------------------------- */
	.pricecomp{
		display:none;
	}
	#pi .main .left .pricecomp{
		display:block;
	}

	/* Recent Items
	-------------------------------------------------------*/
	.ritm .recent_item{
		grid-template-columns:repeat(3, 1fr);
	}
	
	/* Gallery - now Swiffy
	------------------------------------------------------- */
	#pi .gallery #galleryimages{
		--swiffy-slider-item-count: 4;
		margin-top:1em;
		margin-bottom:2em;
	}

	#pi .gallery #galleryimages .video:after{
		font-size:3em;
	}

	
	/* Save For Later component
	-------------------------------------------------------*/
	#pi .main .left .sfl{
		grid-area:gallery;
	}

	/* Tabbed Descriptions
	-------------------------------------------------------*/
	#pi .pi_tab,
	#pi #pi_wrapper {
		grid-column:1/-1;
		z-index:2;
		width:100%;
		margin:2em auto;
	}

	#pi ul.pi_tabs li {
		list-style: none;
		margin: 0;
		padding: .5em 1em;
		text-align: center;
		display:inline-block;
		background-color:var(--light-grey);
		border-top-right-radius:.5em;
		border-top-left-radius:.5em;
		margin-right:.5em;
		border:1px solid var(--light-grey);
		z-index:2;
	}

	#pi .pi_tab_content {
		margin:auto;
		padding:1rem 1rem;
		max-height:400px;
		overflow-y:auto;
		border:1px solid var(--dark-grey);
		position:relative;
		top:-1px;
		z-index:-1;
		width:calc(100% - 2em);
	}

	/* -------------------------------------------------------------------------------------
	= popup super attriubutes
	------------------------------------------------------------------------------------- */
	.popup{
		position:fixed;
		background-color:rgba(13, 7, 7,  0.25);
		width:100%;

		top:0;
		left:0;
		text-align:center;
		align-content:center;
		overflow:scroll;
		overscroll-behavior: contain;
		z-index:9999;
	}
	
	.innerpanel{
		max-width:100%;
		padding:2em;
		margin:auto;
		display:block;
		background-color:var(--white);
		position:relative;
		border-radius:1em;
	}

	.grppic img{
		margin:0;
		max-width:100%;
		border-radius:1em;
	}

	.controlspanel{
		margin:auto;
		display:grid;
		grid-template-columns:1fr;
		grid-template-areas:
			"image "
			"engraving";
		grid-column-gap: 3em;
	}
}
/* ------------------------------------------------------------------------------------
	SCREEN - Basket/Checkout
	Last Updated : 17. 06. 2025
	Copyright :(c) 2025 Etail Systems Ltd
	Author : Etail Systems Ltd
------------------------------------------------------------------------------------- */

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

.hoverbskt h3 {
	display: none;
}

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

.hoverbsktadd p.descr {
	display: none;
}

.hoverbskt .lines {}

.hoverbskt .lines .item {
	display: grid;
	grid-template-columns: 2em .5rem 1fr 7ch;
	grid-template-areas: "image . title title"
						 "image . sample sample"
						 "image . quantity price";
	margin-bottom:.5rem;
}

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

.hoverbskt .lines .item picture{
	grid-area:image;
	align-self:start;
	margin:0;
}

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

.hoverbskt .lines .item p.price {
	grid-area: price;
	text-align:right;
}

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

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

.hoverbskt .lines .item p.sample {
	grid-area: sample;
	font-weight:normal;
	font-size:.725em;
	text-align: left;
}

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

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

/* -------------------------------------------------------------------------------------
=Basket - Checkout v5
------------------------------------------------------------------------------------- */
/*needs #pm as .bskt is used in the header */
#pm .bskt {
	display: grid;
	grid-template-columns: 6fr 3fr;
	grid-gap:0;
	grid-column-gap: 2em;
	grid-template-areas:"header header"
						"contents sidebar"
						"promcontents promcontents";
	align-items:start;
	margin-bottom:4rem;
}

/*no idea why this is being written out! */
#pm .bskt + h1{
	display:none;
}

/* if basket is empty and user is in it */
.bskt .empty{}
.bskt .empty .header{}
.bskt .empty .total{}



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

#pm .bskt .header .icon{
	display:none;
}

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

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

/* Basket Contents
-------------------------------------------------------------------------------------------------------------- */
#pm .bskt .contents{
	grid-area:contents;
	display:grid;
	grid-template-areas:
		"freedelivery"
		"lines"
		"subtotal";
}

/* Basket Sup Charge
------------------------------------------------------- */
.suppchg{
	grid-area:suppchg;
	text-align:left;
}

.suppchg >div{
	display:grid;
	grid-template-areas:"header header"
						"checkbox text";
	align-items:start;
}

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

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

.suppchg input{
	grid-area:checkbox;
	margin:0 1rem;
}
.suppchg .article{
	grid-area:text;
	font-size:.825rem;
}

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

.suppchg .article p:last-child{
	font-size:.725rem;
	padding:.5rem 1rem;
}

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

/*custom scrollbar */
#pm .bskt .alllines::-webkit-scrollbar {
	width: 10px;
}
#pm .bskt .alllines::-webkit-scrollbar-track {
	background: var(--off-white); 
} 
#pm .bskt .alllines::-webkit-scrollbar-thumb {
	background: var(--grey); 
}
#pm .bskt .alllines::-webkit-scrollbar-thumb:hover {
	background: var(--dark-grey); 
	cursor:grab;
}
#pm .bskt .alllines::-webkit-scrollbar-thumb:active {
	cursor:grabbing;
}

#pm .bskt .line{
	padding-bottom: var(--spacing);
	margin-bottom: var(--spacing);
	align-items: start;
	display: grid;
	--image-width:4rem;
	--description-width:1fr;
	--qty-width:auto;
	--rem-width:auto;
	--total-width:8ch;
	
	grid-template-columns: var(--image-width) var(--description-width) var(--qty-width) var(--total-width) var(--rem-width) ;
	grid-template-areas:"icon desc qty price rem"
						". desc . . ."
						". skuselect . . .";

	border-bottom:1px solid	var(--border-color);
	grid-column-gap:1rem;
}

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

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

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

#pm .bskt  .line .prodinfo .surcharge{
	font-weight:600;
}
#pm .bskt .line .prodinfo li{
	list-style:none;
	font-size:.725rem;
	color:var(--light-blue)
}

#pm .bskt .line .prodinfo li.disc{
	color:red;
}

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

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

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

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

#pm .bskt .line .prodinfo li.lead span{
	display:inline-block;
	color:var(--green);
	font-style:normal;
	border:1px var(--green) solid;
	padding:.25rem;
	border-radius:.25rem;
	margin-right:.5rem;
}
#pm .bskt .line .prodinfo li.lead span:before{
	font-family:var(--font-awesome);
	content: "\f00c";
	display: inline-block;
	font-size:1em;
	margin-right: 1em;
}

/*product quantity */
#pm .bskt .lines .line .qty{
	grid-area:qty;
	/* align-self:center; */
}
#pm .bskt .lines .line .qty form{
	line-height:1;
}
#pm .bskt .lines .line .qty label{
	display:none;
}
#pm .bskt .lines .line .qty button{
	background:var(--off-white);
	border:1px solid var(--off-white);
	padding:var(--half-spacing);
	font-family:monospace;
}

#pm .bskt .lines .line .qty button.skuqtybsktsub {
	border-right:0;
	border-top-left-radius:var(--border-radius);
	border-bottom-left-radius:var(--border-radius);
}
#pm .bskt .lines .line .qty button.skuqtybsktadd {
	border-left:0;
	border-top-right-radius:var(--border-radius);
	border-bottom-right-radius:var(--border-radius);
}
#pm .bskt .lines .line .qty input.inputtext{
	text-align:center;
	border-radius:0;
	border:0;
	font-family:monospace;
	background-color:var(--off-white);
	margin:0;
}

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

#pm .bskt .line .rem input{
	font-family:var(--font-awesome);
	color:var(--blue);
	background-color:transparent;
	border:none;
	font-weight:400;
	padding:0 .5em;
	margin:0;
}

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

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

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

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

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

/* Basket Subtotal
------------------------------------------------------- */
.prodsubtotal{
	grid-area:subtotal;
	display:grid;
	grid-template-columns:1fr 10ch;
	font-size:1.25em;
	margin-bottom:var(--spacing);
	/*why display this... we have this info in the totals area... */
	display:none;
}

.prodsubtotal label{
	text-align:left;
}
.prodsubtotal span{
	text-align:right;
}


/* Basket Prom
------------------------------------------------------- */
#pm .bskt .art{
	grid-area:promcontents;
}

/* Basket Sidebar
-------------------------------------------------------------------------------------------------------------- */
#pm .bskt .sidebar{
	grid-area:sidebar;
	background-color:var(--off-white);
	color:var(--blue);
	border-radius:1em
}

/* Basket Totals
------------------------------------------------------- */
.bskttotals{
	grid-area:totals;
	text-align:center;
	display:grid;
	padding:1rem;
}

/*added title */
.bskttotals:before{
	content:"Basket Summary";
	display:block;
	line-height:1;
	font-family:var(--text-font);
	font-size:1.5em;
	text-align:center;
	margin-bottom:.5rem;
}

.bskttotals .total{
	display:grid;
	grid-template-areas:"label total";
	font-size:1.5rem;
}

.bskttotals .total label{
	grid-area:label;
	text-align:left;
}

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

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

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

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

/* Vouchers
------------------------------------------------------- */
.vouchentryaccord{
	grid-area:voucher;
	text-align:center;
	padding:0 1rem;
}
.vouchentryaccord ul,
.vouchentry ul{
	list-style:none;
}

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

.vouchentryaccord li.pane{
	display:none;
}

#pm .bskt .vouchentryaccord .header{
	font-size:1rem;
	border:none;
	border:0;
	padding:0;
	font-size:.825rem;
	text-decoration:underline;
	grid-template-columns:1fr;
	grid-template-areas: "question";
	margin:0;
	margin-bottom:1rem;
}

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

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

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

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

.vouchentry .appliedpromovoucher{
	padding:var(--half-spacing) var(--half-spacing)
}

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

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

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

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

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

.vouchentry ul li.vouchentry input{
	width:100%;
}

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

/* Special Instructions
------------------------------------------------------- */
#bsktid .specinst{
	grid-area:specinst;
	text-align: left;
	padding:0 1rem;
}

#bsktid .specinst li{
	display:block;
}
#bsktid .specinst label{
	/* display:none; */
	font-family:var(--text-font);
	font-weight:var(--heading-font-weight);
	font-size:14px;
}

#bsktid .specinst textarea{
	width:100%;
	border-radius:1em;
	min-height:8ch;
}

#bsktid .specinst .chars{
	font-size:xx-small;
}

/* Shipping 
------------------------------------------------------- */
#bsktid .shipping {
	grid-area:shipping;
	text-align: left;
	padding:1rem;
}

#bsktid .shipping li,
#bsktid .shipping span{
	display:block;
}

#bsktid .shipping .header{
	display:none;
}

.shipzone{
	display:grid;
	grid-template-areas:"label postcode search"
						"country country country";
	align-items:center;
}

.shipzone #countryid{
	grid-area:country;
	margin-top:1em;
}

#bsktid .shipping .ship_edit{
	display:block;
	text-decoration:underline;
	cursor:pointer;
	grid-area:country;
	margin-top:1em;
}

.shipzone .submit{
	margin-left:1em;
	background-color:var(--light-blue)
}

.shipservice {
	margin-top:1em;
}

.shipservice select{
	width:100%;
	padding:.5em 1em;
}

/* Basket Payment Buttons
------------------------------------------------------- */
.bsktbuttons{
	grid-area:buttons;
	text-align:center;
}

.bsktbuttons .startcheckout{
	grid-area:pay;
	margin-bottom:1rem;
}

.bsktbuttons .startcheckout a:before{
	content:"\f023";
	font-family:var(--font-awesome);
	margin-right:1rem;
}

.bsktbuttons .startcheckoutcollect{
	grid-area:collect;
	margin-bottom:.5em;
}

.bsktbuttons .startcheckout a.btn{
	display:block;
	margin:0 1rem;
	background-color:var(--button-color);
	align-content:center;
}

.bsktbuttons .clear{
	grid-area:empty;
}

.bsktbuttons .clear a.btn{
	display:block;
	margin-top:1em;
}

.bsktbuttons .cont{
	grid-area:continue;
	display:none;
}

.bsktbuttons .cont a.btn{
	display:block;
	font-size:.825rem;
	border:2px var(--button-color) solid;
	background-color:transparent;
	color:var(--button-color);
}

/* basket confidence points - payment icons */
.bsktbuttons .art{
	grid-area:logos;
	background-color:var(--navy);
	border-radius:var(--border-radius);
	border-top-left-radius:0;
	border-top-right-radius:0;
}

.bsktbuttons .art .imgcont{
	display:inline-block;
	margin:.5rem;
}

.bsktbuttons .art .imgcont img{
	max-width:64px;
}

.bsktbuttons .art .imgcont img[alt="PayPal Pay in 3"]{
	max-width:100%;	
}

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

#pm .bskt .header.freedel span{
	font-size:inherit;
}

#pm .bskt .header.freedel .money{
	color:inherit;
	
}

/* ??????
------------------------------------------------------- */
.stddelinfo{
	grid-area:standarddelivery;
}

.priordelinfo{
	grid-area:prioritydelivery;
}

.priordelinfo,
.stddelinfo{
	display:grid;
	border-radius:var(--border-radius);
	background-color:var(--off-white);
	padding:var(--spacing);
	margin-bottom:1rem;
	grid-template-areas:"icon message price"
						"icon details .";
	grid-template-columns:4rem 1fr 5rem;
	grid-column-gap:2rem;
}

.priordelinfo img,
.stddelinfo img{
	grid-area:icon;
}

.priordelinfo h4,
.stddelinfo h4{
	grid-area:message;
		margin:0;
}

.priordelinfo h5,
.stddelinfo h5{
	grid-area:details;
	margin:0;
	font-family:var(--text-font);
	font-weight:400;
	font-size:.825rem
}

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

.ordertimer {
	font-size:.825rem;
}

#pm .bskt .art .returns{
	display:grid;
	grid-template-areas:"icon message ."
	"icon details . ";
	grid-template-columns:4rem 1fr auto;
	grid-column-gap:2rem;
	align-items:center;
}

#pm .bskt .art .returns img{
	grid-area:icon;
}
#pm .bskt .art .returns h4{
	grid-area:message;
	margin:0;
}
#pm .bskt .art .returns h5{
	grid-area:details;
	margin:0;
	font-family:var(--text-font);
	font-weight:400;
	font-size:.825rem
}


/* -------------------------------------------------------------------------------------
=New 2025 Checkout Process
------------------------------------------------------------------------------------- */
.chkflow #pt{
	--spacerwidth: calc((100% - var(--site-max-width)) / 2 );
	--logowidth:200px;
	padding:1em 0;
	display:grid;
	grid-template-columns:var(--spacerwidth) var(--logowidth) 1fr var(--logowidth) var(--spacerwidth);
	grid-template-areas:
		". logo breadcrumb secure .";
}

.chkflow #pt .logolge{
	grid-area:logo;
}
.chkflow #pt .logosecure{
	grid-area:secure;
}

.chkflow #pmid{
	background-color:var(--off-white);
	padding:1em 0;
}

.chkflow .pmfull{
	width:calc(var(--site-max-width) - 2em);
	max-width:var(--checkout-process-width);
	background:none;
	margin:auto;
}

/* summary info */
.chkflow .suminfo{
	background-color:var(--white);
	padding:1em;
	margin-bottom:2em;
}
.chkflow .suminfo li{
	display:block;
}

.chkflow .suminfo li.info:before{
	content:'';
	margin:0;
}
.chkflow .suminfo li.info{
	padding:0;
	margin:0;
	color:var(--text-color);
	font-size:.825em;
}

.chkflow .suminfo .title{
	font-family:var(--heading-font);
	font-weight:var(--heading-font-weight);
	margin-bottom:1em;
}
.chkflow .suminfo .header{}

.chkflow .suminfo label,
.chkflow .suminfo span{
	display:block;
}
.chkflow .suminfo span,
.chkflow .suminfo .address{
	margin-bottom:1rem;
}

.chkflow .suminfo label{
	font-size:1rem;
}

.chkflow .suminfo .address{
	font-size:.825em;
	margin-bottom:1rem;
}

/* Signin/guest pane
------------------------------------------------------- */

.chkflow .signin{
	background-color:var(--white);
	padding:1em;
	margin-bottom:2em;
}

.chkflow .signin li{
	display:block;
	margin-bottom:.5rem;
}

.chkflow .psign .bt,
.chkflow .pguest .bt{
	border:2px solid var(--border-color);
	padding:1rem .5rem;
	display:grid;
	grid-template-areas:
		"radio info"
		"radio message";
	grid-column-gap:.5em;
	grid-template-columns:2em 1fr;
	align-items:center;
}

.chkflow .psign .bt input,
.chkflow .pguest .bt input{
	grid-area:radio;
}
.chkflow .psign .bt h3,
.chkflow .pguest .bt h3{
	grid-area:info;
	margin:0;
}

.chkflow .psign .bt p.info,
.chkflow .pguest .bt p.info{
	grid-area:message;
	margin:0;
	font-size:.8em;
}

/* Existing Customer fields 
---------------------------*/
.chkflow .psign{
	margin-bottom:1em;
}

.chkflow .psign .exstcust{
	padding:0 1em;
}

.chkflow .psign label{}

.chkflow .psign img,
.chkflow .psign .exstcust .exstreqfield{
	display:none;
}

.chkflow .psign .inputtext,
.chkflow .psign .submit{
	width:100%;
}

.chkflow .psign input.submit{
	width:initial;
	background-color:transparent;
}

.chkflow .psign li.info{}

.chkflow .psign li.info:before{
	content:'';
	margin:0;
}

.chkflow .psign .subscribe{
	font-size:.8em;
	margin:.5rem 0;
}
.chkflow .psign .subscribe input{}

.chkflow .psign .subscribe label{
	display:inline;	
	margin-left:.5rem;
}

.exstfgtpwd{
	text-decoration:underline;
	font-size:.825em;
}

/* guest checkout fields 
---------------------------*/
.chkflow .pguest{}

.chkflow .pguest .signinguest{
	padding:0 1em;
	margin-top:1em;
}

.chkflow .pguest label{}
.chkflow .pguest label img{
	display:none;
}

.chkflow .pguest .inputtext,
.chkflow .pguest .submit{
	width:100%;
}

.chkflow .pguest li.info{
	color:var(--text-color);
	font-size:.725em;
	margin:.5rem 0;
}

.chkflow .pguest li.info:before{
	content:'';
	margin:0;
}

.chkflow .pguest .subscribe{
	font-size:.8em;
	margin:.5rem 0;
}
.chkflow .pguest .subscribe input{}

.chkflow .pguest .subscribe label{
	display:inline;	
	margin-left:.5rem;
}

/* Basket Summary
------------------------------------------------------- */
.chkflow .bsktsummary{
	background-color:var(--white);
	padding:1em;
	margin-bottom:2em;
	display:grid;
	grid-template-areas:"items expand"
	"total expand";
	grid-template-columns:1fr 2em;
}

.chkflow .bsktsummary #bsktitems,
.chkflow .bsktsummary #bsktvalue{
	margin:0;
	font-size:small;
}

.chkflow .bsktsummary #bsktitems span,
.chkflow .bsktsummary #bsktvalue span{
	font-weight:bold;
	margin-right:.5rem;
	width:5ch;
}

.chkflow .bsktsummary img{
	grid-area:expand;
}

.chkflow .bsktsummary img.btn{
	display:none;
}

.chkflow .bsktsummary .showhide{
	display:none;
	cursor:pointer;
}

.chkflow .bsktsummary .showshow{
	cursor:pointer;
}

.chkflow .hoverbskt {
	border-radius:0;
	padding: var(--spacing);
	width: calc(100% - 2em);
	max-height:125px;
	overflow-y:auto;
	z-index: 999999;
	text-align: center;
	
	-webkit-box-shadow:none;
	-moz-box-shadow: none;
	box-shadow: none;
	background-color: var(--grey);

	position:absolute;
	margin-top:-2em;
	border-bottom-right-radius:1em;
	border-bottom-left-radius:1em;
	border:1px solid var(--grey);
	border-top:0;
}

/* delivery Address pane
------------------------------------------------------- */
.chkflow #pdelivery{
	padding:1em;
}

.chkflow #pdelivery .inputtext{
	width:100%;
}

.chkflow #pdelivery .chkbox label{
	display:inline;
	font-size:.825rem
}
.chkflow #pdelivery .chkbox input{
	display:inline;
	margin:0;
	margin-right:.5rem;
}

.chkflow #pdelivery .remove{
	font-size:.825em;
	margin-bottom:1rem;
}



/* Invoice Address pane
------------------------------------------------------- */
.chkflow #pchkout{
	padding:1em;
}

.chkflow #pchkout .inputtext{
	width:100%;
}

.chkflow #pchkout .chkbox label{
	display:inline;
	font-size:.825rem
}
.chkflow #pchkout .chkbox input{
	display:inline;
	margin:0;
	margin-right:.5rem;
}





/* Postcode Lookup
------------------------------------------------------- */
.pclup,
.pclupdel
{
	display:grid;
	grid-template-columns: auto  auto 1fr;
	grid-column-gap:1em;
	grid-template-areas:
		"title title title"
		"postcode locate ."
		"manual manual manual"
		"address address addres";
	align-items:center;
}

.pclup label,
.pclupdel label{
	grid-area:title;
}


#pclupManualAddressDel,
#pclupManualAddress{
	grid-area:manual;
	text-decoration:underline;
	cursor:pointer;
}

#txtPostCodeLookup{
	grid-area:postcode;
}

#btnPostCodeLookup{
	grid-area:locate;
}


span.or{
	grid-area:change;
	text-align:right;
	display:none;
}

#pnlMultiAddressOption,
#pnlMultiAddressOptionDel{
		grid-area:address;
}

#ddlMultiAddress,
#ddlMultiAddressDel{

	background-image:none;
	padding:.5em;
	width:100%;
}


.pclup input,

.pclupdel input{
	width: auto;
	display: block;
	margin:0;
	margin-bottom:0;
}


/* delivery service options
------------------------------------------------------- */

.chkflow .service{
	background-color:var(--white);
	padding:1em;
	/* margin-bottom:2em; */
}

.serviceoption{
	border:2px solid var(--border-color);
	padding:1em;
	display:grid;
	grid-template-areas: "radio info price"
	"radio desc price";
	grid-column-gap:.5em;
	grid-template-columns:2em 1fr auto;
	margin-bottom:1rem;
	align-items:center;
}

.serviceoption:last-of-type{
	margin-bottom:0;
}

.serviceoption input{
	grid-area:radio
}

.serviceoption label{
	grid-area:info;
	font-family:var(--heading-font);
	font-weight:var(--heading-font-weight);
	font-size:1.25em;
}
.serviceoption h3{
	grid-area:price;
	margin:0;
}

.serviceoption p{
	grid-area:desc;
	font-size:.825em;
	margin:0;
}


.chkflow .service +form,
.delinst{
	background-color:var(--white);
	padding:1em;
}

.chkflow .service +form li,
.delinst li{
	display:block;
}

.chkflow .service +form li label,
.delinst li label{
	display:block;
}

.chkflow .service +form li textarea,
.delinst li textarea{
	width:100%;
	height:8em;
}

.delinst li.chars{
	font-size:small;
}

.shippinginfo,
.deliveryinfo{
	background-color:var(--white);
	padding:1em;
}





/* Payment
------------------------------------------------------- */
.page_payment{}

.termsagreemsg{
	margin-bottom:1em;
	text-align:center;
}

.termsart{
	margin-bottom:1em;
	text-align:center;
}

.termsmsgcontainer{
}
.payopts{
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-gap:1em;
}

.payopts .sagepay,
.payopts .sagepay .btn{
	border-radius:.5em;
	padding: 0px;
	margin:0;
	display:block;
}

.payopts .sagepay .btn{
	padding: 6px;
}

.payopts .paypal,
.payopts .paypal .btn{
	background:none;
	padding:0;
	border:0;
	border-radius:0;
}

/* Continue Checkout Process
------------------------------------------------------- */
.page_delivery .contbtn,
.page_checkout .contbtn{}

.forinvoice{}
.page_delivery .forinvoice .chkbox label{}
.page_delivery .contbtn input,
.page_checkout .contbtn input{
	margin-top:2em;
	width:100%;
}

/* -------------------------------------------------------------------------------------
=ConfirmationPage 
------------------------------------------------------------------------------------- */
.page_confirmation{}

.page_confirmation li {
	list-style: none;
}

.page_confirmation .header{
	font-size:1.5em;
}

.page_confirmation .subhead{
	font-size:1.25em;
	margin-bottom:1rem;
}

.page_confirmation .header{
	display:block;
	font-family:var(--heading-font);
	font-weight:var(--heading-font-weight);
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: left;
	margin-bottom:2rem;
}

.page_confirmation .subhead{
	display:block;

	font-family:var(--heading-font);
	font-weight:var(--heading-font-weight);
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: left;
	margin-bottom:2rem;
}

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

.page_confirmation .info li{
	margin-bottom:1rem;
}

.page_confirmation .info li.subhead:before,
.page_confirmation .info li.subhead:after{
	content:'';
	display:none;
}





/* Basket Line items
------------------------------------------------------- */
.page_confirmation .conf .order {}

.page_confirmation .conf .order .line {
	display: grid;
	grid-gap: .5em;
	grid-template-columns: 64px 1fr auto 100px;
	grid-template-areas: "icon desc qty price";
	padding: 1em;
	align-self: center;
	align-items: start;
}

/* Image */
.page_confirmation .conf .order .line a.img {}

/* Product title*/
.page_confirmation .conf .order .line .descr {
	align-self: start;
	font-size: 1rem;
	font-family:var(--heading-font);
	font-weight: var(--heading-font-weight);
}

.page_confirmation .conf .order .line .price {
	text-align: right;
	font-family:var(--heading-font);
	font-weight: var(--heading-font-weight);
	align-self: start;
}

/* Basket Subtotal
------------------------------------------------------- */
.page_confirmation .conf .order .subtotal {
	padding: 1em;
	border-top: 1px var(--border-color) solid;
	text-align: right;
}

.page_confirmation .conf .order .subtotal label {
	margin-right: 1em;
}

.page_confirmation .conf .order .subtotal span {
	font-size: 1.2em;
	font-family:var(--heading-font);
	font-weight: var(--heading-font-weight);
}

.page_confirmation .conf .order .address {
	text-align: left;
	margin-bottom:4rem;
}

/* Post order customer registration panel
------------------------------------------------------- */
.page_confirmation .conf .ordreg {
	background-color: #ffffff;
	padding: 1em;
	margin: 1em 0;
}

#registrationform{
	background-color:var(--grey);
	border-radius:1em;
	padding:2em 4em
}
#registrationform label {
	display:block;
}

#registrationform label img{
	display:inline;
}

.page_confirmation .conf .ordreg input {
	margin: .5em 0;
}

.page_confirmation .conf .ordreg .info {
	margin: .5em 0;
	text-align:left;
}

.page_confirmation .conf .ordreg .help {
	font-size: .725em;
	padding: 1em 0
}

.success .form li {}
/* ------------------------------------------------------------------------------------
	SCREEN - Extra extra large devices (large laptops and desktops, 1400px and up)
	Last Updated : 07. 10. 2024
	Copyright :(c) 2023 Etail Systems Ltd
	Author : Etail Systems Ltd
------------------------------------------------------------------------------------- */
@media only screen and (min-width: 1480px) {
	:root{
		--menu-max-width:1400px;
	}

}

@media only screen  and (max-width:1480px) {
	:root{
		--menu-max-width:1300px;
		--site-max-width:calc(100% - 2em);
	}

	/* full width panel 
	------------------------------------------------------- */
	.pmfull {
	}
}
/* ------------------------------------------------------------------------------------
	SCREEN - Extra large devices (large laptops and desktops, 1200px and up) 
	Last Updated : 07. 10. 2024
	Copyright :(c) 2023 Etail Systems Ltd
	Author : Etail Systems Ltd
------------------------------------------------------------------------------------- */
@media only screen and (min-width: 992px) and (max-width:1399px) {
	:root{
		--site-max-width:calc(100% - 2em)
	 }

	/* -------------------------------------------------------------------------------------
	=Grid Layout
	------------------------------------------------------------------------------------- */
	.fullWidth {
		grid-column: 1/-1;
	}
	
	.titleArticle{
		grid-column:1/-1;
		text-align:center;
	}
	
	.halfWidth{
		grid-column: 1/-1;
		
	}
	
	.halfWidthDbl {
		grid-column: auto / span 6;
		grid-row: span 1;
		grid-column: 1/-1
	}
	
	.quarterWidth {
	
	}
	
	.thirdWidth {
		grid-column: 1/-1
	}
	
	.twoThirdWidth {
		grid-column: 1/-1;
	}

	.textImage{
		display:grid;
		grid-template-columns:1fr minmax(auto,40%);
		grid-gap:0em;
		align-items:center;
	}
	
	.textImage .artp{
		grid-area:text;
		text-align:left;
		padding:1em;
	}

	/* Headers
	------------------------------------------------------- */
	.plainHeader{
		grid-column:1/-1;
		margin:1em 0;
	}
	
	.plainHeader h2{
		/* text-align:left; */
		font-size: 32px;
		/* margin:0 .5em; */
	}
	
	.deptHeader h2{
		text-align:center;
		font-size:61px;
	}

	.headerImg{
		grid-template-areas:
			"title"
			"image"
			"text ";
		grid-template-columns: 1fr;
		align-items:center;
		padding:0em;
		padding-left:0em;
	}
	
	.headerImg h2,
	.deptHeaderImg h2{
		font-size: 32px;
		padding:1rem;
	}
	
	.headerImg .artp,
	.deptHeaderImg .artp{
		padding:1rem;
	}
	.headerImg .imgcont,
	.deptHeaderImg .imgcont{
		grid-area:image;
		padding:0 3em;
	}
	
	.headerImg .imgcont img{
		border-radius:1em;
		width:100%;
		aspect-ratio:654/403;
		object-fit:cover;
		border-bottom-left-radius:0;
		border-bottom-right-radius:0;
	}
	
	
	/* Category Links
	------------------------------------------------------- */
	.categoryLink{
		grid-column: auto / span 6;
		padding-bottom:2em;
		padding:1em;
		grid-template-areas:
			"title"
			"text"
			"image";
		grid-template-columns:1fr;
	}
	.categoryLinkLrg{
		grid-column: auto / span 6;
		border-radius:1em;
		background-color:var(--off-white);
		padding: 1em;
		padding-bottom:0;
		display:grid;
		grid-template-areas:
			"image"
			"title"
			"text";
	}
	
	.categoryLink ul,
	.categoryLinkLrg ul{
		display:inline-block;
		margin-bottom:1em;
	}
	.categoryLink li,
	.categoryLinkLrg li{
		display:inline-block;
	}
	
	.categoryLink h2,
	.categoryLinkLrg h2{
		grid-area:title;
		align-self:end;
		margin:0;
		font-size:36px;
	}
	.categoryLink .artp,
	.categoryLinkLrg .artp{
		grid-area:text;
		align-self:start;
		text-align:left;
		color:var(--off-white-alpha)
	}
	
	.categoryLink small,
	.categoryLinkLrg small{
		display:block;
		padding-top:.5em;
		border-top: 1px var(--off-white-alpha) dashed;
	}
	.categoryLink .imgcont,
	.categoryLinkLrg .imgcont{
		grid-area:image;
		align-self:start;
	}
	
	.categoryLink .imgcont img,
	.categoryLinkLrg .imgcont img{
		border-radius:1em;
	}
	
	/* responsive iframe - used in articles*/
	.responsive-iframe {
		width: calc(100% - 2em);
		margin: 1em;
		display: inline-block;
		vertical-align: top;
		margin-top: 2em;
	}
	
	.responsive-iframe .artp,
	.responsive-iframe {
		position: relative;
		overflow: hidden;
		padding-top: 56.25%;
	}
	
	.responsive-iframe iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}
	
	/* Swiffy Sliders
	------------------------------------------------------- */
	/*dept sliders */
	.slider-product{
	    --swiffy-slider-item-count: 5;
	}
	
	/*dept sliders */
	.slider-dept{
	    --swiffy-slider-item-count: 5;
	    --swiffy-slider-nav-light: #fff;
	}
	.slider-dept-alt{
	    --swiffy-slider-item-count: 10;
	}
	
	/*Featured sliders */
	.slider-featured{
	    --swiffy-slider-item-count: 5;
	}
	
	/*cta slider */
	.slider-cta{
	    --swiffy-slider-item-count: 3;
	}
	
	.slider-trustedby{
	    --swiffy-slider-item-count: 4;
	}

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

	/* -------------------------------------------------------------------------------------
	=Client Specific Stylings 
	------------------------------------------------------------------------------------- */
	/* home page
	------------------------------------------------------- */
	#prom-1529118719{}
	
	
	/* HP Static 
	------------------------------------------------------- */
	#p46137353{
		max-width:var(--site-max-width);
		margin:auto;
	}
	
	#p46137353 .imgcont{
		position:relative;
		margin-right:1em;
	}
	#p46137353 picture:before	{
		content:'';
		display:block;
		height:100%;
		width:100%;
		background:url('https://s3-eu-west-1.amazonaws.com/wentworthpewtercom/i/art/hpimageoverlay.webp') no-repeat left;
		z-index:1;
		position:absolute;
		left:0;
		top:0;
	}
	#p46137353 picture img{
		z-index:-2;
	}
	
	#p46137353 h2,
	#p46137353 h3{
		font-size:40px;
		line-height:1;
		position:relative;
		z-index:1;
	}
	#p46137353 li,
	#p46137353 a.btn{
		display:block;
	}

	#p46137353 small{
		display:block;
		text-align:center;
	}

	/* HP Trusted by 
	------------------------------------------------------- */
	#a138510341{
		display:grid;
		grid-template-areas:"title"
			"logos";
		align-items:center;
		border-bottom:1px solid var(--light-blue-alpha);
		padding-bottom:2em;
	}
	
	#a138510341 h2{
		text-align:center;
		font-weight:normal;
		color:var(--light-blue);
		font-size:20px;
	}
	
	#a138510341 .slidecont picture,
	#a138510341 .slidecont{
		align-content:center;
		align-items:center;
		height:100%;
	}
	
	#a138510341 .slider-indicators{
		display:none;
	}

	/* HP Rooted in Sheffield
	------------------------------------------------------- */
	#a138575878.headerImg{
		display:grid;
		grid-template-columns:minmax(auto,654px) minmax(auto,40%);
		align-items:center;
		grid-column-gap:2em;
		padding:1em;
		border-top-right-radius:1em;
		border-top-left-radius:1em;
		background-color:var(--off-white);
	}
	#a138575878.headerImg h2{
		padding:0;
	}

	#a138575878.headerImg .artp{
		padding:0;
	}

}

@media only screen and (min-width: 992px) and (max-width:1180px) {
	#p52559873 ul,
	#p52559873 ul{
		grid-template-columns: auto auto;
		grid-template-areas:"favourites account";
	}
	#p52559873 li.tel{
		display:none;
	}
}
/* ------------------------------------------------------------------------------------
	SCREEN - Tablet devices (landscape tablets, 768px and up) 
	Last Updated : 17. 06. 2025
	Copyright :(c) 2025 Etail Systems Ltd
	Author : Etail Systems Ltd
------------------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 992px)  {	
	/* -------------------------------------------------------------------------------------	
	=Definitions
	------------------------------------------------------------------------------------- */
	:root{
		--site-max-width:100%;
		--site-inner-width:calc(100% - 6em);
		/* font-sizes */
		--heading-spacing:0;
		--sub-heading-spacing:0;
		--text-size:16px;
	}

	/* -------------------------------------------------------------------------------------
	=Typography 
	------------------------------------------------------------------------------------- */
	/* Defaults
	------------------------------------------------------- */
	h1, h2, h3, h4{
		text-align:left;
	}


	/* -------------------------------------------------------------------------------------
	=Grid Layout
	------------------------------------------------------------------------------------- */
	.fullWidth {
		grid-column: 1/-1;
	}
	
	.titleArticle{
		grid-column:1/-1;
		text-align:center;
	}
	
	.halfWidth{
		grid-column: 1/-1;
		
	}
	
	.halfWidthDbl {
		grid-column: auto / span 6;
		grid-row: span 1;
		grid-column: 1/-1
	}
	
	.quarterWidth {
	
	}
	
	.thirdWidth {
		grid-column: 1/-1
	}
	
	.twoThirdWidth {
		grid-column: 1/-1;
	}

	.textImage{
		display:grid;
		grid-template-columns:1fr minmax(auto,40%);
		grid-gap:0em;
		align-items:center;
	}
	
	.textImage .artp{
		grid-area:text;
		text-align:left;
		padding:1em;
	}

	/* Headers
	------------------------------------------------------- */
	.plainHeader{
		grid-column:1/-1;
		margin:1em 0;
	}
	
	.plainHeader h2{
		/* text-align:left; */
		font-size: 32px;
		/* margin:0 .5em; */
	}
	
	.deptHeader h2{
		text-align:center;
		font-size:61px;
	}

	.headerImg,
	.deptHeaderImg{
		grid-template-areas:
			"title"
			"image"
			"text ";
		grid-template-columns: 1fr;
		align-items:center;
		padding:0em;
		padding-left:0em;
	}
	
	.headerImg h2,
	.deptHeaderImg h2{
		font-size: 32px;
		padding:1rem;
	}
	
	.headerImg .artp,
	.deptHeaderImg .artp{
		padding:1rem;
	}
	.headerImg .imgcont,
	.deptHeaderImg .imgcont{
		grid-area:image;
		padding:0 3em;
	}
	
	.headerImg .imgcont img,
	.deptHeaderImg .imgcont img{
		border-radius:1em;
		width:100%;
		aspect-ratio:654/403;
		object-fit:cover;
		border-bottom-left-radius:0;
		border-bottom-right-radius:0;
	}
	
	
	/* Category Links
	------------------------------------------------------- */
	.categoryLink{
		grid-column: auto / span 6;
		padding-bottom:2em;
		padding:1em;
		grid-template-areas:
			"title"
			"text"
			"image";
		grid-template-columns:1fr;
	}
	.categoryLinkLrg{
		grid-column: auto / span 6;
		border-radius:1em;
		background-color:var(--off-white);
		padding: 1em;
		padding-bottom:0;
		display:grid;
		grid-template-areas:
			"image"
			"title"
			"text";
	}
	
	.categoryLink ul,
	.categoryLinkLrg ul{
		display:inline-block;
		margin-bottom:1em;
	}
	.categoryLink li,
	.categoryLinkLrg li{
		display:inline-block;
	}
	
	.categoryLink h2,
	.categoryLinkLrg h2{
		grid-area:title;
		align-self:end;
		margin:0;
		font-size:36px;
	}
	.categoryLink .artp,
	.categoryLinkLrg .artp{
		grid-area:text;
		align-self:start;
		text-align:left;
		color:var(--off-white-alpha)
	}
	
	.categoryLink small,
	.categoryLinkLrg small{
		display:block;
		padding-top:.5em;
		border-top: 1px var(--off-white-alpha) dashed;
	}
	.categoryLink .imgcont,
	.categoryLinkLrg .imgcont{
		grid-area:image;
		align-self:start;
	}
	
	.categoryLink .imgcont img,
	.categoryLinkLrg .imgcont img{
		border-radius:1em;
	}
	
	/* responsive iframe - used in articles*/
	.responsive-iframe {
		width: calc(100% - 2em);
		margin: 1em;
		display: inline-block;
		vertical-align: top;
		margin-top: 2em;
	}
	
	.responsive-iframe .artp,
	.responsive-iframe {
		position: relative;
		overflow: hidden;
		padding-top: 56.25%;
	}
	
	.responsive-iframe iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}
	
	/* Swiffy Sliders
	------------------------------------------------------- */
	/*dept sliders */
	.slider-product{
	    --swiffy-slider-item-count: 5;
	}
	
	/*dept sliders */
	.slider-dept{
	    --swiffy-slider-item-count: 5;
	    --swiffy-slider-nav-light: #fff;
	}
	.slider-dept-alt{
	    --swiffy-slider-item-count: 10;
	}
	
	/*Featured sliders */
	.slider-featured{
	    --swiffy-slider-item-count: 5;
	}
	
	/*cta slider */
	.slider-cta{
	    --swiffy-slider-item-count: 3;
	}
	
	.slider-trustedby{
	    --swiffy-slider-item-count: 4;
	}

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

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

	
	/* -------------------------------------------------------------------------------------
	=FIXEDTop Panel #ptf
	------------------------------------------------------------------------------------- */
	#ptf{}

	/* -------------------------------------------------------------------------------------
	=Top Panel #pt
	------------------------------------------------------------------------------------- */

	#pt{
		border-bottom-right-radius:.5em;
		border-bottom-left-radius:.5em;
	}
	#pt .ext {
		grid-template-areas:
			"logo logo logo logo"
			"nav-start  searchtoggle icons basket  "
			"search  search search search "
			"nav nav  nav nav ";
		grid-template-columns:1fr 1fr 2fr 1fr;
		align-items: center;
		padding:0 .5em;
		width:calc(100% - 1em);
		border-bottom-right-radius:.5em;
		border-bottom-left-radius:.5em;
	}

	/* logo
	------------------------------------------------------- */
	#a138936322 {
		grid-area: logo;
		padding: 1.5em 1em;
	}
	#a138936322 svg{
		max-height:52px;
	}

	/* icons
	------------------------------------------------------- */
	#p52559873{
		grid-area:icons;
		margin-right:0em;
	}
	#p52559873 ul,
	#p52559873 ul{
		display:grid;
		grid-template-columns: auto auto;
		align-items:center;
		grid-template-areas:"tel favourites ";
		grid-gap:1em;
	}
	#p52559873 li.tel{
		display:none;
	}
	#p52559873 img{
		max-height:24px;
		width:auto;
	}
	#p52559873 li.wish{
		display:block;
		margin:auto;
		background-color:transparent;
		border-radius:2em;
		padding:0em;
	}
	
	#p52559873 li.sin,
	#p52559873 li.acct{
		display:block;
		margin:auto;
		background-color:transparent;
		border-radius:2em;
		padding:0em;
	}

	/* search
	------------------------------------------------------- */
	#pt .icon.srch{
		grid-area:searchtoggle;
	}
	/* mikes hack of a search toggle */
	#a138805250{
		display:block;
		grid-area:searchtoggle;
		text-align:center;
	}

	#a138805250 button{
		background-color:transparent;
		border:0;
		outline:0;
		color:var(--blue);
		font-size: 19px;
		margin-top:2px;
	}
	
	#pt .search.toggleSearch {
		grid-area: search;
		visibility:visible;
		height:auto;
		/* margin:1em; */
	}
	
	#pt .search {
		grid-area: search;
		margin-bottom:5px;
		text-align: center;
		font-size: 13px;
		border:1px solid var(--dark-blue);
		border-radius:3em;
		padding: 2px 4px;
		margin: 0;
		visibility:hidden;
		height:0;
	}
	#pt .search:before{
		content:'';
		display:block;
		position: relative;
		top:-1.5em;
		height:1px;
		background-color:var(--dark-blue);
	}

	#pt .search form {
		width:calc(100% - 0px);
		display:grid;
		grid-template-areas:"search button";
		grid-template-columns: 1fr 40px;
	}

	#pt .search input#searchbox {
		margin: auto 0;
		background-color:transparent;
		color:var(--black);
		font-size:13px;
		border:none;
		width:calc(100% - 0px);
		height:100%;
	}

	/*could do with some way of nicely seeing font awesome icons in coms */
	#pt .search input#search {
		margin: 0;
		padding:0;
		border:none;
		border-radius:0;
		background-color:transparent;
		width: 40px;
		font-family: var(--font-awesome);
	}

	/* basket
	------------------------------------------------------- */
	#mybskt a.btn img{
		max-height:24px;
	}

	#mybskt{
		grid-area: basket;
		position:relative;
		display:block;
		margin:auto;
		background-color:transparent;
		border-radius:0em;
		padding: 0em 1em;
	}

	#mybskt a.btn{
		position:relative;
		display:block;
		margin:auto;
		background-color:transparent;
		border-radius:0em;
		padding: 0;
		border:none;
	}

	/* -------------------------------------------------------------------------------------
	=Center Panel #pc
	------------------------------------------------------------------------------------- */
	#pc{
		background-color:white;
	}

	#a138313729 li{
		border-right:none;
	}

	/* -------------------------------------------------------------------------------------
	=Left Panel #pl
	------------------------------------------------------------------------------------- */
	#pl {
		width: calc(var(--site-max-width) - 2rem);
		margin:0 1rem;
	}

	/* -------------------------------------------------------------------------------------
	=Right Panel #pr
	------------------------------------------------------------------------------------- */
	#pr {
		width: calc(var(--site-max-width) - 2rem);
		margin:0 1rem;
	}

	/* -------------------------------------------------------------------------------------
	=Main Panel #pmid
	------------------------------------------------------------------------------------- */
	#pmid{}
	
	.pmfull,
	.pmstd{
		width: calc(var(--site-max-width) - 2rem);
		margin:0 1rem;
	}

	.pmwide{
		width: calc(var(--site-max-width) - 2rem);
		margin:0 1rem;
	}
	
	#sr {
		grid-template-columns: repeat(2, 1fr);
		grid-row-gap:2rem;
	}

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

	/* -------------------------------------------------------------------------------------
	=Subdepartment tree  
	------------------------------------------------------------------------------------- */
	.depttree ul{
		display:grid;
		grid-template-columns:repeat(2, 1fr);
		grid-gap: 1rem;
	}

	/* -------------------------------------------------------------------------------------
	=FeaturedProducts 
	------------------------------------------------------------------------------------- */
	
	/* title
	------------------------------------------------------- */
	.fprd .fprdtitle,
	.fprd a.title{
		grid-area: title;
		font-family:var(--heading-font);
		font-size:20px;
		font-weight:600;
		margin-top:.5rem;
	}



	/* fprd adverts
	------------------------------------------------------- */
	.fprd.add{
		display:block;
		position:relative;
	}
	
	.fprd.add .bnr{
		width: 100%;
		height:100%;
		object-fit: cover;
		color:var(--white);
	}
	
	.fprd.add .bnr picture,
	.fprd.add .bnr img{
		width: 100%;
		height:100%;
		object-fit: cover;
		border-radius:1em;
	}
	
	.fprd.add .toi{
		position:absolute;
		top:1em;
		padding:1em;
	}
	.fprd.add h3{
		--heading-color:var(--white);
		font-size:24px;
		position:relative;
		z-index:1;
		margin-bottom:2rem;
	}
	.fprd.add h3:before{
		content:'';
		width:100%;
		height:38px;
		background:url('https://s3-eu-west-1.amazonaws.com/wentworthpewtercom/i/art/bg2.png') no-repeat left bottom;
		background-size:75%;
		opacity:.5;
		display:block;
		position:absolute;
		bottom:0;
		z-index:-1;
	}

	/* -------------------------------------------------------------------------------------
	=Footer Panel #pf
	------------------------------------------------------------------------------------- */
	#pf{}

	#pf .ext {}

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

	#pb .ext {
		--spacer-width:1rem;
		grid-template-areas:". logo ."
			". customerservices ."
			". productinfo . " 
			". contact .";
		grid-row-gap:2rem;
		grid-template-columns: var(--spacer-width) 1fr var(--spacer-width);
		padding-top:3em;
		border-top-right-radius:1.5em;
		border-top-left-radius:1.5em;
	}
	#pb .ext img{
			margin:0;
	}

	#p52822016{
		grid-area:logo;
	}

	#p52822016 img{
		max-width:160px;
	}

	/* -------------------------------------------------------------------------------------
	=FIXEDBottom Panel #pbf
	------------------------------------------------------------------------------------- */
	#pbf .ext {
		grid-template-areas:"links"
							"copyright";
		grid-template-columns: 1fr;
		border-top:none;
		padding:0;
		margin:0 1em;
	}

	#a138313730{
		grid-area:links;
		text-align:center;
	}

	.etailcopy{
		grid-area:copyright;
		text-align:left;
		padding-top:1em;
		margin-top:1em;
		border-top:1px solid var(--light-blue);
	}
	.etailcopy p{
		display:block;
		margin:0;
	}


	/* -------------------------------------------------------------------------------------
	=Sitemap 
	------------------------------------------------------------------------------------- */
	#pm .smap ul {
		list-style-position: inside;
		list-style: none;
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	}
	/* -------------------------------------------------------------------------------------
	=Client Specific Stylings 
	------------------------------------------------------------------------------------- */
	/* home page
	------------------------------------------------------- */
	#prom-1529118719{}
	
	
	/* HP Static 
	------------------------------------------------------- */
	#p46137353{
		max-width:var(--site-max-width);
		margin:auto;
	}
	
	#p46137353 .imgcont{
		position:relative;
		margin-right:1em;
	}
	#p46137353 picture:before	{
		content:'';
		display:block;
		height:100%;
		width:100%;
		background:url('https://s3-eu-west-1.amazonaws.com/wentworthpewtercom/i/art/hpimageoverlay.webp') no-repeat left;
		z-index:1;
		position:absolute;
		left:0;
		top:0;
	}
	#p46137353 picture img{
		z-index:-2;
	}
	
	#p46137353 h2,
	#p46137353 h3{
		font-size:40px;
		line-height:1;
		position:relative;
		z-index:1;
	}
	#p46137353 li,
	#p46137353 a.btn{
		display:block;
	}

	#p46137353 small{
		display:block;
		text-align:center;
	}

	/* HP Trusted by 
	------------------------------------------------------- */
	#a138510341{
		display:grid;
		grid-template-areas:"title"
			"logos";
		align-items:center;
		border-bottom:1px solid var(--light-blue-alpha);
		padding-bottom:2em;
	}
	
	#a138510341 h2{
		text-align:center;
		font-weight:normal;
		color:var(--light-blue);
		font-size:20px;
	}
	
	#a138510341 .slidecont picture,
	#a138510341 .slidecont{
		align-content:center;
		align-items:center;
		height:100%;
	}
	
	#a138510341 .slider-indicators{
		display:none;
	}

	/* HP Rooted in Sheffield
	------------------------------------------------------- */
	#a138575878.headerImg{
		display:grid;
		grid-template-columns:minmax(auto,654px) minmax(auto,40%);
		align-items:center;
		grid-column-gap:2em;
		padding:1em;
		border-top-right-radius:1em;
		border-top-left-radius:1em;
		background-color:var(--off-white);
	}
	#a138575878.headerImg h2{
		padding:0;
	}

	#a138575878.headerImg .artp{
		padding:0;
	}
	
}
/* ------------------------------------------------------------------------------------
	SCREEN - mobile (phones, 768px and down)   
	Last Updated : 17. 06. 2025
	Copyright :(c) 2025 Etail Systems Ltd
	Author : Etail Systems Ltd
------------------------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
	/* -------------------------------------------------------------------------------------	
	=Definitions
	------------------------------------------------------------------------------------- */
	:root{
		--site-max-width:100%;
		--site-inner-width:calc(100% - 6em);
		/* font-sizes */
		--heading-spacing:0;
		--sub-heading-spacing:0;
		--text-size:16px;
	}

	/* -------------------------------------------------------------------------------------
	=Typography 
	------------------------------------------------------------------------------------- */
	/* Defaults
	------------------------------------------------------- */
	h1, h2, h3, h4{
		text-align:left;
	}


	/* -------------------------------------------------------------------------------------
	=Grid Layout
	------------------------------------------------------------------------------------- */
	.fullWidth {
		grid-column: 1/-1;
	}
	
	.titleArticle{
		grid-column:1/-1;
		text-align:center;
	}
	
	.halfWidth{
		grid-column: 1/-1;
	}
	
	.halfWidthDbl {
		grid-column: auto / span 6;
		grid-row: span 1;
		grid-column: 1/-1
	}
	
	.quarterWidth {
		grid-column: auto / span 6;
	}
	
	.thirdWidth {
		grid-column: 1/-1
	}
	
	.twoThirdWidth {
		grid-column: 1/-1;
	}

	.textImage{
		display:grid;
		grid-template-areas:"text"
			"image";
		grid-template-columns:1fr;
		grid-gap:0em;
		align-items:center;
	}
	
	.textImage .artp{
		grid-area:text;
		text-align:left;
		padding:1em;
	}

	/* Headers
	------------------------------------------------------- */
	.plainHeader{
		grid-column:1/-1;
		margin:1em 0;
	}
	
	.plainHeader h2{
		text-align:left;
		font-size: 32px;
		margin:0 .5em;
	}
	
	.deptHeader h2{
		text-align:center;
		font-size:61px;
	}

	.headerImg,
	.deptHeaderImg{
		grid-template-areas:
			"title"
			"text "
			"image";
		grid-template-columns: 1fr;
		align-items:center;
		padding:0em;
		padding-left:0em;
	}
	
	.headerImg h2,
	.deptHeaderImg h2{
		font-size: 32px;
		padding:1rem;
	}
	
	.headerImg .artp,
	.deptHeaderImg .artp{
		padding:1rem;
	}
	.headerImg .imgcont,
	.deptHeaderImg .imgcont{
		grid-area:image;
	}
	
	.headerImg .imgcont img,
	.deptHeaderImg .imgcont img{
		border-radius:1em;
		width:100%;
		aspect-ratio:654/403;
		object-fit:cover;
		border-bottom-left-radius:0;
		border-bottom-right-radius:0;
	}
	
	
	/* Category Links
	------------------------------------------------------- */
	.categoryLink{
		grid-column:1/-1;
		padding-bottom:2em;
		padding:1em;
		grid-template-areas:
			"title"
			"text"
			"image";
		grid-template-columns:1fr;
	}
	.categoryLinkLrg{
		grid-column:1/-1;
		border-radius:1em;
		background-color:var(--off-white);
		padding: 1em;
		padding-bottom:0;
		display:grid;
		grid-template-areas:
			"image"
			"title"
			"text";
	}
	
	.categoryLink ul,
	.categoryLinkLrg ul{
		display:inline-block;
		margin-bottom:1em;
	}
	.categoryLink li,
	.categoryLinkLrg li{
		display:inline-block;
	}
	
	.categoryLink h2,
	.categoryLinkLrg h2{
		grid-area:title;
		align-self:end;
		margin:0;
		font-size:36px;
	}
	.categoryLink .artp,
	.categoryLinkLrg .artp{
		grid-area:text;
		align-self:start;
		text-align:left;
		color:var(--off-white-alpha)
	}
	
	.categoryLink small,
	.categoryLinkLrg small{
		display:block;
		padding-top:.5em;
		border-top: 1px var(--off-white-alpha) dashed;
	}
	.categoryLink .imgcont,
	.categoryLinkLrg .imgcont{
		grid-area:image;
		align-self:start;
	}
	
	.categoryLink .imgcont img,
	.categoryLinkLrg .imgcont img{
		border-radius:1em;
	}
	
	/* responsive iframe - used in articles*/
	.responsive-iframe {
		width: calc(100% - 2em);
		margin: 1em;
		display: inline-block;
		vertical-align: top;
		margin-top: 2em;
	}
	
	.responsive-iframe .artp,
	.responsive-iframe {
		position: relative;
		overflow: hidden;
		padding-top: 56.25%;
	}
	
	.responsive-iframe iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}
	
	/* Swiffy Sliders
	------------------------------------------------------- */
	/*dept sliders */
	.slider-product{
	    --swiffy-slider-item-count: 5;
	}
	
	/*dept sliders */
	.slider-dept{
	    --swiffy-slider-item-count: 5;
	    --swiffy-slider-nav-light: #fff;
	}
	.slider-dept-alt{
	    --swiffy-slider-item-count: 10;
	}
	
	/*Featured sliders */
	.slider-featured{
	    --swiffy-slider-item-count: 5;
	}
	
	/*cta slider */
	.slider-cta{
	    --swiffy-slider-item-count: 1;
	}
	
	.slider-trustedby{
	    --swiffy-slider-item-count: 4;
	}

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

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

	
	/* -------------------------------------------------------------------------------------
	=FIXEDTop Panel #ptf
	------------------------------------------------------------------------------------- */
	#ptf{}

	/* -------------------------------------------------------------------------------------
	=Top Panel #pt
	------------------------------------------------------------------------------------- */

	#pt{
		border-bottom-right-radius:.5em;
		border-bottom-left-radius:.5em;
	}
	#pt .ext {
		grid-template-areas:
			"logo logo logo logo"
			"nav-start  searchtoggle icons basket  "
			"search  search search search "
			"nav nav  nav nav ";
		grid-template-columns:1fr 1fr 2fr 1fr;
		align-items: center;
		padding:0 .5em;
		width:calc(100% - 1em);
		border-bottom-right-radius:.5em;
		border-bottom-left-radius:.5em;
	}

	/* logo
	------------------------------------------------------- */
	#a138936322 {
		grid-area: logo;
		padding: 1.5em 1em;
	}
	#a138936322 svg{
		max-height:52px;
	}

	/* icons
	------------------------------------------------------- */
	#p52559873,
	#p53018630{
		grid-area:icons;
		margin-right:0em;
	}
	#p52559873 ul,
	#p53018630 ul{
		display:grid;
		grid-template-columns: auto auto;
		align-items:center;
		grid-template-areas:"tel favourites ";
		grid-gap:1em;
	}
	#p52559873 li.tel,
	#p53018630 li.tel{
		display:none;
	}
	#p52559873 img,
	#p53018630 img{
		max-height:24px;
		width:auto;
	}
	#p52559873 li.wish,
	#p53018630 li.wish{
		display:block;
		margin:auto;
		background-color:transparent;
		border-radius:2em;
		padding:0em;
	}
	
	#p52559873 li.sin,
	#p52559873 li.acct,
	#p53018630 li.sin,
	#p53018630 li.acct{
		display:block;
		margin:auto;
		background-color:transparent;
		border-radius:2em;
		padding:0em;
	}

	/* search
	------------------------------------------------------- */
	#pt .icon.srch{
		grid-area:searchtoggle;
	}
	/* mikes hack of a search toggle */
	#a138805250{
		display:block;
		grid-area:searchtoggle;
		text-align:center;
	}

	#a138805250 button{
		background-color:transparent;
		border:0;
		outline:0;
		color:var(--blue);
		font-size: 19px;
		margin-top:2px;
	}
	
	#pt .search.toggleSearch {
		grid-area: search;
		visibility:visible;
		height:auto;
		margin:1em;
	}
	
	#pt .search {
		grid-area: search;
		margin-bottom:5px;
		text-align: center;
		font-size: 13px;
		border:1px solid var(--dark-blue);
		border-radius:3em;
		padding: 2px 4px;
		margin: 0;
		visibility:hidden;
		height:0;
	}

	#pt .search form {
		width:calc(100% - 0px);
		display:grid;
		grid-template-areas:"search button";
		grid-template-columns: 1fr 40px;
	}

	#pt .search input#searchbox {
		margin: auto 0;
		background-color:transparent;
		color:var(--black);
		font-size:13px;
		border:none;
		width:calc(100% - 0px);
		height:100%;
	}

	/*could do with some way of nicely seeing font awesome icons in coms */
	#pt .search input#search {
		margin: 0;
		padding:0;
		border:none;
		border-radius:0;
		background-color:transparent;
		width: 40px;
		font-family: var(--font-awesome);
	}

	/* basket
	------------------------------------------------------- */
	#mybskt a.btn img{
		max-height:24px;
	}

	#mybskt{
		grid-area: basket;
		position:relative;
		display:block;
		margin:auto;
		background-color:transparent;
		border-radius:0em;
		padding: 0em 1em;
	}

	#mybskt a.btn{
		position:relative;
		display:block;
		margin:auto;
		background-color:transparent;
		border-radius:0em;
		padding: 0;
		border:none;
	}

	/* -------------------------------------------------------------------------------------
	=Center Panel #pc
	------------------------------------------------------------------------------------- */
	#pc{
		background-color:white;
	}

	#a138313729 li{
		border-right:none;
	}

	/* -------------------------------------------------------------------------------------
	=Left Panel #pl
	------------------------------------------------------------------------------------- */
	#pl {
		width: calc(var(--site-max-width) - 2rem);
		margin:0 1rem;
	}

	/* -------------------------------------------------------------------------------------
	=Right Panel #pr
	------------------------------------------------------------------------------------- */
	#pr {
		width: calc(var(--site-max-width) - 2rem);
		margin:0 1rem;
	}

	/* -------------------------------------------------------------------------------------
	=Main Panel #pmid
	------------------------------------------------------------------------------------- */
	#pmid{}
	
	.pmfull,
	.pmstd{
		width: calc(var(--site-max-width) - 2rem);
		margin:0 1rem;
	}

	.pmwide{
		width: calc(var(--site-max-width) - 2rem);
		margin:0 1rem;
	}
	
	#sr {
		grid-template-columns: repeat(2, 1fr);
		grid-row-gap:2rem;
	}

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

	/* -------------------------------------------------------------------------------------
	=Subdepartment tree  
	------------------------------------------------------------------------------------- */
	.depttree ul{
		display:grid;
		grid-template-columns:repeat(2, 1fr);
		grid-gap: 1rem;
	}

	/* -------------------------------------------------------------------------------------
	=FeaturedProducts 
	------------------------------------------------------------------------------------- */
	
	/* title
	------------------------------------------------------- */
	.fprd .fprdtitle,
	.fprd a.title{
		grid-area: title;
		font-family:var(--heading-font);
		font-size:20px;
		font-weight:600;
		margin-top:.5rem;
	}
	/* flags
	------------------------------------------------------- */
	.f18022401 img{
		max-width:80px;
	}

	/* Wishlist/Savefor later on fprd
	------------------------------------------------------- */
	.sfl{
		grid-area:unset;
		position:absolute;
		top:.5em;
		right:.5em;
		z-index:1;
	}
	
	.sfl .submit {
		border:0;
		padding:0.5em;
		width:2em;
		line-height:1;
		background-color:var(--white);
	}

	/* fprd adverts
	------------------------------------------------------- */
	.fprd.add{
		display:block;
		position:relative;
	}
	
	.fprd.add .bnr{
		width: 100%;
		height:100%;
		object-fit: cover;
		color:var(--white);
	}
	
	.fprd.add .bnr picture,
	.fprd.add .bnr img{
		width: 100%;
		height:100%;
		object-fit: cover;
		border-radius:1em;
	}
	
	.fprd.add .toi{
		position:absolute;
		top:1em;
		padding:1em;
	}
	.fprd.add h3{
		--heading-color:var(--white);
		font-size:24px;
		position:relative;
		z-index:1;
		margin-bottom:2rem;
	}
	.fprd.add h3:before{
		content:'';
		width:100%;
		height:38px;
		background:url('https://s3-eu-west-1.amazonaws.com/wentworthpewtercom/i/art/bg2.png') no-repeat left bottom;
		background-size:75%;
		opacity:.5;
		display:block;
		position:absolute;
		bottom:0;
		z-index:-1;
	}

	/* -------------------------------------------------------------------------------------
	=Footer Panel #pf
	------------------------------------------------------------------------------------- */
	#pf{}

	#pf .ext {}

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

	#pb .ext {
		--spacer-width:1rem;
		grid-template-areas:". logo ."
			". customerservices ."
			". productinfo . " 
			". contact .";
		grid-row-gap:2rem;
		grid-template-columns: var(--spacer-width) 1fr var(--spacer-width);
		padding-top:3em;
		border-top-right-radius:1.5em;
		border-top-left-radius:1.5em;
	}
	#pb .ext img{
			margin:0;
	}

	#p52822016{
		grid-area:logo;
	}

	#p52822016 img{
		max-width:160px;
	}

	/* -------------------------------------------------------------------------------------
	=FIXEDBottom Panel #pbf
	------------------------------------------------------------------------------------- */
	#pbf .ext {
		grid-template-areas:"links"
							"copyright";
		grid-template-columns: 1fr;
		border-top:none;
		padding:0;
		margin:0 1em;
	}

	#a138313730{
		grid-area:links;
		text-align:center;
	}

	.etailcopy{
		grid-area:copyright;
		text-align:left;
		padding-top:1em;
		margin-top:1em;
		border-top:1px solid var(--light-blue);
	}
	.etailcopy p{
		display:block;
		margin:0;
	}


	/* -------------------------------------------------------------------------------------
	=Sitemap 
	------------------------------------------------------------------------------------- */
	#pm .smap ul {
		list-style-position: inside;
		list-style: none;
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	}
	/* -------------------------------------------------------------------------------------
	=Client Specific Stylings 
	------------------------------------------------------------------------------------- */
	/* home page
	------------------------------------------------------- */
	#prom-1529118719{}
	
	
	/* HP Static 
	------------------------------------------------------- */
	#p46137353{
		max-width:var(--site-max-width);
		margin:auto;
	}
	
	#p46137353 .imgcont{
		position:relative;
	}
	#p46137353 picture:before	{
		content:'';
		display:block;
		height:100%;
		width:100%;
		background:url('https://s3-eu-west-1.amazonaws.com/wentworthpewtercom/i/art/hpimageoverlay.webp') no-repeat left;
		z-index:1;
		position:absolute;
		left:0;
		top:0;
	}
	#p46137353 picture img{
		z-index:-2;
	}
	
	#p46137353 h2,
	#p46137353 h3{
		font-size:40px;
		line-height:1;
		position:relative;
		z-index:1;
	}
	#p46137353 li,
	#p46137353 a.btn{
		display:block;
	}

	#p46137353 small{
		display:block;
		text-align:center;
	}

	/* HP Trusted by 
	------------------------------------------------------- */
	#a138510341{
		display:grid;
		grid-template-areas:"title"
			"logos";
		align-items:center;
		border-bottom:1px solid var(--light-blue-alpha);
		padding-bottom:2em;
	}
	
	#a138510341 h2{
		text-align:center;
		font-weight:normal;
		color:var(--light-blue);
		font-size:20px;
	}
	
	#a138510341 .slidecont picture,
	#a138510341 .slidecont{
		align-content:center;
		align-items:center;
		height:100%;
	}
	
	#a138510341 .slider-indicators{
		display:none;
	}

	/* HP Rooted in Sheffield
	------------------------------------------------------- */
	#a138575878.headerImg{
		display:grid;
		grid-template-areas:
			"image "
			"title"
			"text";
		grid-template-columns:1fr;
		align-items:center;
		grid-column-gap:2em;
		padding:1em;
		border-top-right-radius:1em;
		border-top-left-radius:1em;
		background-color:var(--off-white);
	}
	#a138575878.headerImg h2{
		padding:0;
	}

	#a138575878.headerImg .artp{
		padding:0;
	}

	/* -------------------------------------------------------------------------------------
	=Basket - Checkout v5
	------------------------------------------------------------------------------------- */
	/*needs #pm as .bskt is used in the header */
	#pm .bskt {
		display: grid;
		grid-template-columns: 1fr;
		grid-gap:0;
		grid-column-gap: 2em;
		grid-template-areas:"header"
							"contents"
							"sidebar"
							" promcontents";
		align-items:start;
		margin-bottom:4rem;
	}

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

	/*product quantity */
	#pm .bskt .lines .line .qty{
		grid-area:qty;
		align-self:end;
	}
	
	#pm .bskt .line .price{
		grid-area:price;
		text-align:center;
		font-family:var(--heading-font);
		font-weight:var(--heading-font-weight);
		align-self:center;
	}

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


	/* Sign In - these conflict with new checkout forms, need to revisit
	/* also DH has broken the structure of this page with the new checkout code! 
	/* hence all the .form, form stuff in the defaults
	------------------------------------------------------- */
	.page_signin .form,
	.page_signin form{
		margin: auto;
		max-width:95% !important;
	}

	/* Forgotten Password
	------------------------------------------------------- */
	.page_passwordrequest .form#pwrem {
		width:95% !important;
		margin: auto;
	}

	/* Register/update details - need to add classes to all the input fields
	------------------------------------------------------- */
	.page_register .form {
		margin: auto;
		max-width:95% !important;;
	}

	
}
/* ------------------------------------------------------------------------------------
	SCREEN - v6 basecomponents 2024  
	Last Updated : 26. 03. 2024 
	Copyright :(c) 2024 Etail Systems Ltd
	Author : Etail Systems Ltd

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


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

.ui-widget.ui-widget-content.ui-autocomplete {
	margin: auto;
	padding: 0;
	border-bottom-right-radius: .5em;
	border-bottom-left-radius: .5em;
	max-height: 326px;
	max-width:314px;
	overflow-x: hidden;
	overflow-y: scroll;
	border-top:none;
	z-index: 2000;
	background-color: var(--grey)
}

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

.ui-menu-item a {
	display: grid;
	grid-template-columns: 3em 1fr;
	padding: var(--half-spacing);
	grid-template-areas: "image title";
	grid-gap: var(--spacing);
	align-items:center;
}

.foundProduct {
	grid-area: image;
}

.foundProduct img {}

.foundProductTitle {
	grid-area: title;
}

.foundProductRef {
	display: none;
}

.foundProductDesc {
	display: none;
}

.ui-autocomplete li {
	list-style: none;
}

.ui-autocomplete li:hover {}

.ui-menu .ui-menu-item a.ui-state-focus, .ui-menu .ui-menu-item a.ui-state-active {
	margin: 0;
	border-radius: 0;
	border: none;
	outline: none;
}

.ui-menu-item a.ui-state-active {}
.ui-autocomplete mark {}

/* -------------------------------------------------------------------------------------
=Email when back in stock EWIS 
------------------------------------------------------------------------------------- */
/* take care as the html markup that writes this thing out is a bit borked! */
#ewis h3 {
	font-weight: var(--heading-font-weight);
}

#ewis label {
	color: var(--text-heading-color);
}

a.lnk.ewisopen, a.lnk.ewis {
	display: block;
	height: auto;
	text-transform: capitalize;
	font-size:.625em;
}

.lnk.ewisopen:hover {
	text-decoration: underline;
	text-decoration-color:var(--orange);
}

/* -------------------------------------------------------------------------------------
=PopupDialog 
------------------------------------------------------------------------------------- */
#popupdialog {
	position: fixed;
	top: 50%;
	left: 50%;
	width: calc(var(--site-max-width) / 3);
	transform: translate(-50%, -50%);
	padding: var(--spacing);
	z-index: 2000;
	z-index: 2000;
	border: 1px solid var(--border-color);
	background-color: var(--popout-color);
	display: none;
	text-align: center;
	-webkit-box-shadow: var(--box-shadow);
	-moz-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
}

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

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

#popupdialog h3 {
	font-size: 1em;
	margin-bottom: 1em;
}

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

#popupdialog .item .title {
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	color: var(--text-heading-color);
	background-color:transparent;
	border:none;
	font-size: 1.2em;
	grid-column: 1/-1;
	grid-row: 2;
	text-align: center;
}

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

#popupdialog .item p.price {
	grid-column: 2;
	grid-row: 3;
	text-align: left;
}

/* -------------------------------------------------------------------------------------
=HoverBsket 
------------------------------------------------------------------------------------- */
.hoverbskt {
	background-color: var(--off-white);
	border:none;
	width: calc(var(--basket-width) - 1em);
	border-top:none;
	padding:.5em;
	z-index:999999;
	text-align:center;
}

.hoverbskt h3 {
	display:none;
}

.hoverbskt .lines .item:last-child {}
.hoverbskt .formupdate {}
.hoverbskt .formupdate input {}
.hoverbskt .formupdate input.submitQtyChange {}
.hoverbskt a,
.hoverbsktadd a,
.hoverbskt p,
.hoverbsktadd p {
	font-size: 0.825em;
}

.hoverbsktadd p.descr{
	display:none;
}

.hoverbskt .lines {
	max-height:260px;
	overflow-y:scroll;
}
.hoverbskt .lines .item {
    display:grid;
    grid-template-columns:64px 1fr;
    grid-gap:.5em;
    padding-right:.5em;
}

.hoverbskt .lines .item a.title,
.hoverbskt .lines .item p.sample {
	color:var(--textSubHeadingColor);
	font-weight:bolder;
	text-align:left;
}
.hoverbskt .lines .item img {
	aspect-ratio: 1 / 1;
	width: 100%;
	object-fit: contain;
}

.hoverbskt .lines .item p.descr {
	display:none;
}

.hoverbskt .lines .item p.price {
	grid-column:2;
	text-align:right;
}
.hoverbskt h4.count {
	padding:.5em 0;
	margin-top:.5em;
	text-align: right;
	font-size: 0.825em;
	border-top: 1px var(--border-color) solid;
}

.hoverbskt h4.total {
	text-align: right;
	font-size: 0.825em;
	font-weight:bolder;
	padding-bottom:.5em;
	margin-bottom:1em;
	border-bottom: 1px var(--border-color) solid;
}

.hoverbskt a.btn {
	display:block;
	background-color:var(--checkout-button);
	border:1px var(--checkout-button) solid;
}

/* -------------------------------------------------------------------------------------
=Out of Stock, Direct Despatch
------------------------------------------------------------------------------------- */
.ui-dialog.outofstockdialog, .ui-dialog.directdespatchdialog {
	width: 500px !important;
	max-width: 80vw;
	text-align: center;
}

.ui-dialog.outofstockdialog .outofstockpopup, .ui-dialog.directdespatchdialog .directdespatchpopup-pane {
	border: none;
}

.ui-dialog.outofstockdialog .outofstockpopup .oosheader, .ui-dialog.directdespatchdialog .ui-widget-header {
	padding: 0 0 1em 0;
}

.ui-dialog.directdespatchdialog .ui-widget-header {
	display: none;
}

.ui-dialog.directdespatchdialog .ui-widget-header .ui-dialog-titlebar-close {
	display: none;
}

.ui-dialog.outofstockdialog .outofstockpopup .oosmessage .oosdate {}

.ui-dialog.outofstockdialog .ui-dialog-titlebar {
	display: none;
}

.ui-dialog.outofstockdialog .ui-widget-content, .ui-dialog.directdespatchdialog .ui-dialog-buttonpane {
	background: transparent;
	border: none;
	margin-top: 0;
	text-align: center;
	padding: 0;
}

.ui-dialog.outofstockdialog .ui-widget-content .ui-dialog-buttonset, .ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: none;
}

.ui-dialog.outofstockdialog .ui-widget-content .ui-dialog-buttonset button, .ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
	--border-color: var(--button-border-color);
	display: inline-block;
	vertical-align: middle;
	font-size: 1em;
	font-weight: var(--button-font-weight);
	text-align: center;
	cursor: pointer;
	font-family: var(--button-font);
	text-transform: capitalize;
	border: 1px solid var(--button-border-color);
	border-radius: var(--border-radius);
	outline: none;
	padding: var(--half-spacing) var(--spacing);
	background-color: var(--white);
	color: var(--orange);
	border: 1px solid var(--button-border-color);
	border-radius: var(--border-radius);
	outline: none;
}

/*better use of classes would be nice! ;) */
.ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button:first-child {
	--border-color: var(--button-border-color);
	background-color: var(--button-color);
	color: var(--button-text-color);
	border: 1px solid var(--button-border-color);
}

.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button {}

#directdespatchpopup-pane span.ddproduct {
	font-size: 1.5em;
	display: block;
	margin-bottom: 1em;
}

.ddmessage {}
.ddmessage span.dddatemessage {}

.ddmessage span.dddate {
	display: block;
	margin-top: 1em;
	font-size: 1.2em;
}

/* -------------------------------------------------------------------------------------
=Tooltips
------------------------------------------------------------------------------------- */
.helpicon {
	display: inline-block;
	display:none;
	position: absolute;
	top: .5rem;
	right: .5rem;
	text-align: left;
}

.helpicon h3 {
	margin: var(--half-spacing) 0;
}

.helpicon .lefttooltip {
	min-width: 100px;
	max-width: 200px;
	top: 50%;
	right: 100%;
	margin-right: 1rem;
	transform: translate(0, -50%);
	padding: var(--half-spacing);
	color: var(--text-color);
	background-color: var(--white);
	font-weight: normal;
	font-size: .825em;
	position: absolute;
	z-index: 1000;
	box-sizing: border-box;
	display: none;
	border-radius: var(--border-radius);
	border: 1px solid var(--border-color);
}

.helpicon:hover .lefttooltip {
	display: block;
	line-height: 1;
}

.helpicon .lefttooltip i {
	position: absolute;
	top: 50%;
	left: 100%;
	margin-top: -12px;
	width: 12px;
	height: 24px;
	overflow: hidden;
}

.helpicon .lefttooltip i::after {
	content: '';
	position: absolute;
	width: 12px;
	height: 12px;
	left: 0;
	top: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
	background-color: #FFFFE0;
	border: 1px solid #DCA;
}

/* -------------------------------------------------------------------------------------
=Accordion 
------------------------------------------------------------------------------------- */
ul.accordion {
	grid-column: 1/-1;
	list-style: none;
}

/* Header including hide/show icons 
------------------------------------------------------- */
.accordion .header {
	display: grid;
	grid-template-areas:"expand question ";
	grid-gap: 1rem;
	grid-template-columns: 1rem 1fr;
	font-family:var(--text-font);
	font-size: 1em;
	cursor: pointer;
	padding: 1rem 0;
	transition: var(--transition);
	text-transform:capitalize;
	border-top:1px solid var(--grey)
}

.accordion .header img {
	grid-area: expand;
	cursor: pointer;
}

.accordion .header .showminus {
	display: none;
}

.accordion .header.current .showplus {
	display: none;
}

.accordion .header.current .showminus {
	display: block;
}

li.subhead {}

/* Panes
------------------------------------------------------- */
ul.accordion li.pane.first {}

ul.accordion li.pane {
	display: none;
}

ul.accordion li.pane p {
	font-size:1em;
}

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

/* -------------------------------------------------------------------------------------
=Copyright and Managed by 
------------------------------------------------------------------------------------- */
.etailcopy {
	grid-area:copyright;
	display: grid;
	grid-template-columns:auto auto 1fr;
	grid-gap:1rem;
	padding:.5em;
	grid-template-areas:"etail copy"
}
p.etail {
	grid-area:etail;
	text-align:left;
	margin:0;
}

p.copy {
	grid-area:copy;
	text-align:left;
	margin:0;
}

p.copy span {}

@media only screen and (max-width: 600px) {
	.etailcopy {
		grid-area:copyright;
		display: grid;
		grid-template-columns:1fr; ;
		grid-gap:0rem;
		padding:.5em;
		grid-template-areas:"copy"
				"etail";	
		}
	
		p.copy {
			grid-area:copy;
			text-align:left;
			margin:0;
		}
}

/* vat switch
------------------------------------------------------- */
.vatsw{
	grid-area:vat;
	text-align: left;
	font-size:12px;
}

[type=checkbox][role=switch] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 1.25em;
	height: 1.25em;
	margin-top: -0.125em;
	margin-right: 0.375em;
	margin-left: 0;
	-webkit-margin-start: 0;
	margin-inline-start: 0;
	-webkit-margin-end: 0.375em;
	margin-inline-end: 0.375em;
	border-width: 1px;
	font-size: inherit;
	vertical-align: middle;
	cursor: pointer;	
	width: 2.25em;
	height: 1.25em;
	border-radius: 1.25em;
	line-height: 1.25em;
	
}

[type=checkbox][role=switch] {
	--background-color: var(--featured-alt-color);
	--border-color: var(--featured-alt-color);
	--border-width:2px;
	width: 2.25em;
	height: 1.25em;
	border: var(--border-width) solid var(--border-color);
	border-radius: 1.25em;
	background-color: var(--background-color);
	line-height: 1.25em;
	margin:0 .5em;
}

[type=checkbox][role=switch]:focus {}

[type=checkbox][role=switch]:checked {
	--background-color: var(--red);
	--border-color: var(--red);
}

[type=checkbox][role=switch]:before {
	display: block;
	width: calc(1.25em - (var(--border-width) * 2));
	height: 100%;
	border-radius: 50%;
	background-color: var(--white);
	content: "";
	transition: margin 0.1s ease-in-out;
}

[type=checkbox][role=switch]:checked:before {
	background-color: var(--white);
}

[type=checkbox][role=switch]:checked {
	background-image: none;
}

[type=checkbox][role=switch]:checked::before {
	margin-left: calc(1.125em - var(--border-width));
	-webkit-margin-start: calc(1.125em - var(--border-width));
	margin-inline-start: calc(1.125em - var(--border-width));
}

/*readmore stuff 
------------------------------------------------------- */
.more{
	margin:1em 0;
}

.more.noexpand{
	display:none;
	transition: var(--transition);
}

.showmorecss,
.showlesscss,
.showmore,
.showless{
	display:inline-block;
	vertical-align:middle;
	font-family:var(--buttonFont);
	font-size:.825em;
	border: none;
	text-align: center;
	border-color:inherit;
	cursor:pointer;
	color:var(--orange);
	text-transform:capitalize;
	transition: var(--transition);
	
}


/* Messages 
------------------------------------------------------- */
#mess {
	padding: 1em;
	margin: 1em 0;
}

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

li.info.req{
	color:var(--error-color)
}

li.info.acct{
	color:var(--error-color);
	font-size:2em;
}

li.info.acct a{
	margin-left:.5em;
	text-decoration:underline;
}

li.info img{
	display:inline-block;
}

li.info:not(.sa_name)::before {
	font-family: var(--font-awesome);
	content: '\f05a';
	margin-right: var(--half-spacing)
}

.warn {
	color: var(--error-color);
}

.reqmsg {
	color: var(--error-color);
	font-size: smaller;
}

.oos {
	color: var(--error-color);
}

/* Sign In - these conflict with new checkout forms, need to revisit
/* also DH has broken the structure of this page with the new checkout code! 
/* hence all the .form, form stuff in the defaults
------------------------------------------------------- */
.page_signin .form,
.page_signin form{
	margin: auto;
	max-width:50%;
}

.page_signin form input{
	width:100%;
}

.page_signin form ul li {
	list-style:none;
}

.page_signin .art{
	margin: auto;
	max-width:50%;
}

.page_signin .form label {
	display: block;
}

.page_signin .form input {
	width: calc(100% - 2em);
}

.page_signin .form input + img{
	display:inline-block;
	vertical-align:top;
}

/* Register/update details - need to add classes to all the input fields
------------------------------------------------------- */
.page_register .form {
	margin: auto;
	max-width:50%;
}

.page_register .form label {
	display: block;
}

.page_register form input,
.page_register form select {
	width: calc(100% - 2em);
	background-color:var(--grey);
	border-color:var(--grey)
}

.page_register input.submit{
	background-color:var(--blue);
}

.page_register form img{
	display:inline-block;
	vertical-align:top;
}


/* Forgotten Password
------------------------------------------------------- */
.page_passwordrequest .form#pwrem {
	width: 50%;
	margin: auto;
}

.page_passwordrequest form input,
.page_register form select {
	width: calc(100% - 2em);
}

.page_passwordrequest form img{
	display:inline-block;
	vertical-align:top;
}

.page_passwordrequest form h5 {
	font-family: var(--text-font);
	font-weight: normal;
	font-size: .825em;
}



/* -------------------------------------------------------------------------------------
=Jquery Base Overrides 
------------------------------------------------------------------------------------- */
.ui-dialog, .ui-widget.ui-widget-content {
	z-index: 1002;
	border: 1px solid var(--border-color);
}

.ui-widget {
	font-size: 1em;
	font-family: var(--text-font)
}

.ui-widget-header {
	background: none;
	border: none;
	font-family:var(--heading-font);
	font-weight:var(--heading-font-weight);
	color: var(--text-heading-color);
	font-size: 1em;
}

.ui-dialog input {
	width: 100%;
}

.ui-dialog input#subscribe {
	width: auto;
}

.ui-dialog input.submit {
	margin: var(--spacing) 0;
	text-align: center;
}

.ui-widget input[type="text"] .ui-widget input[type="email"],
.ui-widget select, .ui-widget textarea, .ui-widget button {
	padding: 0 var(--spacing);
	padding: .25em 0.5em;
	padding: var(--spacing);
	border: none;
	outline: 1px var(--border-color) solid;
}

.validateTips {
	font-size: .688em;
}

/* Interaction states
----------------------------------*/
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	border: 1px solid var(--border-color);
	font-weight: normal;
}

.ui-icon-background,
.ui-state-active .ui-icon-background {
	border: var(--border-color);
}

/* the ask for email address popup? */
.ui-dialog.ewisdialog {
	width: 400px !important;
	text-align: center;
}

/* ask a question popup on product pages */
.ui-dialog.techquesdialog {}
.techquesdialog label {}

/* saartdialog*/
.ui-dialog.saartdialog {
	width: 80vw !important;
	max-width: 640px;
	display: none;
}



/* -------------------------------------------------------------------------------------
=PopupDialog / Popup Add to Basket / Direct Despatch
------------------------------------------------------------------------------------- */
.hoverbsktadd, #popupdialog {
	position: fixed;
	top: 50%;
	left: 50%;
	width: calc(var(--site-max-width) / 3);
	transform: translate(-50%, -50%);
	padding: var(--spacing);
	z-index: 2000;
	z-index: 2000;
	border: 1px solid var(--border-color);
	background-color: var(--popout-color);
	/* display: none; */
	text-align: center;
	-webkit-box-shadow: var(--box-shadow);
	-moz-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
}

@media only screen and (max-width: 768px) {
	.hoverbsktadd, #popupdialog {
		width: calc(var(--site-max-width) - 4em);
	}
}

.hoverbsktadd .item,
#popupdialog .item {
	display: grid;
	grid-template-areas:"image"
	"title"
	"qty"
	"price";
;
	grid-gap: .5em;
	margin-bottom: var(--spacing)
}

.hoverbsktadd .item img, #popupdialog .item img {
	grid-area:image;
	align-self: center;
	margin: 0 auto !important;
}

.hoverbsktadd h3, #popupdialog h3 {
	font-size: 1em;
	/* margin-bottom: 1em; */
}

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

.hoverbsktadd .item a.title,
#popupdialog .item .title {
	grid-area:title;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	color: var(--dark-blue);
	background-color:transparent;
	border:none;
	font-size: 1.2em;
	text-align: center;
}

.hoverbsktadd .item p.qty,
#popupdialog .item p.qty {
	grid-area:qty;
	display:none;
}

.hoverbsktadd .item p.price, #popupdialog .item p.price {
	grid-area:price;
	color:var(--text-heading-color);
	font-size:1.5em;
}

/* this element needs a class */
.hoverbsktadd a[title="Checkout"], .hoverbsktadd .item+a {
	font-size: 1.25em;
	padding: .5rem 2rem;
	text-align: center;
	cursor: pointer;
	font-family: var(--button-font);
	text-transform: capitalize;
	background-color: var(--checkout-button);
	color: var(--white);
	border: 1px var(--checkout-button) solid;
	outline: none;
	display: inline-block;
	vertical-align: middle;
	transition: var(--transition);
	border-radius: var(--border-radius);
}

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


/* cookie popup
------------------------------------------------------- */
#pbf .cookie {
    position: fixed;
    bottom: 0%;
    left: 0%;
    width: 100%;
    z-index: 1000;
    background: #0d0d0d;
    text-align: center
}

#pbf .cookie p {
    /* width: 1200px; */
    margin: 0 auto;
    float: none;
    color: #fff;
    /* font-size: .75em; */
    padding: .5em 0;
}

#pbf .cookie p a {
    float: none;
    color: #fff;
    text-decoration: underline;
    padding: 0 .25em;
}

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

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


/* popout stuff? - used for terms and conditions in checkout process not sure where else it may be used ... */

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

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


#pp .artp ul {
	list-style-type: disc;
	padding-inline-start: 2em;
	margin-block-start: 1em;
	margin-block-end: 1em;
	font-size:1.2em;
}

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

#pp .artp ul li {}

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

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

#pp .artp ol li{
	
}

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

#pp .artp a {
	font-weight: 500;
	color:var(--featured-color);
	text-decoration:underline;
}

#pp .artp a:hover {
	text-decoration: underline;
	text-decoration-color: var(--featured-alt-color);
}


/* scroll to top */

/* scroll to top */
.scrolltotopicon {
	position:fixed;
	top:calc(50% - 6em);
	right:2em;
	background-color:var(--grey);
	padding:1.5em 1.5em;
	border-radius:50%;
	cursor:pointer;
	z-index:10001;
	opacity:.9;
}

.scrolltotopicon img{
	width:2em;
}

.scrolltotopicon.hidden{
	display:none;
}