/**
* @license
* Font Family: Neurial Grotesk
* Designed by: Deni Anggara
* URL: https://www.indiantypefoundry.com/fonts/neurial-grotesk
* Font Styles:
* Neurial Grotesk Regular
* Neurial Grotesk Medium
* Neurial Grotesk Bold
* © 2025 Indian Type Foundry
*/
@font-face {
font-family: 'Neurial Grotesk Regular';
src: url('/fonts/NeurialGrotesk-Regular.woff') format('woff'), url('/fonts/NeurialGrotesk-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Neurial Grotesk Medium';
src: url('/fonts/NeurialGrotesk-Medium.woff') format('woff'), url('/fonts/NeurialGrotesk-Medium.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Neurial Grotesk Bold';
src: url('/fonts/NeurialGrotesk-Bold.woff') format('woff'), url('/fonts/NeurialGrotesk-Bold.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
/*! 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 2025
Filename : swiffy.css
Last Updated : 23. 10. 2025
------------------------------------------------------------------------------------- */
.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: 2/1;
--swiffy-slider-item-count: 1;
--swiffy-slider-nav-light: #fff;
--swiffy-slider-nav-dark: #333;
--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, 0.4);
border-radius: 1rem;
}
.swiffy-slider ::-webkit-scrollbar-thumb:hover {
background: rgba(0, 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;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
display: grid;
align-items: center;
height: 100%;
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, 0.4) rgba(0, 0, 0, var(--swiffy-slider-track-opacity));
background-clip: padding-box;
}
.slider-container>* {
/*The slides*/
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%;
object-fit: cover;
}
.slider-item-ratio-contain .slider-container>*>* {
object-fit: contain;
}
.slider-item-ratio .slider-container>*::after {
display: block;
padding-top: calc( 100% / (var(--swiffy-slider-item-ratio)));
content: "";
}
.slider-item-ratio-32x9 {
--swiffy-slider-item-ratio: 32/9;
}
.slider-item-ratio-21x9 {
--swiffy-slider-item-ratio: 21/9;
}
.slider-item-ratio-16x9 {
--swiffy-slider-item-ratio: 16/9;
}
.slider-item-ratio-4x3 {
--swiffy-slider-item-ratio: 4/3;
}
.slider-item-ratio-2x1 {
--swiffy-slider-item-ratio: 2/1;
}
.slider-item-ratio-1x1 {
--swiffy-slider-item-ratio: 1/1;
}
.slider-item-ratio-3x4 {
--swiffy-slider-item-ratio: 3/4;
}
.slider-nav-scrollbar {
--swiffy-slider-track-height: 0.5rem;
}
.slider-nav-scrollbar .slider-container {
scrollbar-width: thin;
}
.slider-nav-nodelay .slider-container {
scroll-behavior: auto;
}
.slider-indicators {
position: absolute;
right: 2rem;
bottom: 0;
left: 2rem;
display: flex;
justify-content: center;
padding: 0;
margin-bottom: 1rem;
list-style: none;
}
.slider-nav-scrollbar .slider-indicators {
margin-bottom: calc(1rem + var(--swiffy-slider-track-height));
}
.slider-indicators>*.active {
opacity: 1;
}
.swiffy-slider.slider-indicators-outside .slider-nav {
margin-bottom: var(--swiffy-slider-indicator-outside-size);
}
.swiffy-slider.slider-indicators-outside {
padding-bottom: var(--swiffy-slider-indicator-outside-size);
}
.swiffy-slider.slider-indicators-outside.slider-indicators,
.swiffy-slider.slider-indicators-outside .slider-indicators {
margin-bottom: 0;
}
.slider-indicators>* {
box-sizing: content-box;
flex: 0 1 auto;
width: 2rem;
height: .2rem;
padding: 0;
border: .4rem solid transparent;
cursor: pointer;
background-color: #fff;
background-clip: padding-box;
opacity: .5;
transition: opacity .4s ease;
}
.slider-indicators-square.slider-indicators>*,
.slider-indicators-square .slider-indicators>* {
width: .5rem;
height: .5rem;
border: .4rem solid transparent;
}
.slider-indicators-round.slider-indicators>*,
.slider-indicators-round .slider-indicators>* {
width: .5rem;
height: .5rem;
border: .4rem solid transparent;
border-radius: 50%;
}
.slider-indicators-highlight.slider-indicators>*.active,
.slider-indicators-highlight .slider-indicators>*.active {
border: .33rem solid transparent;
padding: .07rem;
}
.slider-nav {
position: absolute;
top: 0;
left: 0;
bottom: 0;
border: 0;
background-color: transparent;
cursor: pointer;
padding: 0;
visibility: hidden;
opacity: 0.8;
transition: visibility 0.1s, opacity 0.2s linear;
margin-bottom: var(--swiffy-slider-track-height);
display: flex;
align-items: center;
padding: 0 .5rem;
filter: drop-shadow(0 0 .5rem rgba(0, 0, 0, .5));
transform: scale(var(--swiffy-slider-nav-zoom));
}
.slider-nav::before {
position: absolute;
content: "";
padding: .5rem;
width: 3rem;
height: 3rem;
}
.slider-nav::after {
content: "";
mask: url("data:image/svg+xml,");
mask-size: cover;
background-color: var(--swiffy-slider-nav-light);
background-origin: content-box;
width: 3rem;
height: 3rem;
}
.slider-nav-arrow .slider-nav::after {
mask: url("data:image/svg+xml,");
}
.slider-nav-chevron .slider-nav::after {
mask: url("data:image/svg+xml,");
}
.slider-nav-caret .slider-nav::after {
mask: url("data:image/svg+xml,");
}
.slider-nav-caretfill .slider-nav::after {
mask: url("data:image/svg+xml,");
}
.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,
.slider-nav-square .slider-nav::before {
background-color: var(--swiffy-slider-nav-light);
}
.slider-nav-round .slider-nav::after,
.slider-nav-square .slider-nav::after {
background-color: var(--swiffy-slider-nav-dark);
width: 2rem;
height: 2rem;
margin: .5rem;
}
.slider-nav-round .slider-nav::before {
border-radius: 50%;
}
.slider-nav-round .slider-nav::after {
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-dark.slider-nav-round .slider-nav::before,
.slider-nav-dark.slider-nav-square .slider-nav::before {
background-color: var(--swiffy-slider-nav-dark);
}
.slider-nav-dark.slider-nav-round .slider-nav::after,
.slider-nav-dark.slider-nav-square .slider-nav::after {
background-color: var(--swiffy-slider-nav-light);
}
.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: 0;
left: unset;
}
.slider-nav-visible .slider-nav {
visibility: visible;
}
.slider-nav-dark .slider-nav {
opacity: 0.6;
}
.slider-indicators-dark.slider-indicators>*,
.slider-indicators-dark .slider-indicators>* {
filter: invert(1);
}
.slider-item-snapstart {
--swiffy-slider-snap-align: start;
}
.slider-item-nosnap {
--swiffy-slider-snap-align: unset;
}
.slider-item-nogap {
--swiffy-slider-item-gap: 0rem;
}
.slider-item-reveal {
--swiffy-slider-item-reveal: 8rem;
}
.slider-item-snapstart.slider-item-reveal {
--swiffy-slider-item-reveal: 4rem;
}
.slider-item-show2 {
--swiffy-slider-item-count: 2;
}
.slider-item-show3 {
--swiffy-slider-item-count: 3;
}
.slider-item-show4 {
--swiffy-slider-item-count: 4;
}
.slider-item-show5 {
--swiffy-slider-item-count: 5;
}
.slider-item-show6 {
--swiffy-slider-item-count: 6;
}
.slider-nav-mousedrag .slider-container {
cursor: grab;
}
.slider-nav-mousedrag.dragging .slider-container {
scroll-snap-type: unset;
scroll-behavior: unset;
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: 0.5;
visibility: hidden;
}
.slider-nav-animation.slider-nav-animation-scale .slider-container>*>* {
transform: scale(.9);
}
.slider-nav-animation.slider-nav-animation-appear .slider-container>*>* {
opacity: 0.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;
visibility: visible;
}
}
@media (min-width: 62rem) {
.slider-item-show6:not(.slider-item-snapstart) .slider-container>*,
.slider-item-show4:not(.slider-item-snapstart) .slider-container>*,
.slider-item-show2:not(.slider-item-snapstart) .slider-container>* {
scroll-snap-align: unset;
}
.slider-item-show6:not(.slider-item-snapstart) .slider-container>*::before,
.slider-item-show4:not(.slider-item-snapstart) .slider-container>*::before,
.slider-item-show2:not(.slider-item-snapstart) .slider-container>*::before {
content: " ";
display: block;
position: absolute;
left: calc((var(--swiffy-slider-item-gap)/2)*-1);
top: 0;
/*FF fix setting w+h to 1 px - otherwise snap will not occur*/
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;
/*FF fix setting w+h to 1 px - otherwise snap will not occur*/
width: 1px;
height: 1px;
scroll-snap-align: center;
}
.slider-nav::before,
.slider-nav::after {
width: 2rem;
height: 2rem;
padding: 0.3rem;
}
.slider-nav-round .slider-nav::after,
.slider-nav-square .slider-nav::after {
width: 1.75rem;
height: 1.75rem;
margin: 0.125rem;
}
.slider-nav-outside-expand .slider-container,
.slider-nav-outside .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-square.slider-indicators>*,
.slider-indicators-square .slider-indicators>*,
.slider-indicators-round.slider-indicators>*,
.slider-indicators-round .slider-indicators>* {
width: .3rem;
height: .3rem;
}
.slider-indicators {
margin-bottom: .5rem;
display: none;
}
.slider-nav-scrollbar .slider-indicators {
margin-bottom: 0rem;
}
.slider-indicators>* {
width: 1rem;
height: 0.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-expand .slider-container,
.swiffy-slider:not(.slider-nav-touch).slider-nav-outside .slider-container {
margin: 0 0rem;
}
.slider-item-nosnap-touch {
--swiffy-slider-snap-align: unset;
}
}
/* ------------------------------------------------------------------------------------
SCREEN - v6 Etail Systems 2025
Filename : sitepanes.css
Last Updated : 08. 09. 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: 1400px;
--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: -1px;
--outline-width: 3px;
--spacing: 1rem;
--half-spacing: .5rem;
/* client color scheme */
--dark-amethyst: #280D1F;
--regal-plum:#37122B;
--ember-red:#F84033;
--pure-white:#fff;
--soft-umber:#F3F0F4;
--slate-clay:#EBE8ED;
--other-grey:#D2CFD4;
/*standard colors */
--error-color: var(--ember-red);
--warn-color: rgb(230 167 27);
--info-color: #5eb20a;
--help-color: var(--regal-plum);
--featured-color:var(--dark-amethyst);
--featured-alt-color:var(--ember-red);
--black: var(--dark-amethyst);
--white: var(--pure-white);
--off-white:var(--slate-clay);
--light-grey:var(--soft-umber);
--grey:var(--slate-clay);
--dark-grey:var(--other-grey);
/*Section colors */
--background-color: var(--white);
--top-bar-color: var(--dark-amethyst);
--top-bar-text-color: var(--white);
--top-bar-link-color: var(--white);
--top-panel-color: var(--white);
--center-panel-color: var(--white);
--main-panel-color: var(--white);
--footer-panel-color: var(--white);
--footer-panel-alt-color: var(--grey);
--bottom-panel-color: var(--regal-plum);
--bottom-panel-heading-color: var(--white);
--bottom-panel-text-color: var(--white);
--bottom-bar-color: var(--regal-plum);
--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:96px;
--large-heading-spacing: -5px;
--heading-font-size:48px;
--heading-spacing:0;
--sub-heading-font-size:18px;
--sub-heading-spacing:0;
--statement-font-size:20px;
--text-size:16px;
/* fonts */
--text-font: "Neurial Grotesk Regular", sans-serif;
--text-font-weight: 400;
--heading-font: "Neurial Grotesk Bold", sans-serif;
--heading-font-weight: 700;
--sub-heading-font: "Neurial Grotesk Medium", sans-serif;
--sub-heading-font-weight: 500;
--button-font: "Neurial Grotesk", sans-serif;
--button-font-weight: 400;
--font-awesome: "Font Awesome 6 Pro";
--font-size: 16px;
--navbar-dropdown-text: "Neurial Grotesk Regular", sans-serif;
--navbar-heading-font: "Neurial Grotesk Medium", sans-serif;
--navbar-font-weight: 500;
/* 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(--white);
--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(--ember-red);
/*Buttons */
--button-color: var(--regal-plum);
--button-border-color: var(--button-color);
--button-text-color: var(--white);
--button-alt-color: var(--ember-red);
--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(--ember-red);
--text-link-color-hover: var(--ember-red);
--text-link-color-focus: transparent;
--text-decoration: none;
--text-decoration-color: var(--ember-red);
/*swiffy nav options */
--swiffy-slider-nav: var(--featured-color);
--swiffy-slider-item-color: var(--grey);
--swiffy-slider-active-item-color: var(--featured-color);
/*svg backgrounds */
--emberbg:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221395%22%20height%3D%221219%22%20viewBox%3D%220%200%201395%201219%22%20fill%3D%22none%22%3E%0A%3Cpath%20d%3D%22M485.222%20485.343C353.656%20485.343%20245.786%20586.526%20235.587%20715.124C235.203%20719.975%20231.211%20723.809%20226.353%20723.809H10.5739C5.01151%20723.809%200.5%20728.306%200.5%20733.857V967.347C0.5%20972.897%205.01152%20977.394%2010.5739%20977.394H233.86C238.71%20977.394%20242.699%20981.218%20243.091%20986.06C253.624%201116.18%20362.847%201218.5%20496.031%201218.5H1384.43C1389.99%201218.5%201394.5%201214%201394.5%201208.45V974.963C1394.5%20969.412%201389.99%20964.915%201384.43%20964.915H263.847C258.834%20964.915%20254.773%20960.863%20254.773%20955.867V744.635C254.773%20739.639%20258.834%20735.587%20263.847%20735.587H1147.32C1152.88%20735.587%201157.39%20731.09%201157.39%20725.539V495.391C1157.39%20489.84%201152.88%20485.343%201147.32%20485.343H485.222ZM254.773%20485.135V263.133C254.773%20258.138%20258.834%20254.085%20263.847%20254.085H1384.42C1389.98%20254.085%201394.5%20249.588%201394.5%20244.038V10.5479C1394.5%204.99731%201389.98%200.5%201384.42%200.5H496.028C362.846%200.5%20253.625%20102.816%20243.087%20232.933C242.695%20237.775%20238.706%20241.598%20233.857%20241.598H10.5739C5.01151%20241.598%200.5%20246.095%200.5%20251.646V485.135C0.5%20490.686%205.0115%20495.183%2010.5739%20495.183H244.699C250.262%20495.183%20254.773%20490.686%20254.773%20485.135Z%22%20stroke%3D%22%23F53522%22%2F%3E%0A%3C%2Fsvg%3E");
--whitebg:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221395%22%20height%3D%221219%22%20viewBox%3D%220%200%201395%201219%22%20fill%3D%22none%22%3E%0A%3Cpath%20d%3D%22M485.222%20485.343C353.656%20485.343%20245.786%20586.526%20235.587%20715.124C235.203%20719.975%20231.211%20723.809%20226.353%20723.809H10.5739C5.01151%20723.809%200.5%20728.306%200.5%20733.857V967.347C0.5%20972.897%205.01152%20977.394%2010.5739%20977.394H233.86C238.71%20977.394%20242.699%20981.218%20243.091%20986.06C253.624%201116.18%20362.847%201218.5%20496.031%201218.5H1384.43C1389.99%201218.5%201394.5%201214%201394.5%201208.45V974.963C1394.5%20969.412%201389.99%20964.915%201384.43%20964.915H263.847C258.834%20964.915%20254.773%20960.863%20254.773%20955.867V744.635C254.773%20739.639%20258.834%20735.587%20263.847%20735.587H1147.32C1152.88%20735.587%201157.39%20731.09%201157.39%20725.539V495.391C1157.39%20489.84%201152.88%20485.343%201147.32%20485.343H485.222ZM254.773%20485.135V263.133C254.773%20258.138%20258.834%20254.085%20263.847%20254.085H1384.42C1389.98%20254.085%201394.5%20249.588%201394.5%20244.038V10.5479C1394.5%204.99731%201389.98%200.5%201384.42%200.5H496.028C362.846%200.5%20253.625%20102.816%20243.087%20232.933C242.695%20237.775%20238.706%20241.598%20233.857%20241.598H10.5739C5.01151%20241.598%200.5%20246.095%200.5%20251.646V485.135C0.5%20490.686%205.0115%20495.183%2010.5739%20495.183H244.699C250.262%20495.183%20254.773%20490.686%20254.773%20485.135Z%22%20stroke%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E");
}
/* -------------------------------------------------------------------------------------
=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.15;
margin: 0;
}
button,input {
overflow: visible;
}
button,select {
text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
padding: 0.35em 0.75em 0.625em;
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
progress {
vertical-align: baseline;
}
textarea {
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
details {
display: block;
}
summary {
display: list-item;
}
template {
display: none;
}
[hidden] {
display: none;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: var(--dark-grey);
opacity: 1;
/* Firefox */
}
:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: var(--dark-grey);
}
::-ms-input-placeholder {
/* Microsoft Edge */
color: var(--dark-grey);
}
/* -------------------------------------------------------------------------------------
=Page
------------------------------------------------------------------------------------- */
html {
-webkit-font-smoothing: antialiased
}
body {
background-color: var(--background-color);
font-family: var(--text-font);
-webkit-font-smoothing: antialiased;
/* Looks pretty much the same than Windows */
color: var(--text-color);
font-size: 16px;
}
/* -------------------------------------------------------------------------------------
=Typography
------------------------------------------------------------------------------------- */
/* Defaults
------------------------------------------------------- */
p {
--letter-spacing:-.5px;
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:large;
font-family:var(--sub-heading-font)
}
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 {
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, --black);
letter-spacing:var(--letter-spacing);
text-wrap:pretty;
}
h1 em,h2 em,h3 em,h4 em,h5 em,h6 em {
font-style: normal;
color:var(--ember-red)
}
h1 {
--letter-spacing:var(--large-heading-spacing);
--typography-spacing-vertical: 2rem;
line-height:1;
font-size: var(--large-heading-font-size, 2.5em);
text-align:center;
}
h2 {
--letter-spacing:-1px;
--typography-spacing-vertical: 2rem;
line-height:1;
font-size: var(--large-heading-font-size, 2em);
text-align:center;
}
h3 {
--letter-spacing:-1px;
--typography-spacing-vertical: 2rem;
line-height:1;
font-size: var(--heading-font-size, 1.5em);
}
h4 {
--letter-spacing:0px;
--typography-spacing-vertical: 1rem;
font-family:var(--sub-heading-font);
font-size: var(--statement-font-size, 1.25em);
}
h5 {
--letter-spacing:0px;
--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(--ember-red);
border-left:1px solid var(--ember-red);
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,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) #fff no-repeat right .5em center;
padding-right: 2em;
padding-left: .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
------------------------------------------------------- */
#pm .artp ul {
list-style-type: disc;
padding-inline-start: 2em;
margin-block-start: 1em;
margin-block-end: 1em;
font-size: 1em;
}
/*unsets for the above */
#pm .artp .swiffy-slider ul {
list-style-type:none;
padding-inline-start: 0em;
margin-block-start: 0em;
margin-block-end: 0em;
font-size: 1em;
}
#pm .artp ul ul,
#pm .artp ul ul ul {
margin-block-start: 0em;
margin-block-end: 0em;
}
#pm .artp ul li {
line-height:1.5
}
li::marker {
color: var(--ember-red);
}
#pm .artp ul.nobullets {
list-style-type: none;
margin: .5em 0;
}
#pm .artp ol {
list-style-type: decimal;
padding-inline-start: 2em;
margin-block-start: 1em;
margin-block-end: 1em;
}
#pm .artp ol li {}
#pm .artp ol ol,
#pm .artp ol ol ol {
margin-block-start: 0em;
margin-block-end: 0em;
}
#pm .artp a:hover {
text-decoration: underline;
text-decoration-color: var(--text-decoration-color);
}
/* Buttons
------------------------------------------------------- */
.submit,
.btn {
--button-border-color:var(--white);
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: var(--button-padding);
}
.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);
}
.ember{
--button-color:var(--ember-red);
--button-border-color:var(--button-color);
--button-text-color:var(--white);
}
.btn.ember:hover{
--button-hover-color:var(--white);
--button-hover-text-color:var(--ember-red);
--button-hover-border-color:var(--button-hover-text-color);
}
.plum{
--button-color:var(--regal-plum);
--button-text-color:var(--white);
--button-border-color:var(--button-text-color);
}
.dark{
--button-color:var(--dark-amethyst);
--button-text-color:var(--white);
--button-border-color:var(--button-text-color);
}
.light{
--button-color:var(--off-white);
--button-text-color:var(--black);
--button-border-color:var(--button-color);
}
.btn.light:hover{
--button-hover-color:var(--white);
--button-hover-text-color:var(--black);
--button-hover-border-color:var(--button-hover-text-color);
}
.white{
--button-color:var(--white);
--button-text-color:var(--black);
--button-border-color:var(--button-text-color);
}
/* iphone specific overrides */
textarea,
input.text,
input.inputtext,
input.inputtext_short,
.ui-widget select,
input[type="text"],
input[type="email"],
input[type="button"],
input[type="submit"],
input[type="image"],
input#searchbox,
.input-checkbox {
font-size: 16px;
font-weight: 400;
padding: var(--half-spacing);
width: auto;
border-width: 1px;
border-style: solid;
}
td a.btn {
display: block;
}
input.inputtext,
input.inputtext_light {
font-size: 1rem;
padding: var(--half-spacing);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
color: var(--text-color);
}
/* Tables
------------------------------------------------------- */
/* Headings
------------------------------------------------------- */
/* -------------------------------------------------------------------------------------
=Forms
------------------------------------------------------------------------------------- */
/* Defaults
------------------------------------------------------- */
/*hacks because we write the label out when not wanted, and the label has the required icon in it! */
.styledForm img[alt="Required"],
.styledForm li.req{
display:none;
}
.styledForm .inptext label{
display:none;
}
.styledForm li{
display:block;
margin-bottom:1rem;
}
.styledForm .inputtext {
box-sizing: border-box;
border-radius: 36px;
padding: 0px 0px 0px 16px;
height: 50px;
width:100%;
text-align: left;
color: rgb(55, 18, 43);
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 16px;
font-weight: 400;
letter-spacing: 0px;
background-color: rgb(255, 255, 255);
border: 1px solid rgb(255, 255, 255);
}
.styledForm .txtarea label{
margin:1em 0;
display:block;
font-size:1.2em;
font-weight:700;
}
.styledForm textarea.inputtext {
border-radius:16px;
padding:1em;
height:150px;
}
.styledForm .rbnlst label{
margin:1em 0;
display:block;
font-size:1.2em;
font-weight:700;
}
.styledForm ul.radio li{
display:inline-block;
margin:0;
margin-right:1em;
}
.styledForm ul.radio li label{
display:inline-block;
margin:0;
font-size:1em;
}
.styledForm ul.radio .inputtext{
width:unset;
height:unset;
margin-right:.5em;
}
.styledForm .formsubmit .submit{
width:100%;
height:54px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-weight: 700;
}
.exstreglnk,
.exstfgtpwd {}
.exstreglnk h5,
.exstfgtpwd h5{
font-family: var(--text-font);
font-weight: normal;
font-size: .825em;
}
/* -------------------------------------------------------------------------------------
=Grid Layout
------------------------------------------------------------------------------------- */
/*did have #pm but removed it ... */
.pmind {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: var(--spacing);
grid-row-gap:0;
/* grid-auto-flow: dense; */
/*don't put margin here*/
}
/*this would be avoided if we just wrote the content out in blocks
would be also better if we could add our own "blocks" for things to be in
you currently can't have a banner and an article side by side because of this */
.pmind .pbnr {
grid-column: 1/-1;
}
.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;
padding:2em 0;
}
.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%;
}
/*text over image defaults */
.toi{
padding:1em 0;
}
.toi h3{
font-size:1em;
}
/* responsive iframe - used in articles*/
.responsive-iframe {
width: 100%;
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*/
.card{
--bg-color:var(--li);
--text-color:var(--black);
color:var(--text-color, var(--black));
background-color:var(--bg-color, var(--white));
border-radius:1em;
padding:1em;
}
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;
}
.center{
text-align:center;
}
.plum{
background-color:var(--regal-plum);
color:var(--white);
}
.ember{
background-color:var(--ember-red);
color:var(--light-grey)
}
.ember .submit{
background-color:var(--regal-plum);
border-color:var(--regal-plum);
}
.offWhite{
background-color:var(--off-white);
}
.darkGrey{
background-color:var(--dark-grey);
}
.emberBg{
background-image:var(--emberbg);
background-size:cover;
background-repeat:no-repeat;
background-position:5em 1em;
}
.whiteBg{
background-image:var(--whitebg);
background-size:cover;
background-repeat:no-repeat;
background-position:5em 1em;
}
.rounded{
border-radius:var(--border-radius);
}
.inset{
margin:auto;
padding:4em 4em;
text-align:center;
grid-column:1/-1;
}
.paddedContent{
padding:4em 4em;
}
.header{
text-align:center;
}
/* Swiffy Sliders
------------------------------------------------------- */
.slider-trustedby{
--swiffy-slider-item-count: 6;
}
/* client specific classes
---------------------------------------------------------- */
/* Intro Block - Purple Background */
.intro{
padding:6em;
border-radius:2em;
display:grid;
grid-template-areas:"text image";
grid-template-columns:6fr 4fr;
grid-gap:5em;
}
.textBlockCtr{
text-align:center;
padding:4em 6em;
--font-size:20px;
}
/* card on left text on right */
.cardLeft{
max-width:var(--site-inner-width);
margin: 0 calc((var(--site-max-width) - var(--site-inner-width))/2);
display:grid;
grid-template-areas:
"image text";
grid-template-columns: calc(30% - 3em) calc(70% - 3em);
grid-column-gap: 6em;
align-items:center;
padding: 4em 0;
border-bottom:1px solid var(--dark-grey);
}
.cardLeft .imgcont{
grid-area:image;
background:var(--off-white);
border-radius:1em;
padding:2em;
text-align:left;
}
.cardLeft .imgcont h4{
margin-top:2em;
}
.cardLeft .imgcont img{
width:auto;
max-height:150px;
margin:0;
margin-right:auto;
}
/* card on right text on left */
.cardRight{
max-width:var(--site-inner-width);
margin: 0 calc((var(--site-max-width) - var(--site-inner-width))/2);
display:grid;
grid-template-areas:"text image";
grid-template-columns: calc(70% - 3em) calc(30% - 3em);
grid-column-gap: 6em;
align-items:center;
padding: 4em 0;
border-bottom:1px solid var(--dark-grey);
}
.cardRight .imgcont{
grid-area:image;
background:var(--off-white);
border-radius:1em;
padding:2em;
text-align:left;
}
.cardRight .imgcont h4{
margin-top:2em;
}
.cardRight .imgcont img{
width:auto;
max-height:150px;
margin:0;
margin-right:auto;
}
/* image on left text on right */
.imgLeft{
max-width:var(--site-inner-width);
margin: 0 calc((var(--site-max-width) - var(--site-inner-width))/2);
display:grid;
grid-template-areas:
"image text";
grid-template-columns: calc(40% - 3em) calc(60% - 3em);
grid-column-gap: 6em;
align-items:center;
padding: 4em 0;
border-bottom:1px solid var(--dark-grey);
}
.imgLeft .imgcont{
grid-area:image;
text-align:left;
}
.imgLeft .imgcont img{
width:auto;
margin:0;
margin-right:auto;
}
/* image on right text on left */
.imgRight{
max-width:var(--site-inner-width);
margin: 0 calc((var(--site-max-width) - var(--site-inner-width))/2);
display:grid;
grid-template-areas:"text image";
grid-template-columns: calc(60% - 3em) calc(40% - 3em);
grid-column-gap: 6em;
align-items:center;
padding: 4em 0;
border-bottom:1px solid var(--dark-grey);
}
.imgRight .imgcont{
grid-area:image;
text-align:left;
}
.imgRight .imgcont img{
width:auto;
margin:0;
margin-right:auto;
}
/* What our Clients Say */
.custQuote{
max-width:var(--site-max-width);
margin: 0 calc((var(--site-max-width) - var(--site-inner-width))/2);
padding: 2em 6em;
}
.custQuote h4{
font-weight:bold;
text-transform:uppercase;
}
.custQuote p{
font-size:43px;;
color:var(--ember-red)
}
.custQuote .imgcont{
display:grid;
grid-template-columns: 5em 1fr;
grid-template-areas:"image client";
grid-gap:1em;
grid-row-gap:0;
}
.quoteinfo a.img{
grid-area:image;
align-self:center;
margin:0;
}
.custQuote div.client{
grid-area:client;
align-self:center;
margin:0;
}
.custQuote .client h5{
margin:0;
font-weight:600;
}
.custQuote .client h6{
margin:0;
font-family:var(--text-font);
}
/* -------------------------------------------------------------------------------------
=SiteContainers
------------------------------------------------------------------------------------- */
#cont {
margin: auto;
}
#site {
background-color: var(--background-color);
background-image:linear-gradient(to bottom, var(--white), var(--off-white));
}
/* -------------------------------------------------------------------------------------
=FIXEDTop Panel #ptf
------------------------------------------------------------------------------------- */
#ptf {
top: 0px;
width: 100%;
background-color: var(--top-bar-color);
border-bottom: 2px var(--featured-alt-color) solid;
color: var(--featured-text-color);
text-align: center;
}
/* -------------------------------------------------------------------------------------
=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: 190px;
--demo-width:auto;
--nav-width:1fr;
/* 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)
var(--nav-width)
var(--demo-width)
var(--spacer-width);
grid-template-areas:
". logo nav demo .";
align-items: center;
position:relative;
}
#pt .ext>* {
min-width: 0;
}
/* defaults */
li.pipe{
display:none;
}
/* logo
------------------------------------------------------- */
#a137920512 {
grid-area: logo;
padding: 3em 0em;
}
/* client specific
------------------------------------------------------- */
/*demo link */
#p52527105{
grid-area:demo;
}
#p52527105 li{
list-style:none;
}
#p52527105 a{
display: inline-block;
vertical-align: middle;
font-size: var(--font-size);
font-family: var(--button-font);
font-weight: var(--button-font-weight);
text-align: center;
text-transform: capitalize;
background-color: var(--button-alt-color);
color: var(--button-text-color);
border: 1px solid var(--button-alt-color);
border-radius: var(--border-radius);
outline: none;
padding: var(--button-padding);
cursor: pointer;
}
#p52527105 a:hover{
--button-hover-color:var(--white);
--button-hover-text-color:var(--ember-red);
--button-hover-border-color:var(--button-hover-text-color);
text-decoration: none;
background-color: var(--button-hover-color);
color: var(--button-hover-text-color);
border: 1px solid var(--button-hover-border-color);
}
/* -------------------------------------------------------------------------------------
=Center Panel #pc
------------------------------------------------------------------------------------- */
#pc {
margin: auto;
display: flow-root;
text-align: center;
max-width:var(--site-max-width);
}
#p52527113{
padding:2em;
}
#pc .art{
padding:4em 0;
}
#pc h1{
overflow-wrap: break-word;
}
#pc h2{
line-height:var(--line-height);
font-size: var(--statement-font-size, 1.25em);
font-family:var(--sub-heading-font);
max-width:800px;
margin:1em auto;
}
#pc li{
display:inline-block;
margin:1em;
}
#pc p{
--font-size:20px;
--font-size:var(--statement-font-size);
padding:1em;
max-width:690px;
margin:auto;
}
/* -------------------------------------------------------------------------------------
=Main Panel #pmid
------------------------------------------------------------------------------------- */
#pmid {
width: 100%;
margin: auto;
/* background-color: var(--main-panel-color); */
/*used to ensure left panel displays correctly, unsure why though... */
display: flex;
justify-content: flex-start;
padding-top:1em;
}
/* filter search results?
------------------------------------------------------- */
#fs {
display: none;
}
/* full width panel
------------------------------------------------------- */
.pmfull {
margin: 0 auto;
position: relative;
/*padding should be put in media queries */
width: var(--site-max-width);
/* background-color: var(--main-panel-color); */
}
/* left panel - 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: var(--site-max-width);
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*/
}
/*Footer Articles - Design accomodates one with the exception for the home page #p52527111 */
#site:not(.home) #pf .arts .art{
max-width:var(--site-inner-width);
margin: 0 calc((var(--site-max-width) - var(--site-inner-width))/2);
text-align:center;
background-color:var(--regal-plum);
border-radius:2em;
padding: 10em 12em;
color:var(--white);
}
#site:not(.home) #pf .arts .art li{
display:inline-block;
margin:1em;
}
#site:not(.home)#pf .arts .art p{
font-family:var(--sub-heading-font);
margin:2em;
}
/* -------------------------------------------------------------------------------------
=Bottom Panel #pb
------------------------------------------------------------------------------------- */
#pb {
width: 100%;
margin: auto;
margin-top:4em;
--text-link-color:var(--white);
}
/* Info defaults
------------------------------------------------------- */
/* hide icons if present on info links */
#pb .info li.icon img {
display: none;
}
#pb .info h3 {
font-size: 1.5em;
text-transform: capitalize;
margin-bottom: 2.5rem;
color: var(--bottom-panel-heading-color);
}
#pb .info p {
color: var(--bottom-panel-text-color);
}
#pb .info ul {
padding: 0;
}
#pb .info li {
list-style: none;
font-size: 1em;
color: var(--bottom-panel-text-color);
padding: 0;
padding-bottom: .5em;
}
/* Article defaults
------------------------------------------------------- */
/* hide icons if present on info links */
#pb .art li.icon img {
display: none;
}
#pb .art h2 {
font-size: 1.5em;
text-transform: capitalize;
margin-bottom: 2.5rem;
color: var(--bottom-panel-heading-color);
}
#pb .info p {
color: var(--bottom-panel-text-color);
}
/* client specific
------------------------------------------------------- */
#pb .ext {
--logo-width:190px;
z-index:1;
background-color: var(--bottom-panel-color);
margin: 0 auto;
padding: 5em 0 ;
position: relative;
display: grid;
align-items: start;
grid-template-columns: var(--spacer-width) var(--logo-width) 1fr 1fr 1fr var(--spacer-width);
grid-template-areas:". logo . links social .";
color: var(--white);
border-top-right-radius:2em;
border-top-left-radius:2em;
}
#p52527107{
grid-area:logo;
}
#p52527108{
grid-area:links;
}
#a137854976{
grid-area:social;
text-align:right;
}
#a137854976 li{
display:inline-block;
border:1px rgba(255, 255, 255, 0.25) solid;
border-radius:2em;
width:4em;
height:4em;
margin:0 .5em;
align-content:center;
text-align:center;
}
/* -------------------------------------------------------------------------------------
=FIXEDBottom Panel #pbf
------------------------------------------------------------------------------------- */
#pbf {
background-color: var(--bottom-bar-color);
--font-size: 14px;
--text-link-color:var(--white);
}
#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(255, 255, 255, 0.25);
padding:1.5em
}
.etailcopy{
grid-area:copyright;
text-align:left;
}
.etailcopy .etail{
display:none;
}
.etailcopy p{
display:inline-block;
margin:0 .5rem;
}
#p52527110{
grid-area:links;
text-align:right;
}
#p52527110 li{
display:inline-block;
margin:0 .5rem;
font-size:var(--font-size);
}
/* -------------------------------------------------------------------------------------
=Sitemap
------------------------------------------------------------------------------------- */
#pm .smap ul {
list-style-position: inside;
list-style: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
}
#pm .smap ul li {}
/* First Level */
#pm .smap ul li {}
#pm .smap ul li a {
font-weight: var(--heading-font-weight);
font-size: 1.2em;
}
/* Second Level */
#pm .smap ul li ul {
grid-template-columns: 1fr;
}
#pm .smap ul li ul li {
width: 100%;
}
#pm .smap ul li ul li a {
font-weight: normal;
font-size: 1em;
}
/* Third Level */
#pm .smap ul li ul li ul li a {
font-weight: normal;
}
/* -------------------------------------------------------------------------------------
=Client Specific Stylings multi classes would make this cleaner
------------------------------------------------------------------------------------- */
/* home page
------------------------------------------------------- */
#prom-1448837120{}
/* Main Content
--------------------*/
/* video */
#a140804104{
}
#a140804104 iframe{
border-radius:1em;
}
/* Intro Block - Purple Background */
#a137854982{
padding:6em;
color:var(--white);
text-align:center;
border-radius:2em;
}
#a137854982 h3,h4,p{
grid-column:1/-1;
}
#a137854982 h4 {
font-family:var(--sub-heading-font);
max-width:645px;
margin:auto;
text-wrap: pretty;
}
#a137854982 .artp{
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: var(--spacing);
grid-auto-flow: dense;
}
#a137854982 a.btn{
grid-column:1/-1;
margin:auto;
}
#a137854982 .card{
display:grid;
grid-template-areas:"image"
"text";
text-align:left;
}
#a137854982 .card img{
width:auto;
margin:0;
margin-bottom:4em;
}
#a137854982 .card .imgcont{
grid-area:image;
}
#a137854982 .card .artp{
display:block;
grid-area:text;
border-top:1px solid var(--grey);
padding-top:1em;
}
#a137854982 .card h3{
font-size:18px;
margin:0;
}
#a137854982 .card p{
font-size:18px;
text-wrap: pretty;
font-family:var(--text-font);
margin-bottom:1em;
}
/* Footer Content
--------------------*/
#a137854979{
max-width:var(--site-max-width);
margin: 0 calc((var(--site-max-width) - var(--site-inner-width))/2);
text-align:center;
}
#a137854979 .artp{
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: var(--spacing);
grid-auto-flow: dense;
}
#a137854979 h3,h4,p{
grid-column:1/-1;
}
#a137854979 .card{
--bg-color:var(--dark-grey);
grid-column-gap:1em;
}
#a137854979 .card .artp{
display:grid;
grid-template-columns:auto;
grid-template-areas:"statement statement"
"img quote";
grid-column-gap:1em;
}
#a137854979 .card h3{
grid-area:statement;
text-align:left;
font-size:96px;
color:var(--ember-red);
margin-bottom:2rem;
}
#a137854979 .card small{
font-size:65%;
}
#a137854979 .card img{
grid-area:img;
}
#a137854979 .card p{
grid-area:quote;
}
/*trusted by ecommerce leaders */
#a137854978{
text-align:center;
}
#a137854978 p{
font-family:var(--sub-heading-font);
}
#a137854978 blockquote{
color:var(--black);
border:none;
padding-left:0em;
margin-left:0em;
}
#a137854978 blockquote footer{
font-family:var(--sub-heading-font);
color:var(--black)
}
/*lets build something scaleable */
#a137854977{
max-width:var(--site-inner-width);
margin: 0 calc((var(--site-max-width) - var(--site-inner-width))/2);
text-align:center;
border-radius:2em;
padding: 6em 4em;
}
#a137854977 li{
display:inline-block;
margin:1em;
}
#a137854977 p{
font-family:var(--sub-heading-font);
margin:2em;
}
#a137854977 .klaviyo-form{
max-width:85%;
margin:auto;
}
/* eCommerce Websites
------------------------------------------------------- */
/* Main Content
--------------------*/
/* B2B Websites
------------------------------------------------------- */
/* Main Content
--------------------*/
/* Trusted By */
#a140247041{
padding:4em 6em;
text-align:center;
}
#a140247041 li{
line-height:1;
align-items:center;
align-content:center;
}
#a138510341 .slidecont picture,
#a138510341 .slidecont{
align-content:center;
align-items:center;
height:100%;
}
#a140247041 .slider-indicators{
display:none;
}
/* B2C Websites
------------------------------------------------------- */
/* Main Content
--------------------*/
/* Intro Block - Purple Background
#a140181520{
background-color:var(--regal-plum);
padding:6em;
color:var(--white);
border-radius:2em;
display:grid;
grid-template-areas:"text image";
grid-template-columns:6fr 4fr;
grid-gap:5em;
}*/
/* Trusted By */
#a140247044{
padding:4em 6em;
text-align:center;
}
#a140247044 li{
line-height:1;
align-items:center;
align-content:center;
}
#a140247044 .slidecont picture,
#a140247044 .slidecont{
align-content:center;
align-items:center;
height:100%;
}
#a140247044 .slider-indicators{
display:none;
}
/* Success Stories
------------------------------------------------------- */
/* Main Content
--------------------*/
/* Intro Block - Purple Background */
#a140181521{
background-color:var(--regal-plum);
padding:6em;
color:var(--white);
border-radius:2em;
display:grid;
grid-template-areas:"text image";
grid-template-columns:6fr 4fr;
grid-gap:5em;
}
/* Inventory Management
------------------------------------------------------- */
/* Main Content
--------------------*/
/* Success Stories */
#a140247049{
max-width:var(--site-max-width);
margin: 0 calc((var(--site-max-width) - var(--site-inner-width))/2);
text-align:center;
padding:4em 0;
}
#a140247049 .artp{
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: var(--spacing);
grid-auto-flow: dense;
}
#a140247049 h3,h4,p{
grid-column:1/-1;
}
#a140247049 .card{
--bg-color:var(--white);
border:1px solid var(--dark-grey);
grid-column-gap:1em;
}
#a140247049 .card .artp{
display:grid;
grid-template-columns:auto;
grid-template-areas:"statement"
"quote";
grid-column-gap:1em;
padding:1em;
}
#a140247049 .card h3{
grid-area:statement;
text-align:center;
font-size:96px;
color:var(--black);
margin-bottom:1.5rem;
padding-bottom:1.5rem;
border-bottom:1px solid var(--dark-grey);
}
#a140247049 .card small{
font-size:65%;
}
#a140247049 .card img{
grid-area:img;
}
#a140247049 .card p{
grid-area:quote;
}
/* Integrations
------------------------------------------------------- */
#prom-1437073408{
grid-gap:6em;
}
/* Main Content
--------------------*/
/* Intro Block - Purple Background */
#a140181523{
background-color:var(--regal-plum);
padding:6em;
color:var(--white);
border-radius:2em;
display:grid;
grid-template-columns:1fr 1fr 1fr 1fr;
grid-gap:5em;
}
#a140181523 .artp {
grid-column:auto/span 2
}
#prom-1437073408 .fullWidth{
padding:4em 0
}
#prom-1437073408 .fullWidth h3{
text-align:center;
}
/* About Us page
------------------------------------------------------- */
/*The Future of eCommerce. */
#a137920513{
padding:4em 0;
}
#a137920513 h1{
overflow-wrap: break-word;
}
#a137920513 h2{
line-height:var(--line-height);
font-family:var(--sub-heading-font);
font-size: var(--statement-font-size, 1.25em);
max-width:800px;
margin:1em auto;
}
#a137920513 li{
display:inline-block;
margin:1em;
}
/*Our Story */
#a137920514{
background-color:var(--regal-plum);
padding:6em;
color:var(--white);
border-radius:2em;
display:grid;
grid-template-areas:"text image";
grid-template-columns:6fr 4fr;
grid-gap:5em;
}
/*our vision */
#a137920515{
margin-left: calc((var(--site-max-width) - var(--site-inner-width))/2);
padding:4em 0;
}
/*What Sets us Apart */
#a137920518{
margin-right: calc((var(--site-max-width) - var(--site-inner-width))/2);
padding:4em 0;
}
/*Milestones and Achievements */
#a137920516{
max-width:var(--site-inner-width);
margin: 0 calc((var(--site-max-width) - var(--site-inner-width))/2);
display:grid;
grid-template-areas:"text image";
grid-template-columns:60% 40%;
align-items:center;
padding:4em 0;
}
#a137920516 .artp{
grid-area:text;
}
#a137920516 .imgcont{
grid-area:image;
}
#a137920516 .imgcont img{
max-width:314px;
}
/* Contact
------------------------------------------------------- */
/* Main Content
--------------------*/
/* Intro Block - Purple Background */
/*the contact form needs an id writing out*/
g-recaptcha {
text-align: center;
display: block;
margin-left:0;
margin: auto;
align-items:center;
align-content:center;
}
/* Request a Demo Us page
------------------------------------------------------- */
#prom-1446084606{}
/* cookie yes overrides */
.cky-audit-table-element h3{
--letter-spacing:0px;
--typography-spacing-vertical: 1rem;
font-family:var(--sub-heading-font);
font-size: var(--statement-font-size, 1.25em);
}
/* ------------------------------------------------------------------------------------
SCREEN - v6 nav 2025
Filename : nav.css
Last Updated : 26. 08. 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;
background-color:var(--navbar-menu-button-color);
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;
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;
}
ul.nav>li>a:only-child {
padding: 0 1em 0 1em;
}
@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);
/*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);
font-weight:600;
}
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);
padding:0 1em;
z-index:1001;
text-align:left;
background: var(--navbar-dropdown-color);
}
ul.nav>li>ul.l2 a,
ul.nav>li>.menu-drop-down a{
line-height:2;
color:var(--black);
font-family:var(--heading-font;)
}
ul.nav>li>ul.l2 li:hover {}
/* 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>ul>li>ul.l3{
background: var(--navbar-dropdown-color);
background-color:var(--white);
border-radius:1em;
border:1px rgba(155, 168, 174, 0.25) solid;
padding:1em;
}
ul.nav>li.over>ul>li>ul.l3,
ul.nav>li.popl>ul>li>ul.l3{
left: auto;
right: var(--navbar-dropdown-width);
background: var(--navbar-dropdown-color);
background-color:var(--white);
border-radius:1em;
border:1px rgba(155, 168, 174, 0.25) solid;
padding:1em;
}
ul.nav>li.over>ul>li>ul.l3 a,
ul.nav>li>.menu-drop-down a{
line-height:2;
}
/* -------------------------------------------------------------------------------------
=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);
background:var(--white);
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);
color:var(--text-color)
}
.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;
text-align:left;
}
.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);
line-height:2;
/* 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 h2{
}
.mega-menu-classic .deptarticle p{
/* margin:0; */
text-transform:capitalize;
line-height:1.5
}
.mega-menu-classic .deptarticle p:last-child{
margin-bottom:0;
}
.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(--black);
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;
text-align:left;
}
/* -------------------------------------------------------------------------------------
=Top Nav
------------------------------------------------------------------------------------- */
#pt div.nav-wrapper>ul.nav {
position: absolute;
width: 100%;
background-color:var(--white);
text-align:left;
margin-top:0em;
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;
margin-left:1em;
}
/* 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;
font-weight:400;
}
/* classic
------------------------------------------------------- */
.classic{}
.classic li.l2{
float: none;
display:grid;
grid-template-areas:"toggle title"
". dropdown";
grid-template-columns:50px 1fr;
}
.classic li.l2 > div{
grid-area:dropdown;
grid-row:1;
}
ul.nav>li>ul.l2 li:hover {
background: var(--white);
color:var(--navbar-active-text-color);
}
.nav .classic .deptlink:after{
display:none;
content: "";
}
/* Mega Menu - Clasic with article
------------------------------------------------------- */
.mega-menu-classic:has(.deptarticle) div.menu-grid .menu-row,
.mega-menu-classic:has(.deptarticle) div.menu-grid-lined .menu-row {
display:grid;
padding:0em;
grid-template-columns:1fr;
grid-gap:0rem;
margin-bottom: 0rem;
text-align:left;
}
.mega-menu-classic:has(.deptarticle) .menu-grid > .menu-row ul.l2 a.txt{
font-family:var(--text-font);
color:var(--text-color);
line-height:2;
/* font-weight:700; */
}
.mega-menu-classic .deptarticle{
display:none;
}
/* 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;
padding: 0 1em 0 4em;
grid-template-columns:repeat(1,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;
padding: 0 1em 0 0em;
}
ul.nav>li>a:only-child {
padding: 0 1em 0 0em;
}
/* 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;
border:none;
background-color:var(--white);
}
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: 64px;
height: 64px;
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(--white);
width:50%;
pointer-events:none;
}
/* top and bottom bits of the x */
.c-hamburger span::before,
.c-hamburger span::after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 3px;
background-color: var(--white);
content: "";
}
.c-hamburger span::before {
top: -9px;
}
.c-hamburger span::after {
bottom: -9px;
}
/**
* 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);
}
}
/* ------------------------------------------------------------------------------------
SCREEN - Extra extra large devices (large laptops and desktops, 1400px and up)
Last Updated : 07. 10. 2024
Copyright :(c) 2023 Etail Systems Ltd
Author : Etail Systems Ltd
------------------------------------------------------------------------------------- */
@media only screen and (min-width: 1400px) {
:root{
--site-max-width:1400px;
--menu-max-width:1400px;
}
}
/* ------------------------------------------------------------------------------------
SCREEN - Extra large devices (large laptops and desktops, 1200px and up)
Last Updated : 07. 10. 2024
Copyright :(c) 2023 Etail Systems Ltd
Author : Etail Systems Ltd
------------------------------------------------------------------------------------- */
@media only screen and (min-width: 1200px) and (max-width:1399px) {
:root{
--site-max-width:1200px;
}
}
/* ------------------------------------------------------------------------------------
SCREEN - Large devices (laptops/desktops, 992px and up)
Last Updated : 07. 10. 2024
Copyright :(c) 2024 Etail Systems Ltd
Author : Etail Systems Ltd
------------------------------------------------------------------------------------- */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
:root{
--site-max-width:100%;
--site-inner-width:calc(100% - 4em);
}
/* -------------------------------------------------------------------------------------
=SiteContainers
------------------------------------------------------------------------------------- */
#cont {
margin: auto;
}
#site {}
/* -------------------------------------------------------------------------------------
=Grid Layout
------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------
=FIXEDTop Panel #ptf
------------------------------------------------------------------------------------- */
#ptf{}
/* -------------------------------------------------------------------------------------
=Top Panel #pt
------------------------------------------------------------------------------------- */
#pt .ext {
--spacer-width:25px;
}
/* -------------------------------------------------------------------------------------
=Center Panel #pc
------------------------------------------------------------------------------------- */
#pc{}
/* -------------------------------------------------------------------------------------
=Left Panel #pl
------------------------------------------------------------------------------------- */
#pl {}
/* -------------------------------------------------------------------------------------
=Right Panel #pr
------------------------------------------------------------------------------------- */
#pr {}
/* -------------------------------------------------------------------------------------
=Main Panel #pmid
------------------------------------------------------------------------------------- */
#pmid{}
/* -------------------------------------------------------------------------------------
=Footer Panel #pf
------------------------------------------------------------------------------------- */
#pf{}
#pf .ext {}
/* -------------------------------------------------------------------------------------
=Bottom Panel #pb
------------------------------------------------------------------------------------- */
#pb{}
#pb .ext {}
/* -------------------------------------------------------------------------------------
=FIXEDBottom Panel #pbf
------------------------------------------------------------------------------------- */
#pbf{}
/* -------------------------------------------------------------------------------------
=Client Specific Stylings
------------------------------------------------------------------------------------- */
/* home page
------------------------------------------------------- */
#a137854982 .card{
grid-column:auto/span 6;
grid-template-areas:"image text";
grid-template-columns:150px 1fr;
align-items:center;
}
#a137854982 .card .imgcont{
margin-right:1em;
}
#a137854982 .card img{
margin:0;
padding-right:1em;
}
#a137854982 .card .artp{
border-top:none;
border-left:1px solid var(--grey);
padding-left:1em;
height:100%;
align-content:center;
}
#a137854982 .card h3{
font-size:16px;
}
#a137854982 .card p{
font-size:16px;
}
}
/* ------------------------------------------------------------------------------------
SCREEN - Tablet devices (landscape tablets, 768px and up)
Last Updated : 01. 12. 2024
Copyright :(c) 2023 Etail Systems Ltd
Author : Etail Systems Ltd
------------------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 992px) {
:root{
--site-max-width:100%;
--site-inner-width:calc(100% - 6em);
/* font-sizes */
--large-heading-font-size:48px;
--large-heading-spacing:-3px;
--heading-font-size:40px;
--heading-spacing:0;
--sub-heading-font-size:40px;
--sub-heading-spacing:0;
--statement-font-size:18px;
--text-size:16px;
}
/* -------------------------------------------------------------------------------------
=SiteContainers
------------------------------------------------------------------------------------- */
#cont {
margin: auto;
}
#site {}
/* -------------------------------------------------------------------------------------
=Grid Layout
------------------------------------------------------------------------------------- */
/* layout base classes
------------------------------------------------------- */
.fullWidth {
grid-column: 1/-1;
}
.halfWidth{
grid-column: 1/-1;
}
.quarterWidth {
grid-column: auto / span 6;
}
.thirdWidth {
grid-column: 1/-1
}
.twoThirdWidth {
grid-column: 1/-1;
}
/* -------------------------------------------------------------------------------------
=FIXEDTop Panel #ptf
------------------------------------------------------------------------------------- */
#ptf{}
/* -------------------------------------------------------------------------------------
=Top Panel #pt
------------------------------------------------------------------------------------- */
#pt .ext {
--logo-width: 190px;
--demo-width:auto;
--nav-width:auto;
grid-template-columns:
25px
var(--nav-width)
1fr
var(--logo-width)
1fr
var(--demo-width)
25px;
grid-template-areas:
". nav-start . logo . demo ."
"nav nav nav nav nav nav nav";
align-items: center;
/* padding:0 1em; */
}
#p52527105 a{
--font-size:.825em;
}
/* -------------------------------------------------------------------------------------
=Center Panel #pc
------------------------------------------------------------------------------------- */
#pc{}
/* -------------------------------------------------------------------------------------
=Left Panel #pl
------------------------------------------------------------------------------------- */
#pl {}
/* -------------------------------------------------------------------------------------
=Right Panel #pr
------------------------------------------------------------------------------------- */
#pr {}
/* -------------------------------------------------------------------------------------
=Main Panel #pmid
------------------------------------------------------------------------------------- */
#pmid{}
/* -------------------------------------------------------------------------------------
=Footer Panel #pf
------------------------------------------------------------------------------------- */
#pf{}
#pf .ext {}
/* -------------------------------------------------------------------------------------
=Bottom Panel #pb
------------------------------------------------------------------------------------- */
#pb{}
#pb .ext {}
/* -------------------------------------------------------------------------------------
=FIXEDBottom Panel #pbf
------------------------------------------------------------------------------------- */
#pbf{}
/* -------------------------------------------------------------------------------------
=Client Specific Stylings
------------------------------------------------------------------------------------- */
/* home page
------------------------------------------------------- */
/*smarter ecommerce */
#p52527113{
padding:3em 1em;
}
#a137854987{
padding:4em 0;
}
/*powering the future of ecommerce */
#a137854982{
padding:6em 2em;
}
#a137854982 h3,
#a137854982 h4,
#a137854982 p{
}
#a137854982 h3{
text-wrap:balance;
line-height:1;
}
#a137854982 h4 {
font-family:var(--sub-heading-font);
margin:auto;
text-wrap: pretty;
}
#a137854982 .card{
grid-column:1/-1;
grid-template-areas:"image text";
grid-template-columns:150px 1fr;
align-items:center;
}
#a137854982 .card .imgcont{
margin-right:1em;
}
#a137854982 .card img{
margin:0;
padding-right:1em;
}
#a137854982 .card .artp{
border-top:none;
border-left:1px solid var(--grey);
padding-left:1em;
height:100%;
align-content:center;
}
#a137854982 .card h3{
font-size:16px;
}
#a137854982 .card p{
font-size:16px;
}
/* real business real growth */
#a137854979{
margin: 0 1em;
}
#a137854979 h3{
line-height:1;
}
/*trusted by ecommerce leaders */
#a137854978{}
/*lets build something scaleable */
#a137854977{
background-position:1em 1em;
}
/* About Us page
------------------------------------------------------- */
/*Our Story */
#a137920514{
align-items:center;
}
/*our vision */
#a137920515{
margin:0 1em;
}
/*What Sets us Apart */
#a137920518{
margin:0 1em;
}
/*Milestones and Achievements */
#a137920516{
grid-template-areas:"text"
"image";
grid-template-columns:1fr;
margin:0 1em;
}
#a137920517{
margin:0 1em;
}
}
/* ------------------------------------------------------------------------------------
SCREEN - mobile (phones, 768px and down)
Last Updated : 26. 08. 2025
Copyright :(c) 2023 Etail Systems Ltd
Author : Etail Systems Ltd
screen and (max-width:768px)
------------------------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
/* -------------------------------------------------------------------------------------
=Definitions
------------------------------------------------------------------------------------- */
:root{
--site-max-width:100%;
--site-inner-width:calc(100% - 3em);
/* font-sizes */
--large-heading-font-size:48px;
--large-heading-spacing:-3px;
--heading-font-size:40px;
--heading-spacing:0;
--sub-heading-font-size:40px;
--sub-heading-spacing:0;
--statement-font-size:18px;
--text-size:16px;
}
/* -------------------------------------------------------------------------------------
=Typography
------------------------------------------------------------------------------------- */
/* Defaults
------------------------------------------------------- */
h1, h2, h3, h4{
text-align:left;
}
/* -------------------------------------------------------------------------------------
=Grid Layout
------------------------------------------------------------------------------------- */
/* layout base classes
------------------------------------------------------- */
.fullWidth {
grid-column: 1/-1;
}
.titleArticle{
grid-column:1/-1;
text-align:center;
}
.halfWidth{
grid-column: 1/-1;
}
.halfWidthDbl {
grid-column: auto / span 6;
grid-row: span 1;
grid-column: 1/-1
}
.quarterWidth {
grid-column: auto / span 6;
}
.thirdWidth {
grid-column: 1/-1
}
.twoThirdWidth {
grid-column: 1/-1;
}
/* client specific classes
---------------------------------------------------------- */
/* Intro Block - Purple Background */
.intro{
padding: 2em 1em;
grid-template-areas:
"text"
"image";
grid-template-columns:1fr;
}
/* card on left text on right */
.cardLeft{
grid-template-areas:
"text"
"image";
grid-template-columns: 1fr;
grid-column-gap: 0em;
align-items:center;
padding: 4em 0;
}
.cardLeft .imgcont img{
width:auto;
margin:auto;
max-width:50%;
}
/* card on left text on right */
.cardRight{
grid-template-areas:"text image";
grid-template-areas:
"text"
"image";
grid-template-columns: 1fr;
}
.cardRight .imgcont img{
width:auto;
margin:0;
margin:auto;
max-width:50%;
}
.quoteinfo{
display:grid;
grid-template-columns: 5em 1fr;
grid-template-areas:"image name"
"image title";
grid-gap:1em;
grid-row-gap:0;
}
.quoteinfo p{
grid-area:image;
align-self:center;
margin:0;
}
.quoteinfo h5{
grid-area:name;
align-self:end;
margin:0;
font-weight:600;
}
.quoteinfo h6{
grid-area:title;
align-self:start;
margin:0;
font-family:var(--text-font);
}
/* -------------------------------------------------------------------------------------
=SiteContainers
------------------------------------------------------------------------------------- */
#cont {
margin: auto;
}
#site {}
/* -------------------------------------------------------------------------------------
=FIXEDTop Panel #ptf
------------------------------------------------------------------------------------- */
#ptf{}
/* -------------------------------------------------------------------------------------
=Top Panel #pt
------------------------------------------------------------------------------------- */
#pt .ext {
--logo-width: 190px;
--demo-width:auto;
--nav-width:auto;
grid-template-columns:
25px
var(--logo-width)
1fr
var(--nav-width)
25px;
grid-template-areas:
". logo . nav-start ."
"nav nav nav nav nav";
align-items: center;
/* padding:0 1em; */
}
/*demo link */
#p52527105{
display:none;
}
/* -------------------------------------------------------------------------------------
=Center Panel #pc
------------------------------------------------------------------------------------- */
#pc{}
/* -------------------------------------------------------------------------------------
=Left Panel #pl
------------------------------------------------------------------------------------- */
#pl {
width: calc(var(--site-max-width) - 2rem);
margin:0 1rem;
}
/* -------------------------------------------------------------------------------------
=Right Panel #pr
------------------------------------------------------------------------------------- */
#pr {
width: calc(var(--site-max-width) - 2rem);
margin:0 1rem;
}
/* -------------------------------------------------------------------------------------
=Main Panel #pmid
------------------------------------------------------------------------------------- */
#pmid{}
.pmfull,
.pmstd{
width: var(--site-max-width)
}
.pmwide{
width: calc(var(--site-max-width) - 2rem);
margin:0 1rem;
}
.pmwide #sr {
grid-template-columns: repeat(2, 1fr);
}
/* -------------------------------------------------------------------------------------
=Footer Panel #pf
------------------------------------------------------------------------------------- */
#pf{}
#pf .ext {}
/*Footer Articles - Design accomodates one with the exception for the home page #p52527111 */
#site:not(.home) #pf .arts .art{
max-width:var(--site-inner-width);
margin: 0 1em;
text-align:center;
border-radius:2em;
padding: 2em;
}
#site:not(.home) #pf .arts .art li{
display:inline-block;
margin:1em;
}
#site:not(.home)#pf .arts .art p{
font-family:var(--sub-heading-font);
}
/* -------------------------------------------------------------------------------------
=Bottom Panel #pb
------------------------------------------------------------------------------------- */
#pb{
margin-top:2em;
}
#pb .ext {
grid-template-columns: 1em 1fr 1em;
grid-row-gap:4em;
grid-template-areas:". logo ."
". links . "
". social .";
}
#pb .ext img{
margin:0;
}
/* -------------------------------------------------------------------------------------
=FIXEDBottom Panel #pbf
------------------------------------------------------------------------------------- */
#pbf .ext {
grid-template-areas:"links"
"copyright";
grid-template-columns: 1fr;
border-top:1px solid rgba(255, 255, 255, 0.25);
padding:1em 0;
margin:0 1em;
}
#a137854976{
grid-area:social;
margin-bottom: -1em;
}
.etailcopy{
grid-area:copyright;
text-align:left;
padding-top:1em;
margin-top:1em;
border-top:1px solid rgba(255, 255, 255, 0.25);
}
.etailcopy p{
display:block;
margin:0;
}
#p52527110{
grid-area:links;
text-align:left;
}
#p52527110 li{
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 multi classes would make this cleaner
------------------------------------------------------------------------------------- */
/* home page
------------------------------------------------------- */
/* Main Content
--------------------*/
/* Intro Block - Purple Background */
#a137854982{
padding:4em 2em;
border-radius:2em;
}
#a137854982 .card{
grid-column:1/-1;
}
/*lets build something scaleable */
#a137854977{
padding:4em 2em;
margin:0 1em;
}
/* eCommerce Websites
------------------------------------------------------- */
/* Main Content
--------------------*/
/* What our Clients Say */
#a137920523{
padding:4em 0em;
}
#a137920523 h4{
font-weight:bold;
text-transform:uppercase;
}
#a137920523 p{
font-size: 30px;
color:var(--ember-red)
}
/* B2B Websites
------------------------------------------------------- */
/* Main Content
--------------------*/
/* Intro Block - Purple Background */
#a140181509{
background-color:var(--regal-plum);
padding:6em;
color:var(--white);
border-radius:2em;
display:grid;
grid-template-areas:"text image";
grid-template-columns:6fr 4fr;
grid-gap:5em;
}
/* Trusted By */
#a140247041{
padding:4em 6em;
text-align:center;
}
#a140247041 li{
line-height:1;
align-items:center;
align-content:center;
}
#a138510341 .slidecont picture,
#a138510341 .slidecont{
align-content:center;
align-items:center;
height:100%;
}
#a140247041 .slider-indicators{
display:none;
}
/* B2C Websites
------------------------------------------------------- */
/* Main Content
--------------------*/
/* Intro Block - Purple Background */
#a140181520{
background-color:var(--regal-plum);
padding:6em;
color:var(--white);
border-radius:2em;
display:grid;
grid-template-areas:"text image";
grid-template-columns:6fr 4fr;
grid-gap:5em;
}
/* Trusted By */
#a140247044{
padding:4em 6em;
text-align:center;
}
#a140247044 li{
line-height:1;
align-items:center;
align-content:center;
}
#a140247044 .slidecont picture,
#a140247044 .slidecont{
align-content:center;
align-items:center;
height:100%;
}
#a140247044 .slider-indicators{
display:none;
}
/* Success Stories
------------------------------------------------------- */
/* Main Content
--------------------*/
/* Intro Block - Purple Background */
#a140181521{
background-color:var(--regal-plum);
padding:6em;
color:var(--white);
border-radius:2em;
display:grid;
grid-template-areas:"text image";
grid-template-columns:6fr 4fr;
grid-gap:5em;
}
/* Inventory Management
------------------------------------------------------- */
/* Main Content
--------------------*/
/* Intro Block - Purple Background */
#a140181522{
background-color:var(--regal-plum);
padding:2em;
grid-template-areas:"text"
"image";
grid-template-columns:1fr;
grid-gap:5em;
}
/* Success Stories */
#a140247049{
max-width:var(--site-max-width);
margin: 0 calc((var(--site-max-width) - var(--site-inner-width))/2);
text-align:center;
padding:4em 0;
}
#a140247049 .artp{
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: var(--spacing);
grid-auto-flow: dense;
}
#a140247049 h3,h4,p{
grid-column:1/-1;
}
#a140247049 .card{
--bg-color:var(--dark-grey);
grid-column-gap:1em;
background-image:var(--whitebg);
background-size:cover;
background-repeat:no-repeat;
background-position:5em 0;
}
#a140247049 .card .artp{
display:grid;
grid-template-columns:auto;
grid-template-areas:"statement statement"
"img quote";
grid-column-gap:1em;
}
#a140247049 .card h3{
grid-area:statement;
text-align:left;
font-size:96px;
color:var(--ember-red);
margin-bottom:2rem;
}
#a140247049 .card small{
font-size:65%;
}
#a140247049 .card img{
grid-area:img;
}
#a140247049 .card p{
grid-area:quote;
}
/* Integrations
------------------------------------------------------- */
#prom-1437073408{
grid-gap:1em;
/* grid-row-gap:0; */
}
/* Main Content
--------------------*/
/* Intro Block - Purple Background */
#a140181523{
background-color:var(--regal-plum);
padding:4em 2em;
grid-template-columns:1fr 1fr;
grid-gap: 1em;
}
#a140181523 .artp {
grid-column:auto/span 2
}
#prom-1437073408 .fullWidth{
padding:4em 1em;
}
#prom-1437073408 .thirdWidth{
padding:0 1em;
}
#prom-1437073408 .fullWidth h3{
text-align:center;
}
/* About Us page
------------------------------------------------------- */
/*The Future of eCommerce. */
#a137920513{
padding:4em 0;
}
#a137920513 h1{
overflow-wrap: break-word;
}
#a137920513 h2{
line-height:var(--line-height);
font-family:var(--sub-heading-font);
font-size: var(--statement-font-size, 1.25em);
max-width:800px;
margin:1em auto;
}
#a137920513 li{
display:inline-block;
margin:1em;
}
/*Our Story */
#a137920514{
background-color:var(--regal-plum);
padding:6em;
color:var(--white);
border-radius:2em;
display:grid;
grid-template-areas:"text image";
grid-template-columns:6fr 4fr;
grid-gap:5em;
}
/*our vision */
#a137920515{
margin-left: calc((var(--site-max-width) - var(--site-inner-width))/2);
padding:4em 0;
}
/*What Sets us Apart */
#a137920518{
margin-right: calc((var(--site-max-width) - var(--site-inner-width))/2);
padding:4em 0;
}
/*Milestones and Achievements */
#a137920516{
max-width:var(--site-inner-width);
margin: 0 calc((var(--site-max-width) - var(--site-inner-width))/2);
display:grid;
grid-template-areas:"text image";
grid-template-columns:60% 40%;
align-items:center;
padding:4em 0;
}
#a137920516 .artp{
grid-area:text;
}
#a137920516 .imgcont{
grid-area:image;
}
#a137920516 .imgcont img{
max-width:314px;
}
/* Contact
------------------------------------------------------- */
/* Main Content
--------------------*/
/* Intro Block - Purple Background */
/*the contact form needs an id writing out*/
.contactForm{
margin:auto;
padding:4em 0;
text-align:center;
grid-column:1/-1;
max-width:360px;
}
.contactForm li{
list-style:none;
margin-bottom:1em;
text-align:left;
}
.contactForm li.formsubmit{
text-align:center;
}
.contactForm input{
max-width:100%;
}
.contactForm .g-recaptcha {
text-align: center;
display: block;
margin-left:0;
margin: auto;
align-items:center;
align-content:center;
}
}
/* -------------------------------------------------------------------------------------
=Blog
------------------------------------------------------------------------------------- */
.page_blog #pm{
display:grid;
grid-template-areas:
"header header"
"blogs nav";
grid-template-columns:8fr 2fr;
grid-template-rows:auto 1fr;
justify-content:end;
/* grid-column-gap:3em; */
grid-auto-flow:column dense;
}
.page_blog #pm .deptHeader{
grid-area:header;
}
.page_blog .blogs,
.page_blog .blog{
display: grid;
grid-area:blogs;
grid-template-columns: repeat(3, 1fr);
grid-gap: var(--spacing);
/* grid-auto-flow: dense; */
/* grid-auto-rows: min-content; */
}
/* Blog previews
------------------------------------------------------- */
.page_blog .blogs .blog{
border-radius:var(--border-radius);
display:grid;
grid-template-columns:1fr;
grid-template-areas:"image"
"title"
"intro"
"date"
"readmore";
background-color:var(--dark-grey);
padding:1em;
align-content:start;
grid-area:unset;
}
.page_blog .blogs .blog:nth-child(2n){
background-color:var(--ember-red);
color:var(--text-color);
}
.page_blog .blogs .blog a.img{
grid-area:image;
}
.page_blog .blogs .blog a.title{
grid-area:title;
font-family:var(--heading-font);
color:inherit;
}
.page_blog .blogs .blog p.date{
grid-area:date;
text-align:center;
}
.page_blog .blogs .blog a.more{
grid-area:readmore;
margin:auto;
padding:.5rem 2rem;
color:inherit;
}
.page_blog .blogs .blog .artp{
grid-area:intro;
}
/* Blog preview nav
------------------------------------------------------- */
.blognav{
display:grid;
grid-template-columns:1fr;
grid-template-rows:auto auto 1fr;
grid-gap:1em;
grid-area:nav;
align-self:start;
padding-left:3em;
}
.blognav h3{
font-size:1.5em;
}
.blognav li{
list-style:none;
margin-bottom:.5em;
}
.blognav .search{
margin-bottom:2em;
}
.blognav .search form {
margin:auto;
background-color:var(--white);
border-radius:var(--border-radius);
border-color:var(--text-color);
border:1px solid var(--text-color);
}
.blognav .search input {
display: inline-block;
vertical-align:middle
}
.blognav .search input#searchbox {
height: 48.2px;
width: calc(100% - 3rem);
/* max-width: 75%; */
background-color:transparent;
margin: auto;
font-size: 16px;
padding: .5rem .5rem;
border:none;
}
.blognav .search input#searchbox:focus-visible{
border:none;
outline:none;
}
/*could do with some way of nicely seeing font awesome icons in coms */
.blognav .search input.submit {
width: auto;
height: 26.4px;
margin: 0;
padding: 0rem .5rem;
background-color: var(--white);
color:var(--blue);
font-family: var(--font-awesome);
border: none;
}
.blognav .recent{
margin-bottom:2em;
color:var(--text-color)
}
.blognav .recent a{
color:inherit;
}
.blognav .archive{
color:var(--text-color)
}
.blognav .archive a{
color:inherit;
}
/* Blog Posts
------------------------------------------------------- */
.art.blog{}
.art.blog h2{
text-align:center;
color:var(--dark-blue);
}
.art.blog .imgcont{
margin:2em auto;
max-width:50%;
}
.art.blog .imgcont img{
border-radius:var(--border-radius);
}
/* 2024 new blog stuff */
.page_blog article{
grid-column:1/-1;
display:grid;
grid-template-columns: repeat(12, 1fr);
grid-gap:1em;
align-items:start;
}
.page_blog article h2,
.page_blog article h6,
.page_blog article footer,
.page_blog article section{
grid-column:1/-1;
align-content:center;
margin-bottom:2em;
}
.page_blog section.halfWidth{
grid-column: auto / span 6;
}
.page_blog section.halfWidthDbl {
grid-column: auto / span 6;
grid-row: span 2;
}
.page_blog section.quarterWidth {
grid-column: auto / span 3;
}
.page_blog section.thirdWidth {
grid-column: auto / span 4;
}
.page_blog section.twoThirdWidth {
grid-column: auto / span 8;
}
.page_blog section.blog{
display:grid;
grid-area:unset;
grid-column:1/-1;
grid-template-columns: 1fr 1fr;
grid-template-areas:"title title"
"images images"
"text text";
grid-gap:0;
grid-column-gap:1em;
align-items:center;
}
.page_blog section.imageText{
grid-template-areas:"title title"
"images text";
grid-gap:0;
grid-column-gap:1em;
align-items:center;
}
.page_blog section.textImage{
grid-template-areas:"title title"
"text images";
grid-gap:0;
grid-column-gap:1em;
align-items:center;
}
.page_blog section.noTxt{
grid-template-areas:"title title"
"images images";
}
.page_blog section.blog h3,
.page_blog section.textImage h3,
.page_blog section.imageText h3{
grid-area:title;
text-align:center;
}
.page_blog section.blog .txt,
.page_blog section.textImage .txt,
.page_blog section.imageText .txt{
grid-area:text;
}
.doubleLine .txt{
line-height:3
}
.page_blog section.blog.noTxt .txt{
display:none;
}
.page_blog section.blog .imgs,
.page_blog section.textImage .imgs,
.page_blog section.imageText .imgs{
grid-area:images;
}
.page_blog section.blog .imgs a,
.page_blog section.blog .imgs img{
display:inline-block;
}
/* Blog navigation buttons
------------------------------------------------------- */
.blogBtns,
.blogPageBtns{
grid-column:1/-1;
display:grid;
grid-template-areas:"prev next";
}
.blogBtns a.prev,
.blogPageBtns a.prev{
grid-area:prev; background-color:var(--dark-blue);
color:var(--white);
text-align:center;
border-radius:var(--border-radius);
margin-right:auto;
padding:.5rem 2rem;
}
.blogBtns a.next,
.blogPageBtns a.next{
grid-area:next;
background-color:var(--dark-blue);
color:var(--white);
text-align:center;
border-radius:var(--border-radius);
margin-left:auto;
padding:.5rem 2rem;
}