@charset "utf-8";
/* CSS Document */
/* Skip to intranet CSS: int123*/
/* Skip to responsive code: xyz123*/
/*Global Styles*/
:root {
    color-scheme: light dark;
    --rcol: #FFC600;
    --gcol: #727272;
    --lgcol: #bed591;
    --rcol2: #e3b615;
    --dcol: #9f7b00;
    --drcol: #57460c;
    --dcol2: #303030;
    --vdcol: #101010;
    --vdcol2: #201705;
    --lcol: #ffe074;
    --lcol2: #ffeba6;
    --lcol3: #c5b16b;
    --vlcol: #fffcf0;
    --vlcol2: #fffbee;
    --xlcol: #FDFEFF;
    --rgbcol: 255, 198, 0;
    --rgblcol: 255 231 171;
    --aspect-ratio: 1;
    interpolate-size: allow-keywords;    
    --topIconPos: 0;
    --leftIconPos: 0;
}
@property --dvar {
  syntax: '<color>';
  initial-value: #9f7b00;
  inherits: false;
}

@property --lvar {
  syntax: '<color>';
  initial-value: #ffe074;
  inherits: false;
}
@property --rvar {
  syntax: '<color>';
  initial-value: #FFC600;
  inherits: false;
}


img {
    max-width: 100%;
}
.fruit {
    margin: 15px;
    background-color: #EEE;
    border: 1px solid #888;
    box-shadow: 0 0 15px #000;
    padding: 15px;
    text-align: center;
    font-weight: bold;
    display: inline-block;
}
@property --lgrey {
  syntax: '<color>';
  initial-value: #DDD;
  inherits: false;
}
.smallImg {
	height:30px;
	display:inline-block;
}
.ui-sortable-placeholder {
	min-height:100px;
	min-width:100px;
}

@font-face{
	font-family:'LED';
	src:url('../fonts/led.otf') format('opentype');
	font-weight:normal;
	font-style:normal;
}
@font-face{
	font-family:'Montserrat';
	src:url('../fonts/montserrat.regular.ttf') format('truetype');
	font-weight:normal;
	font-style:normal;
}
@font-face {
    font-family: 'Segoe UI';
    src: url('../fonts/SegoeUI.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face{
	font-family:'Impact';
	src:url('../fonts/IMPACT.TTF') format('truetype');
	font-weight:normal;
	font-style:normal;
}
@font-face{
	font-family:'Square';
	src:url('../fonts/square_721_bold_extended_bt.ttf') format('truetype');
	font-weight:normal;
	font-style:normal;
}
@font-face {
    font-family: 'Autography';
    src: url('../fonts/Autography.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Spinner';
    src: url('../fonts/segoe_slboot.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


html {
	width:100%;
	height:100%;
	position:relative;
	font-family: Arial, Helvetica, sans-serif;
	cursor: pointer;
}

body, html {
	width:100%;
	min-height:100%;
	position:relative;
	font-family: 'Segoe UI';
	margin:0;
	font-size:14px;
	line-height:1em;
	scroll-behavior:smooth;	
	color:#333;
    background-color: #FFF;
}
body {
  cursor: default;
}
body.noscroll {
	overflow:hidden;
}
a:link, a:visited, a:not([href]):not([tabindex]) {
    color: var(--rcol);
    text-decoration: none;
    -webkit-text-decoration-skip: objects;
}
h1,h2,h3,h4,h5,h6 {
	width:100%;
}
h1 {
	font-size: 2.5rem;
	color:var(--rcol);
	border-bottom:1px solid #999;
	margin:0 0 30px 0;
	font-weight: bold;
}
h1.hiddenH1 {
    opacity: 0;
    position: fixed;
    top: -10000px;
    font-size: 1;
    color: transparent;
}
h1.headerh1 {
    position: absolute;
    top: 169px;
    left: 0;
    text-align: center;
    color: #FFF;
    font-size: clamp(1.5rem, 3.5vw, 3rem);
    text-shadow: 0 0 20px #000, 0 0 20px #000, 0 0 20px #000, 0 0 15px #000, 0 0 10px #000;
    border-bottom: none;
    transition: opacity 500ms ease,  opacity 500ms ease;
    transition-delay: 500ms;
}
h1 small {
	color:#AAA;
	font-size:12px;
	font-style:italic;
}
h4 {
    margin: 20px 0;
    color: var(--rcol);
    font-weight: bold;
}
h4:before {
    content: "\e741";
    font-family: 'font-icons';
    font-weight: 400;
    font-size: 18px;
    margin-right: 8px;
    transition: transform 300ms ease;
    transform: rotate(-90deg);
    display: inline-block;
}
h4:hover:before {
    transform: translate(-10px, 0) scale(1.5) rotate(-80deg);
}
.p {
    line-height: 1.2;
}
h3 {
    color: #FFF;
    border-bottom: 1px solid rgba(0,0,0,0.2);
    padding-bottom: 6px;
    margin-bottom: 20px;
}

.homeh3 {
    text-shadow: 2px -2px 3px #DDD, -1px 1px 1px rgba(255,255,255,0.4);
    border-bottom: 2px solid var(--rcol);
    padding-bottom: 5px;
    margin-bottom: 25px;
    color: var(--rcol);
    font-weight: bold;
    position: relative;
    width: 50%;
    margin-left: 25%;
}
.sideMenu h4 {
	border-bottom:1px solid #BBB;
}
h5 {
    color: #000;
    border-bottom: 1px solid var(--rcol);
    font-weight: bold;
    padding: 5px;
}
h6 {
    font-family: 'Impact';
    font-size: 20px;
    display: block;
    text-align: center;
    margin: 10px 0 50px 0;
    padding-bottom: 30px;
    position: relative;
}
h6:after {
    width: 30%;
    left: 35%;
    bottom: 0;
    content: '';
    border-bottom: 1px solid #999;
    display: block;
    position: absolute;
}

p.quote {
	padding-left:20px;
	position:relative;
}

p.quote:before {
	content:open-quote;
	position:absolute;
	top:0;
	left:0;
	font-size:32px;
	color:#DDD;
	font-family: "Times New Roman", Times, serif;
	font-weight:bold;
}
p.quote:after {
	content:close-quote;
	position:absolute;
	bottom:0;
	right:0;
	font-size:1px;
	color:transparent;
	font-family: "Times New Roman", Times, serif;
	font-weight:bold;
}
a:hover, a:not([href]):not([tabindex]):hover {
    color: var(--dcol);
    text-decoration: underline;
}
a:focus {
	outline-color: transparent;
	text-decoration: underline !important;
}

::-webkit-scrollbar {
    width: 12px;
    margin-right: 2px;
    cursor: pointer;
	position:absolute;
}
::-webkit-scrollbar-thumb {
    background-color: var(--rcol);
    background: linear-gradient(90deg, var(--rcol), var(--rcol2));
    border-radius: 6px;
    cursor: pointer;
    box-shadow: -1px 2px 4px rgb(0 0 0 / 40%), inset -1px 2px 2px rgb(255 255 255 / 40%);
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--drcol);
    background: linear-gradient(90deg, var(--drcol), var(--rcol));
}
::-webkit-scrollbar-track {
    background-color: #EEE;
	background: linear-gradient(#cbcbcb, #fff);
    cursor: pointer;
}
::-webkit-scrollbar-track:hover {
    background-color: #CCC;
	background: linear-gradient(#AbAbAb, #DDD);
    cursor: pointer;
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

input[type="checkbox"], input[type="checkbox"] + label, input[type="radio"], input[type="radio"] + label {
	cursor:pointer;
}
input[type="checkbox"] + label:hover, input[type="checkbox"]:hover + label, input[type="radio"]:hover + label, input[type="radio"] + label:hover {
	font-weight:bold;
}


@keyframes wiggle {
	
	0%{transform: rotate(0deg);}
	40%{transform: rotate(-10deg);}
	42%{transform: rotate(10deg);}
	45%{transform: rotate(-7deg);}
	50%{transform: rotate(6deg);}
	55%{transform: rotate(-4deg);}
	60%{transform: rotate(2deg);}
	100%{transform: rotate(0deg);}
}

@keyframes wobble {
	
	0%{transform: translateX(0px);}
	40%{transform: translateX(-10px);}
	42%{transform: translateX(10px);}
	45%{transform: translateX(-7px);}
	50%{transform: translateX(6px);}
	55%{transform: translateX(-4px);}
	60%{transform: translateX(2px);}
	100%{transform: translateX(0px);}
}

@keyframes colourRainbow {	
	0%{color: #F00;}
	16.66%{color: #990;}
	33.33{color: #090;}
	50%{color: #099;}
	66.66%{color: #00F;}
	83.33%{color: #F0F;}
	100%{color: #F00;}
}

@keyframes colourRainbow2 {	
	0%{color: #F7E6E6; text-shadow: 0 0 30px #F00, 0 0 10px #F00;}
	16.66%{color: #EEEFE2; text-shadow: 0 0 30px #990, 0 0 10px #990;}
	33.33{color: #EEEFE2; text-shadow: 0 0 30px #090, 0 0 10px #090;}
	50%{color: #CEE2E3; text-shadow: 0 0 30px #099, 0 0 10px #099;}
	66.66%{color: #DEDEEF; text-shadow: 0 0 30px #00F, 0 0 10px #00F;}
	83.33%{color: #ECE0ED; text-shadow: 0 0 30px #F0F, 0 0 10px #F0F;}
	100%{color: #F7E6E6; text-shadow: 0 0 30px #F00, 0 0 10px #F00;}
}
@keyframes fall{
	from {
		transform: translate(0, 0) rotate(0deg);
		opacity:1;
	}
	to {
    	transform: translate(0, 400px) rotate(360deg);
		opacity:0;
	}
}

@keyframes backgroundColourRainbow {	
	0%{background: #F7E6E6;}
	16.66%{background: #EEEFE2;}
	33.33{background: #D6E9D6;}
	50%{background: #CEE2E3;}
	66.66%{background: #DEDEEF;}
	83.33%{background: #ECE0ED;}
	100%{background: #F7E6E6;}
}

@keyframes bordercolourRainbow {	
	0%{border-color: #F00;}
	16.66%{border-color: #FF0;}
	33.33{border-color: #0F0;}
	50%{border-color: #0FF;}
	66.66%{border-color: #00F;}
	83.33%{border-color: #F0F;}
	100%{border-color: #F00;}
}


@keyframes rainbowbutton {	
	0%{color: #F00; text-shadow: 0 0 30px #F00, 0 0 10px #F00;background: #F7E6E6;}
	16.66%{ #FF0;background: #EEEFE2;color: #990; text-shadow: 0 0 30px #990, 0 0 10px #990;}
	33.33{background: #D6E9D6;color: #090; text-shadow: 0 0 30px #090, 0 0 10px #090;}
	50%{background: #CEE2E3;color: #099; text-shadow: 0 0 30px #099, 0 0 10px #099;}
	66.66%{background: #DEDEEF;color: #00F; text-shadow: 0 0 30px #00F, 0 0 10px #00F;}
	83.33%{background: #ECE0ED;color: #F0F; text-shadow: 0 0 30px #F0F, 0 0 10px #F0F;}
	100%{background: #F7E6E6;color: #F00; text-shadow: 0 0 30px #F00, 0 0 10px #F00;}
}

@keyframes rainbowbutton2 {	
	0%{ background: #F00;}
	16.66%{background: #FF0;}
	33.33{background: #0F0;}
	50%{background: #0FF;}
	66.66%{background: #00F; }
	83.33%{background: #F0F;}
	100%{background: #F00;}
}


@keyframes blub {
	
	 0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
	14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
	28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
	42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
	56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
	70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
	84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}

@keyframes wiggleAlot {
	
	0%{transform: rotate(0deg); filter: brightness(50%) sepia(100) saturate(100) hue-rotate(25deg) drop-shadow(0 0 4px #000);}
	40%{transform: rotate(-10deg);}
	42%{transform: rotate(10deg);}
	45%{transform: rotate(-7deg);}
	50%{transform: rotate(6deg); filter: brightness(100%) sepia(0) saturate(0) hue-rotate(0) drop-shadow(0 0 0 #000);}
	55%{transform: rotate(-4deg);}
	60%{transform: rotate(2deg);}
	100%{transform: rotate(0deg); filter: brightness(50%) sepia(100) saturate(100) hue-rotate(25deg) drop-shadow(0 0 4px #000);}
}

@keyframes twinkle {
	from {
		text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #e60073, 0 0 8px #fbff00, 0 0 10px #ffe000, 0 0 12px #fff700, 0 0 14px #ffeb00;
	}
	to {
    	text-shadow: 0 0 2px #fff, 0 0 3px #00e7ff, 0 0 4px #0095ff, 0 0 5px #00c4ff, 0 0 6px #0066ff, 0 0 7px #0066ff, 0 0 8px #0043ff;
	}
}
@-webkit-keyframes gradient_move {
  0%{background-position:0% 92%}
  50%{background-position:100% 9%}
  100%{background-position:0% 92%}
}
@keyframes gradient_move {
  0%{background-position:0% 92%}
  50%{background-position:100% 9%}
  100%{background-position:0% 92%}
}
@keyframes cascadeDown {
	0%{top:-27px; opacity:0;}
	50%{top:-7px; opacity:1;}
	100%{top:12px; opacity:0;}
}
@keyframes spin {
	0%{transform: rotate(0deg);}
	50%{transform: rotate(180deg);}
	100%{transform: rotate(360deg);}
}
@keyframes spin2 {
	0%{transform: rotate(0deg);}
	50%{transform: rotate(-180deg);}
	100%{transform: rotate(-360deg);}
}
@keyframes blinkEye {
	0%{transform:scaleY(1);}
	50%{transform:scaleY(0.1);}
	100%{transform:scaleY(1);}
}

@keyframes blink {
	0%{opacity: 1;}
	50%{opacity: 0.8;}
	100%{opacity: 1;}	
}

@keyframes blink2 {
	0%{opacity: 1;}
	50%{opacity: 0.2;}
	100%{opacity: 1;}	
}
@keyframes throb {
  0% { text-shadow: 0 0 0 rgba(0,0,0,0.5);}
  50% { text-shadow: 0 0 5px var(--rcol);}
  100% { text-shadow: 0 0 0 rgba(0,0,0,0.5);}
}

@keyframes shine {
  0% { color:#000;}
  50% { color:#F00;}
  100% { color:#000;}
}

@keyframes shine2 {
  0% { color:#000;}
  50% { color:#0a8cff;}
  100% { color:#000;}
}

@keyframes setfocus {
  0% { box-shadow: 0 0 0 rgba(0,0,0,0);}
  50% { box-shadow: 0 0 15px rgba(0,0,0,0.5);}
  100% { box-shadow: 0 0 0 rgba(0,0,0,0);}
}

@keyframes shake {
  0% { transform: translateX(0px); }
  50% { transform: translateX(5px); }
  100% { transform: translateX(0px);}
}

@keyframes shakeOther {
  0% { translate: 0px 0; }
  50% { translate: 5px 0; }
  100% { translate: 0px 0;}
}
@keyframes shakesmall {
  0% { transform: translateX(0px); }
  50% { transform: translateX(2px); }
  100% { transform: translateX(0px);}
}

@keyframes setfocus {
  0% { box-shadow: 0 0 0 rgba(0,0,0,0);}
  50% { box-shadow: 0 0 15px rgba(0,0,0,0.5);}
  100% { box-shadow: 0 0 0 rgba(0,0,0,0);}
}
@keyframes bop {
  0% { translate: 0 0;}
  50% { translate: 0 7px;}
  100% { translate: 0 0;}
}
@keyframes bop2 {
  0% { translate: 0 -4px;}
  50% { translate: 0 4px;}
  100% { translate: 0 -4px;}
}
@keyframes fill {
	0%{width:0; color:#000;}
	25%{width:25%; color: transparent;}
	50%{width:50%; color:#000;}
	75%{width:75%; color: transparent;}
	100%{width:100%; color:#000;}
}


@keyframes spin3d {
	0%{transform: perspective(80px) rotate3d(0, 1, 0, 0deg); background-position: left; filter:brightness(1) drop-shadow(-4px 6px 3px rgba(0,0,0,0.4));}
	25%{ transform: perspective(80px) rotate3d(0, 1, 0, 90deg); background-position: left; filter:brightness(1.1) drop-shadow(-4px 6px 3px rgba(0,0,0,0.4));}
	25.001%{ transform: perspective(80px) rotate3d(0, 1, 0, 90deg); background-position: right; filter:brightness(0.7) drop-shadow(-4px 6px 3px rgba(0,0,0,0.4));}
	50%{ transform: perspective(80px) rotate3d(0, 1, 0, 180deg); background-position: right; filter:brightness(1)drop-shadow(-4px 6px 3px rgba(0,0,0,0.4));}
	50.001%{ transform: perspective(80px) rotate3d(0, 1, 0, 180deg); background-position: right; filter:brightness(1) drop-shadow(-4px 6px 3px rgba(0,0,0,0.4));}
	75%{ transform: perspective(80px) rotate3d(0, 1, 0, 270deg); background-position: right; left; filter:brightness(1.1) drop-shadow(-4px 6px 3px rgba(0,0,0,0.4));}
	75.001%{ transform: perspective(80px) rotate3d(0, 1, 0, 270deg); background-position: left; filter:brightness(0.7) drop-shadow(-4px 6px 3px rgba(0,0,0,0.4));}
	100%{ transform: perspective(80px) rotate3d(0, 1, 0, 360deg); background-position: left; filter:brightness(1) drop-shadow(-4px 6px 3px rgba(0,0,0,0.4));}
}


@keyframes spin3d2 {
	0%{transform: perspective(1000px) rotate3d(0, 1, 0, 0deg); background-position: left; filter:brightness(1) drop-shadow(-4px 6px 3px rgba(0,0,0,0.4));}
	25%{ transform: perspective(1000px) rotate3d(0, 1, 0, 90deg); background-position: left; filter:brightness(1.1) drop-shadow(-4px 6px 3px rgba(0,0,0,0.4));}
	25.001%{ transform: perspective(1000px) rotate3d(0, 1, 0, 90deg); background-position: right; filter:brightness(0.7) drop-shadow(-4px 6px 3px rgba(0,0,0,0.4));}
	50%{ transform: perspective(1000px) rotate3d(0, 1, 0, 180deg); background-position: right; filter:brightness(1)drop-shadow(-4px 6px 3px rgba(0,0,0,0.4));}
	50.001%{ transform: perspective(1000px) rotate3d(0, 1, 0, 180deg); background-position: right; filter:brightness(1) drop-shadow(-4px 6px 3px rgba(0,0,0,0.4));}
	75%{ transform: perspective(1000px) rotate3d(0, 1, 0, 270deg); background-position: right; left; filter:brightness(1.1) drop-shadow(-4px 6px 3px rgba(0,0,0,0.4));}
	75.001%{ transform: perspective(1000px) rotate3d(0, 1, 0, 270deg); background-position: left; filter:brightness(0.7) drop-shadow(-4px 6px 3px rgba(0,0,0,0.4));}
	100%{ transform: perspective(1000px) rotate3d(0, 1, 0, 360deg); background-position: left; filter:brightness(1) drop-shadow(-4px 6px 3px rgba(0,0,0,0.4));}
}


@keyframes blip {
 	0% { box-shadow:0 0 0 0px rgba(71,135,198,0.7); }
	50% { box-shadow:0 0 0 20px rgba(71,135,198,0); }
	100% { box-shadow:0 0 0 20px rgba(71,135,198,0); }
}
@keyframes shrinktozero {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.disabled:not(li, .enabled) {
	pointer-events:none;
	/*color:#FFF;*/
	filter: saturate(0.1);
}
a.navskip {
	width:100%;
	background-color:var(--rcol);
	color:#FFF;
	text-align:center;
	padding:17px;
	position:fixed;
	top:0;
	left:0;
	z-index:99999;
	text-decoration:underline;
	transform:translateY(-101%);
	transition:transform 300ms ease;
}
div.keywordsMeta {
	opacity:0.1;
	font-size:1px;
	width:1px;
	height:1px;
	position:fixed;
	pointer-events:none;
	top:-1px;
	left:-1px;
	overflow:hidden;
}
a.navskip:focus {
	transform:translateY(0%);
}
.spinner {
	position: absolute;
	height: 40px;
	width: 40px;
	left: 50%;
	top: 50%;
	margin: -20px 0 0 -20px;
	border: 3px transparent solid;
	border-top: 3px #5082E7 solid;
	border-radius: 20px;
	z-index:9999999999999999999999999;
	animation: spin 1000ms infinite linear;		
}
.spinnerdiv {
	position:absolute;
	display:inline-block;
	width:0px;
	height:0px;
	float:left;
}
.spinner2 {
	position: absolute;
	height: 40px;
	width: 40px;
	left: 50%;
	top: 50%;
	margin: -20px 0 0 -20px;
	border-radius: 20px;
	z-index:9999999999999999999999999;
    text-shadow: 0 0 5px #000, 0 0 10px #000;
	font-family: 'Spinner';
	font-size:32px;
	color: #FFF;
}
.phpbox {
    position: fixed !important;
    z-index: 9999999999999 !important;
    width: 50% !important;
    height: 70% !important;
    left: 25% !important;
    top: 15% !important;
    background-color: rgba(2558, 255, 255, 0.8) !important;
    box-shadow: 0 0 15px #000, 0 0 1px 1000px rgb(0 0 0 / 50%) !important;
    color: #000 !important;
    padding: 15px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    backdrop-filter: blur(5px) !important;
    border: 4px solid #dbdbdb !important;
    border-radius: 7px !important;
	text-align:left !important;
	font-size:16px !important;
}
.context-menu {
    display: none;
    position: absolute;
    border-radius: 13px;
    overflow: hidden;
    width: 200px;
    background: rgb(255 255 255 / 85%);
    border-top: 3px solid rgb(235 235 235 / 90%);
    border-bottom: 3px solid rgb(223 223 223 / 90%);
    border-left: 3px solid rgb(223 223 223 / 90%);
    border-right: 3px solid rgb(235 235 235 / 90%);
    box-shadow: 0px 15px 24px rgba(0,0,0,0.3), 0 0 10px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1), inset 19px -2px 69px rgba(50,50,50,0.2);
    z-index: 999999999999999999999999999999999;
    backdrop-filter: blur(3px);
}
.context-menu ul{
     list-style: none;
     padding: 0;
	 margin:0;
}

.context-menu ul li{
     margin-bottom: 1px;
     color: #222;
     cursor: pointer;
}
.context-menu ul li.disabled{
    opacity: 0.2;
    cursor: not-allowed;
}
.context-menu ul li a, .context-menu ul li span {
     padding: 10px 10px 10px 28px;
	 text-decoration:none;
	display:block;
     color: #222;
	 position:relative;
	transition: all 200ms ease-in-out;
}
.context-menu ul li a div, .context-menu ul li span div {
    display: inline-block;
    width: 17px;
    height: 17px;
    position: absolute;
    left: 5px;
    top: 9px;
    background-image: url(images/ui-icons_555555_256x240.png);
    background-repeat: no-repeat;
	background-position:0px 0px;
	transition: all 200ms ease-in-out;
}

.context-menu ul li:hover{
     background-color: rgb(0 0 0 / 18%);
	 color:#FFF;
}
.context-menu ul li:hover a, .context-menu ul li:hover span  {
	 text-decoration:none;
	 color:#FFF;
}
.context-menu ul li:hover a div, .context-menu ul li:hover span div {
	filter:brightness(8);
}
.fullbutton {
	width:100%;
	max-width:100%;
	margin:50px 0;
}
.phpbox pre {
    height: 97%;
    overflow: visible;
    white-space: normal;
}
.closephp, .closeadvert {
    position: absolute;
    right: 0;
    top: -20px;
    color: #FFF;
    text-shadow: 0 0 2px #000, 0 0 5px #000;
    font-weight: bold;
    transform: rotate(45deg);
    font-size: 44px;
    cursor: pointer;
    z-index: 9;
}
.closephp:hover, .closeadvert {
	color:#900;
}
.closer, .mapcloser, .officePoscloser {
	position:fixed;
	top:10px;
	right:10px;
	width:60px;
	height:60px;
	cursor:pointer;	
	filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
	z-index: 9999999999999999999999999;
}
.video-container {
    position: relative;
    inset: 0;
    height: fit-content;
    overflow: hidden;
    z-index: 1;
    transition: transform 500ms ease;
    translate: 0 -100px;
}

.video-container img.bottom_rce {
    position: absolute;
    z-index: 3;
    display: block;
    width: 100%;
    height: auto;
    bottom: -1px;
    left: 0;
    filter: hue-rotate(201deg); 
}

.video-container .slide {
    position: relative;
    top: 0;
    left: 0;
    width: 100vw;
    height: fit-content;
    z-index: -1;
    display: none;
    overflow: hidden;
    background-color: #000;
    border-bottom: 2px solid #000;
    box-shadow: inset 0 0 500px 75px #6e7681;
    background-repeat: no-repeat;
    z-index: 2;
}

.video-container .slide:before {
    content: '';
    background: linear-gradient(90deg, rgba(0,0,0,0.4), transparent);
    height: 100%;
    width: 25%;
    left: 0;
    top: 0;
    background-size: cover;
    background-position: right;
    position: absolute;
    pointer-events: none;
    display: block;
    z-index: 2;
    background-repeat: no-repeat;
}
.video-container .slide:after {
    content: '';
    background-image: linear-gradient(-90deg, rgba(0,0,0,0.4), transparent);
    height: 100%;
    width: 25%;
    right: 0;
    top: 0;
    background-size: cover;
    background-position: left;
    position: absolute;
    pointer-events: none;
    display: block;
    background-repeat: no-repeat;
    z-index: 2;
}
.video-container .slide img.slideImg{
    /*position: absolute;*/
        min-height: 50svh;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: cover;    
    opacity: 0.4;
    transition: transform 10000ms cubic-bezier(0.16, 0.02, 0.22, 1.04), opacity 300ms ease;
    z-index: 1;
    margin-top: 100px;
}

a.viewP, .subS {
    display: inline-block;
    transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;;
    padding: 12px;
    background-color: #FFF;
    color: #333;
    margin: 20px 20px 0 0;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.5);
}
.subS {
    background-color: var(--lcol3);
    color: #FFF;
    box-shadow: inset 25px 0px 39px rgba(0, 0, 0, 0.6), -5px 5px 15px rgba(0, 0, 0, 0.5);
}

.viewP:hover, .subS:hover {
    background-color: var(--rcol);
    color: #FFF;
    box-shadow: -8px 8px 15px rgba(0, 0, 0, 0.5);
}
.video-container.brighter .slide img{ 
    opacity: 1;
}

.BodySocial {
    background-image: url(../images/homeIcons.webp);
    background-size: 300% 100%;
    background-position: top left;
    width: 50px;
    height: 50px;
    border: 4px solid #FFF;
    cursor: pointer;
    border-radius: 30px;
    margin: 20px 20px 0 0;
    display: inline-block;
    transition: border 300ms ease;
    filter: drop-shadow(-4px 4px 6px #000);
}
.BodySocial[data-rel="email"] {
    background-position: top center;
}
.BodySocial[data-rel="search"] {
    background-position: top right;
}

.BodySocial:hover {
    border: 4px solid var(--rcol);
}
.logoFormer {
    position: absolute;
    z-index: 2;
    width: 500px;
    left: 50%;
    margin: 100px 0 0 -250px;
    filter: drop-shadow(0 0 29px black);
    transition: top 500ms ease, left 500ms ease, margin 500ms ease, width 500ms ease;
}
.logoFormer.moveUp{
    height: 90px;
    width:95.8px;
    left: 10%;
    top:0;
    margin: 0;
    z-index: 9999;
}
.logoFormer img {
    position: absolute;
    width: 100%;
    transition: top 2000ms ease, left 2000ms ease, opacity 500ms ease;
}

.logoFormer.compiled img {
    top: 0 !important;
    left: 0 !important;
    opacity: 1 !important;
}
.note {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	min-height:40px;
	background-color:#FFF;
	color:#333;
	text-align:center;
	z-index:99999999999999999999;
	line-height:1.5;
	animation: show 500ms forwards ease;
	text-shadow:-1px 1px 1px #FFF;
	font-size:1.3em;	
    box-shadow: 0 0 10px #000;
}
.note font img {
	max-height: 66px;
	max-width:70px;
	margin:0 5px;
	object-fit:contain;
}
.warning {
    background-color: #ff7e7e;
    background: linear-gradient(180deg, #FF7E7E, #c53333);
    color: #fff;
    text-shadow: 1px -1px 1px rgb(0 0 0 / 30%);
	padding-top: 3px;
}

.warning a {
    color: #fff;
	text-decoration:underline;
}
.notice {
	left:50%;
	width:50%;
	margin-left:-25%;
	padding:30px 60px 30px 30px;
	color:#666;
	background-color:#FFF;
	background:linear-gradient(#FFF, #AAA);
	box-shadow: 0 0 20px rgba(0,0,0,0.6);
	border-radius: 0 0 10px 10px;
}
.friendly {
	color:#090;
	background-color:#CFC;
	padding-top: 3px;
}
.attention {
	color:#660;
	background-color:#FFD000;
	padding-top: 3px;
}
.note .close {
    transform: rotate(45deg);
    margin: -11px 0;
    position: absolute;
    right: 20px;
    top: 20px;
}
.contentrelative {
	width:100%;
    position: relative;
}
.attention .close, .friendly .close, .warning .close {
    top: 50%;
}
.closer:before, .mapcloser:before,.officePoscloser:before {
	content:'';
	display:block;
	position:absolute;
	top:50%;
	background-color:#FFF;
	transform:rotate(-45deg);
	right:10px;
	width:60px;
	height:5px;	
	transition:all 300ms ease;
	border-radius:5px;
}
.closer:after, .mapcloser:after, .officePoscloser:after {
	content:'';
	display:block;
	position:absolute;
	top:50%;
	background-color:#FFF;
	transform:rotate(45deg);
	right:10px;
	width:60px;
	height:5px;	
	transition:all 300ms ease;
	border-radius:5px;
}

.closer:hover:before, .closer:hover:after, .mapcloser:hover:before, .mapcloser:hover:after, .officePoscloser:hover:after, .officePoscloser:hover:before {
	background-color:#A00;
	transition:all 300ms ease;
}
.closer:hover, .mapcloser:hover, .officePoscloser:hover {
	filter:drop-shadow(0 0 3px #000);
}
.cookiespopup {
    position: fixed;
    z-index: 9999;
    bottom: 0;
    text-align: center;
    width: 100%;
    border: 1px solid #FFF;
    background-color: rgb(0 0 0 / 63%);
    box-shadow: 0 0 25px rgb(0 0 0 / 50%);
    padding: 15px;
    backdrop-filter: blur(5px);
    text-shadow: 0 0 4px #000;
	color:#FFF;
}
.cookiespopup .container {
    position: relative;
	padding-left:60px;
}
.cookiespopup a {
	color:var(--lcol);
}
.cookiespopup img {
    position: absolute;
    left: 0;
    top: 4px;
    width: 56px;
	animation: wiggle 2000ms ease infinite;
}
.acceptCookies {
    position: relative;
    margin: 10px auto;
    height: 30px;
    width: 75px;
    background-color: var(--lcol2);
    text-shadow: 0 0 4px var(--rcol);
	color: #000;
    line-height: 30px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 300ms ease;
}

.acceptCookies:hover {
    background-color: #E5E5E5;
}
.loginBar {
    position: relative;
    height: 54px;
    width: 100%;
    background-color: #555;
    top: 0;
    border-bottom: 6px solid var(--rcol);
}

.showPassword, .showField {
    position: absolute;
    cursor: pointer;
    width: 20px;
    top: 24px;
    height: 15px;
    right: 5px;
}
.showPassword:after, .showField:after {
	content:'';
	height:0;
	width:2px;
	background-color:#900;
	position:absolute;
	z-index:9;
	transform:rotate(45deg);
	top: -1px;
    right: 11px;
}

.showPassword:before {
	opacity:0;
    content: 'Click to show password';
    height: 20px;
    width: 107px;
    background-color: #FFF;
    border: 1px solid #555;
    border-radius: 5px;
    padding: 3px;
    position: absolute;
    z-index: 9;
    top: -1px;
    right: -106px;
    font-size: 9px;
	transition:all 500ms ease;
	transition-delay: 0s;
	pointer-events:none;
}
.showField {
	top: 17px;
}

.showPassword:hover:before, .showField:hover:before{
	transition-delay: 1s;
	opacity:1;
}
.crossout:after {
	height:20px;
}
.crossout:before {
    content: 'Click to hide password';
}

.showField.crossout:before {
    content: '';
}
.showPassword:hover .eyeLid, .showField:hover .eyeLid{
	animation:blinkEye 200ms forwards ease;
}
.eyeLid {
  transition:all 100ms ease;
  width: 13px;
  height: 13px;
  margin:2px;
  position: relative;
	z-index:2;
}
.eye {
  width: 13px;
  height: 13px;
  position: relative;
  border: solid 1px #000;
  border-radius:  75% 15%;
  transform: rotate(45deg);
}
.eye:before {
  content: '';
  display: block;
  position: absolute;
  width: 5px;
  height: 5px;
  border: solid 1px #000;
  border-radius: 50%;
  left: 3px;
  top: 3px;
}
.crossout .eye, .crossout .eye:before {
  border: solid 1px #AAA;
}
.trackhidden .showField {
	display: none;
}
.trackhidden input[type="checkbox"] + label{
	opacity:0;
}

header {
    position: sticky;
    background-color: rgba(var(--rgbcol), 1);
    height: 80px;
    width: 100%;
    top: 0;
    z-index: 9999;
    box-shadow: 0 47px 20px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    transition: background-color 300ms 
ease;
}
header.scrolled {
    pointer-events: none;
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.6);
    background-color: rgba(var(--rgbcol), 0.3);
}
header:before {
    position: absolute;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: transparent;
    transition: backdrop-filter 300ms ease, background-color 300ms ease;
    backdrop-filter: blur(0px);
    pointer-events: none; 
}

header.scrolled:before {
    backdrop-filter: blur(2px);
    background-color:rgba(255,255,255,0.4);
}
header:after {
    position: absolute;
    content: '';
    display: block;
    width: 0;
    height: 3px;
    background-color: transparent;
    border-radius: 6px;
    bottom: 0;
    right: 2px;
    pointer-events: none;
    transition: width 1200ms ease, background-color 300ms ease;
}
header.scrolled:after {
    width: calc(100% - 4px);
    background-color: var(--rcol);
}
header.scrolled .logo {
    height: 50px;
}
.nav-toggle, .nav-close {
    display: none;
    position: fixed;
    right: 20px;
    font-size: 26px;
    line-height: 40px;
    width: 40px;
    height: 40px;
    top: 20px;
    border-radius: 40px;
    text-align: center;   
    transition: all ease 200ms;
    cursor: pointer;
    z-index: 99999;
    color: #333;
}
div.nav-close {
    right: 17px;
    top: unset;
    position: fixed;
}
div.icon[data-icon="icon-remove"]{
    color: #FFF;
}
#content {
    transition: translate 0.5s ease, filter 0.5s ease;
    z-index: 2;
    position: relative;
}
.nav-toggle:hover, .nav-close:hover, .nav-toggle:active, .nav-close:active{
    transform: scale(1);
    background-color: var(--rcol);    
    color: #FFF;
}
.nav-link {
    display: inline-block;
    padding: 0 15px;
    height: 100%;
    width: max(calc(100vw / 6 - 4px), 160px);
    line-height: 62px;
    position: relative;
    transition: color 300ms ease, padding 300ms ease;
}
.nav-main {
    position: fixed;
    top: 80px;
    z-index: 9999;
    width: 100%;
    /*transition: padding-left 300ms ease, left 300ms ease, width 300ms ease;*/
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(85, 85, 85, 0.8));
    padding-left: 80px;
}
.nav-main.scrolled {
    top: 20px;
    left: 333px;
    width: calc(100% - 350px);
    background: transparent;
    padding-left: 20px;
}
.nav-div-main {
    display: inline-block;
    position: relative;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.6), 0 0 13px rgba(0, 0, 0, 0.6);
}
.nav-main.scrolled .nav-div-main:hover {
    text-shadow: none;
}
a.nav-link-main, a.nav-link-main:not([href]):not([tabindex]) {
    position: relative;
    display: block;
    border-radius: 3px;
    padding: 13px 20px 15px 20px;
    cursor: pointer;
    color: #FFF;
    font-size: 1.3em;
    transition: background-color 300ms ease, padding 300ms ease;
    background-color: transparent;
}
.nav-div-main .dropdown {
    display: block;
    width: auto;
    height: auto;
    position: absolute;
    top: 36px;
    left: 20px;
    opacity: 0;
    box-shadow: rgba(0, 0, 0, 0.6) -8px 8px 30px;
    pointer-events: none;
    margin: 0px;
    padding: 5px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(85, 85, 85, 0.8));
    transition: opacity 400ms;
    backdrop-filter: blur(5px);
    border-radius: 10px;
}

a.nav-link-main + .dropdown a {
    width: 100%;
    text-align: left;
    padding: 8px 15px 8px 15px;
    display: block;
    width: 170px;
    color: #FFF;border-radius: 5px;
}
.nav-div-main a.nav-link-main + .dropdown a:hover {
    color: ;
    background-color: rgba(var(--rgbcol),0.4);
}
a.nav-link-main + .dropdown:before {
    position: absolute;
    content: '';
    display: block;
    top: -7px;
    border-bottom: 7px solid rgba(85, 85, 85, 0.8);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    left: 12px;
}

.nav-div-main:hover .dropdown {
    opacity: 1;
    pointer-events: all;
}
a.nav-link-main.selected:after {
    content: '';
    display: block;
    position: absolute;
    left: 20px;
    width: calc(100% - 40px);
    height: 3px;
    border-radius: 100%;
    translate: 0 5px;
    background: radial-gradient(var(--rcol), transparent);
}

a.nav-link-main.selected:hover:after {
    opacity: 0;
}
.nav-main.scrolled a.nav-link-main {
    padding: 10px 20px 15px 20px; 
}
.nav-link-main:hover, a.nav-link-main:not([href]):not([tabindex]):hover {
    background-color: var(--rcol);
    color: #000;
}

.nav-link-main[data-target="contact"] {
    background-color: var(--lcol);
    color: #000000;
    float: right;
    top: -61px;
    right: 20px;
}
.nav-main.scrolled .nav-link-main[data-target="contact"] {
    top: 0px;
    right: 0;
    background-color: #FFF;
    color: var(--dcol);
}
.nav-link-main[data-target="contact"]:hover {
    background-color: #CCC;
    color: #333;    
}

a:hover, a:not([href]):not([tabindex]):hover {
    text-decoration: none;
    
}
.showcase {
    background-repeat: no-repeat;
    background-position: 115% 24%;
    background-size: auto 110%;
    height: 100svh;
    width: 100vw;
    position: relative;
    perspective: 1000px;
    perspective-origin: center;
    z-index: 2;
}
.showcasetext {
    background-color: rgba(var(--rgbcol), 0.4);
    border-radius: 10px;
    border: 2px solid #FFF;
    padding: 2%;
    margin: 10% 4% 4% 4%;
    backdrop-filter: blur(5px);
    color: #FFF;
    width: 33%;
    box-shadow: 0 0 50px #000;
}
.showcasetext h3{
    position: relative;
    margin-top: -94px;
    margin-bottom: 36px;
    border-bottom: none;
    font-family: "impact";
    font-size: 3em;
}
.showcasetext a.button {
    clear: both;
    margin-top: 30px;
    display: block;
    width: fit-content;
}
a.iconImg, a.iconImg:not([href]) {
    height: auto;
    width: 100%;
    position: relative;
    color: #FFF;
    display: block;
    padding-left: 45px;
    margin-bottom: 12px;
    line-height: 1.2;
}
a.iconImg:hover, a.iconImg:not([href]):hover {
    color: var(--lcol);
}
a.iconImg:before {
    content: '';
    display: block;
    background-image: url(../images/icons.png);
    height: 32px;
    width: 32px;
    position: absolute;
    background-position: calc((6.2% - 3px) * var(--leftIconPos) - 3px) calc((9.1% - 3px) *  var(--topIconPos) - 6px);
    background-size: 2500% 1600%;
    left: 0;
    filter: brightness(8) saturate(0);
    border: 2px solid #FFF;
    border-radius: 100%;
        top:0;
}

a.iconImg[rel-contact="tel"]:before {    
    --topIconPos: 0;  
    --leftIconPos: 6.97;
}
a.iconImg[rel-contact="email"]:before {
    --topIconPos: 2.98;
    --leftIconPos: 9.9;
}

a.iconImg[rel-contact="address"]:before {    
    --topIconPos: 9.9;
    --leftIconPos:4;
    top: 5px;
}
a.iconImg[rel-contact="postal"]:before {    
    --topIconPos: 7;
    --leftIconPos:4.02;
    top: 5px;
}


.showcaselist {
    width: calc(50% + 135px);
    height: 9vw;
    position: relative;
    transform: rotateX(12deg) rotateY(24deg) rotateZ(352deg) translateX(-24px) scale(1, 1.2);
    perspective: 1000px;
    transition: transform 300ms ease;
    left: 10%;
}
.showcaseleft {
    position: absolute;
    left: 0;
    top: calc(50% - 30px);
    cursor: pointer;
    border-right: 30px solid rgba(255,255,255,0.5);
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
}
.showcaseleft:hover {
    border-right: 30px solid rgba(255,255,255,1);
}
.showcaseright {
    position: absolute;
    right: 0;
    top: calc(50% - 30px);
    cursor: pointer;
    border-left: 30px solid rgba(255,255,255,0.5);
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
}
.showcaseright:hover {
    border-left: 30px solid rgba(255,255,255,1);
}
.showcaselist .inner {
    white-space: nowrap;
    /*overflow: hidden;*/
    height: 100%;
    position: absolute;
    width:calc(100% - 80px);
    left: 40px;
    padding-top: 0.6vw;
    text-align: center;
    
}
.showcaseItem img {
    width: 100%;
    height: 100%;
    object-fit: contain;    
}
.showcaseItem {
    width: 10vw;
    aspect-ratio: 4 / 3;
    display: inline-block;
    border-radius: 10px;
    overflow: hidden;
    background-image: url(../images/field.webp);
    background-size: cover;
    position: relative;
    margin: 0 6px;
    cursor: pointer;
    box-shadow: -4px 5px 10px #000;
    filter: blur(1px) brightness(0.7);
    transform: scale(0.98);
    transition: transform 300ms ease, filter 300ms ease;
}
.showcaseItem.current, .showcaseItem:hover  {
    filter: blur(0) brightness(1);
    transform: scale(1.35) translate(25px, -1px);
    z-index: 9;
    box-shadow: -17px 5px 36px 10px #000;
}
.showcaselist .inner:hover .showcaseItem:not(:hover)  {
    box-shadow: -4px 5px 10px #000;
    filter: blur(2px) brightness(0.7);
    transform: scale(0.98);
    z-index: 1;
}


.showcaseItem span {
    display: none;    
}
.captchaSpin {
	cursor:pointer;
	font-weight:bold;
	height:40px;
	line-height:30px;
}
.captchaSpin div {
	width:30px;
	height:30px;
	border:1px solid #CCC;
	display:inline-block;
	margin-right:20px;
    float: left;
	border-radius:5px;
	box-shadow: 0 0 3px rgba(0,0,0,0.2);
	transition:all 300ms ease;
	    background-color: #FFF;
	cursor:pointer;
}

.captchaSpin div.clicked {
	border:4px solid !important;	
	border-top-color:var(--rcol) !important;
	border-right-color:var(--rcol) !important;
	border-left-color:transparent !important;
	border-bottom-color:transparent !important;
	border-radius:30px;
	cursor:pointer;
}
.checkUser {
	width:69% !important;
	margin-right:1%;
	float: left;
}
.userchecker {
    width: 30%;
    height: 35px;
	border-radius:5px;
	border:1px solid #888;
	float: left;
	text-align:center;
	line-height:35px;
}
.captchaSpin div.clicked.spin {
	animation: spin 1000ms infinite linear;
}
.captchaSpin:hover div {
	border:1px solid #666;
}
.captchaSpin span {
	height:30px;
	display:inline-block;	
    float: left;
	cursor:pointer;
}
.check {
  stroke-dasharray: 130px 130px;
  stroke-dashoffset: 122px;
  -webkit-transition: all 4.1s linear;
  transition: all 500ms ease-in-out;
}
.captchaChecked {
	pointer-events:none;
}
#hiddenCaptcha {
	display:none;
}
.logo {
    position: absolute;
    height: 56px;
    display: inline-block;
    width: fit-content;
    left: 100px;
    top: 12px;
    /*filter: drop-shadow(0 0 25px #000);*/
    transition: height 300ms ease, top 300ms ease, left 300ms ease;
}
.logo img {
    height: 100%;
}
.main {
    width: calc(100vw - 12px);
    /*overflow: hidden;*/
	color:#666;
	font-size:16px;
	line-height: 1.5em;
	background-size: cover;
}
.loginWidget {
    float: right;
    padding: 16px 15px;
	color:#FFF;
}
.loginWidget a {
	color:#FFF;
}
.cart {
	position:relative;
	display:inline-block;
	float:right;
	height:18px;
    margin:16px 15px 0 0;
}
.cartQty {
	position:absolute;
}
.cartQty div {
    position: absolute;
    background-color: #F00;
    width: 15px;
    height: 15px;
    color: #FFF;
    text-align: center;
    line-height: 15px;
    border-radius: 15px;
    top: -10px;
    font-size: 9px;
	pointer-events:none;
}
.cartQty div.spinner {
    position: absolute;
    background-color: transparent;
    width: 15px;
    height: 15px;
    color: #FFF;
    text-align: center;
    line-height: 15px;
    border-radius: 15px;
    top: -10px;
    font-size: 9px;
    pointer-events: none;
	margin: 0;
	border-top: 3px #F00 solid;
}
.cartIcon {
    height: 100%;
	cursor:pointer;
	transition:filter 300ms ease;
	filter: brightness(2) saturate(0);
}

.notificationBell {
    display: block;
    width: 20px;
    height: 20px;
    float: right;
    margin-left: 5px;
    background-image: url(../images/bell.png);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: contain;
    cursor: pointer;
    transition: all ease 300ms;
	filter: brightness(0.8);
	position:relative;
}
.notificationBell:hover {
    animation: wiggle 1500ms ease forwards;
    filter: brightness(0.2);
}
a.editUser {
	display:block;
	width:20px;
	height:20px;
	float:right;
	margin-left:5px;
	background-image:url(../images/cog.png);
	background-repeat:no-repeat;
	background-position:top left;
	background-size:contain;
	cursor:pointer;
	transition: all ease 300ms;
}

a.editUser:hover {
	animation:wiggle 1000ms ease forwards;
	filter: brightness(0.5);
}
img.searchIcon {
    height: 22px;
    position: absolute;
    right: 0;
	top:0;
    margin: 16px 15px;
    cursor: pointer;
    transition: filter 300ms ease;
    filter: brightness(1.5) saturate(0);
}
img.searchIcon:hover {
	filter: brightness(4) saturate(0);
}
.cartIcon:hover {
	filter: brightness(1.2) saturate(0);
}
header .container {
	position:relative;
	height: 100%;
}
header .container.searching {
    overflow-x: hidden;
    overflow-y: hidden;
}
.search {
    position: fixed;
    height: 55px;
    right: 0;
    width: calc(90% - 115px);
    padding: 0 12px;
    display: inline-block;
    background: linear-gradient(-90deg, black, transparent);
    z-index: 9999;
    color: #FFF;
}
.search input[type="submit"] {
    display: block;
    background-image: url(../images/showSearch.png);
    color: transparent;
    width: 38px;
    height: 33px;
    position: absolute;
    right: 245px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    background-color: transparent;
    top: 9px;
    cursor: pointer;
    transition: filter ease 300ms;    
    filter: brightness(1.5) saturate(0);
}
.search input[type="submit"]:hover {
	filter:drop-shadow(-2px 2px 2px rgba(0,0,0,0.2)) brightness(4) saturate(0);
	background-color: transparent;
}

.hideSearch {
    position: absolute;
    top: 12px;
    right: 8px;
    font-size: 45px;
    transform: rotate(45deg);
    cursor: pointer;
    height: 32px;
    border-radius: 100%;
    color: #999;
    background: #FFF;
    text-align: center;
    line-height: 21px;
}
.hideSearch:hover {
    color: #000;
}

.search input[type="text"] {
    width: calc(100% - 300px);
    background-color: #FFF;
    border: 1px solid #CCC;
    font-size: 21px;
    top: 7px;
    height: 38px;
    text-align: center;
    position: absolute;
    border-radius: 20px ;
	padding: 0 0 7px 0;
	box-shadow: inset -2px 2px 13px rgb(0 0 0 / 20%);
}
.search input[type="text"]:hover, .search input[type="text"]:focus, .search input[type="text"]:valid {
    background-color: #FFF;
	outline-color: transparent;
	box-shadow: inset -2px 2px 5px rgb(0 0 0 / 10%);
}
.search div {
    position: absolute;
    right: 63px;
    font-size: 14px;
    bottom: 10px;
    width: 169px;
}
.search div input[type="checkbox"].toggle + label:after {
    top: 1px;
}
.search input[type="checkbox"]{
	cursor:pointer;
	transform:translateY(3px);
}

.search input[type="checkbox"] + label{
	cursor:pointer;
}
.throb {
	animation: shine infinite 2000ms ease;
	text-decoration:underline;
}
.menubutton, .foodmenubutton {
	position:absolute;
	right: 90px;
	top:13px;
	height:30px;
	width:30px;
	cursor:pointer;
	display:none;
}
.foodmenubutton {
    right: 20px;
    top: 20px;
}

.menubutton div, .foodmenubutton div {
	width:100%;
	height:6px;
	background-color:#999;
	position:absolute;
	top:12px;
	left:0;
	border-radius:3px;
	transition:background-color ease 300ms;
}
.menubutton:before, .foodmenubutton:before {
	content:'';
	display:block;
	width:100%;
	height:6px;
	background-color:#999;
	position:absolute;
	top:0;
	left:0;
	border-radius:3px;
	transition:all ease 300ms;
}
.menubutton:after, .foodmenubutton:after {
	content:'';
	display:block;
	width:100%;
	height:6px;
	background-color:#999;
	position:absolute;
	top:24px;
	left:0;
	border-radius:3px;
	transition:all ease 300ms;
}

.menubutton:hover:after, .menubutton:hover:before, .menubutton:hover div, .foodmenubutton:hover div, .foodmenubutton:hover:after, .foodmenubutton:hover:before {
	background-color:#666;
}
.menubutton.clicked:after, .foodmenubutton.clicked:after {
	width: 75%;
	transform: rotate(-45deg) translate(10px, 3px);
}
.menubutton.clicked:before, .foodmenubutton.clicked:before {
	width: 75%;
	transform: rotate(45deg) translate(10px, -3px);
}
header div.navlight {
    position: absolute;
    top: -6px;
    width: 10px;
    height: 10px;
    background: linear-gradient(-45deg, #DDD, #FFF);
    border-radius: 10px 0 0 0;
    transform: rotate(45deg);
    left: -10%;
    box-shadow: 2px 2px 6px;
	transition:left ease 300ms;
}
.menu {
	display:inline-block;
	position:relative;
	float:right;
	height:100%;
}

.menu a.menuitem {
    display: inline-block;
    height: 100%;
    line-height: 4;
    padding: 0 15px;
    cursor: pointer;
    color: #666;
    transition: all ease 300ms;
    text-decoration: none;
    position: relative;
	text-shadow: -1px 1px 2px #fff;
	border-radius:5px;
}
.menu a.menuitem.drop:after {
	content:'';
	position:absolute;
	border-left: 1px solid #AAA;
	border-bottom: 1px solid #999;;
	transform:rotate(-45deg);
	bottom:10px;
	width:5px;
	height:5px;
	left:50%;
	margin: 0 0 0 -3px;
	box-shadow: -1px 1px 1px rgb(255 255 255 / 50%);
}
.menu a.menuitem:hover {
	color:var(--rcol);
}

.menu a.menuitem:focus {
	outline-color: transparent;
	text-decoration: none !important;
}

.menu .menuitem:hover {
	color:var(--rcol);
}
.menu a.menuitem.drop.openedbutton {
	background: linear-gradient(var(--lcol), var(--rcol));
	color:#FFF !important;
	text-shadow: 0 0 3px #000;
}
.dropdown.stayopen{
    z-index: 9999999999;
}
.dropdown .row {
	height:100%;
}
.dropleft {
	overflow-y:auto;
	overflow-x:hidden;
	height: 100%;
	padding-bottom: 15px;
	position:relative;
}

.dropleft h3 {
    padding: 15px 0;
    font-weight: bold;
    color: #8b8b8b;
    border-bottom: 2px solid #cbcbcb;
    margin-bottom: 15px;
}
.curveTop {
	width:100%;
	bottom:1px;
	position:absolute;
	z-index:2;
	pointer-events: none;
	max-height:49px;
}
.curveBottom {
	width:100%;
	top:-1px;
	z-index:2;
	position:absolute;
	pointer-events: none;
	max-height:53px;
}
.curveTopContainer {
	width:100%;
	z-index:3;
	position:relative;
	pointer-events: none;
}
.menuMaster {
	display:block;
	width:100%;
	padding:20px;
	border-radius: 5px;
	color:#666;
	transition:all 100ms ease;
	position:relative;
}

.menuMaster:before {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    border-bottom: 1px solid #FFF;
    position: absolute;
    left: 0;
    bottom: 0;
}
.menuMaster.imenu:before {
    content: '';
	border-bottom: none;
    background-image: var(--bg-image);
    background-size: cover;
    background-repeat: no-repeat;
    display: inline-block;
    width: 34px;
    height: 34px;
    border-radius: 40px;
    position: relative;
    background-color: var(--rcol);
    margin: -10px 7px -12px -11px;
	top: unset;
	right:unset;
}
.menuMaster.imenu:hover:before {
	transform:scale(1.3);
}
a.menuMaster {
	color:#666;
}

.menuMaster.arr{
	position:relative;
}
.menuMaster.arr:after {
    content: '';
    transform: rotate(-45deg);
    display: block;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid var(--rcol);
    border-right: 2px solid var(--rcol);
    position: absolute;
    right: 15px;
    top: 22px;
}
.menuMaster:hover, .menuMaster:focus, a.menuMaster:not([href]):not([tabindex]):hover  {
    background-color: rgb(var(--rgbcol), 0.6);
    color: #fff;
    text-decoration: none;
	text-shadow: none;
}
.menuright {
    display: none;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
.menuright.hovmenu {
	display:block;
}
.menuright a {
    display: inline-block;
    padding: 17px;
    background-color: rgba(0,0,0,0.6);
    margin: 5px;
    border-radius: 5px;
    color: #FFF;
    float: left;
    width: calc(50% - 10px);
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 48px;
    overflow: hidden;
}
.menuright a:hover {
    background-color: rgba(var(--rgbcol),0.6);
	text-decoration:none;
	
}
.menuright h5 a:hover {
    color: rgba(var(--rgbcol),1);
    background-color: rgba(var(--rgbcol),0);
	text-decoration:underline;
}
.menuright h5 {
    font-size: 2em;
    font-weight: bold;
    position: relative;
    text-align: left;
    color: var(--rcol);
    background-color: transparent;
    display: block;
    width: 100%;
    padding: 12px;
    margin: 0px;
    line-height: 50%;
	border-bottom: none;
}
/*
.menuright h5 a {
    display: block;
    width: 100%;
    float: none;
    color: var(--rcol);
    background-color: transparent;
    margin: 0;
    padding: 0;
	line-height: 72%;
}*/
footer {
	min-height:40px;
	background-color:#000;
	background: linear-gradient(0deg, var(--dcol), var(--rcol));
	padding: 50px 20px 60px 20px;
	color:#FFF;	
	position:relative;
    box-shadow: 0 0 550px rgba(0, 0, 0, 0.4);
    z-index: 1;
    
}
#content.container {
    margin: 0 auto;
    border-radius: 10px;
    padding: 33px;
}
footer:after {
    display: block;
    background-color: #666;
    content: '';
    width: 100%;
    left: 0;
    bottom: 0;
    height: 40px;
    position: absolute;
    border-top: 5px solid #FFF;
}
img.menuImg {
	position:absolute;
	bottom:0;
	right:-11%;
	width:50%;
	height:100%;
	object-fit:cover;
	z-index: -2;
    mix-blend-mode: multiply;
	position: absolute;
}
div.menuImg {
	background-color: rgba(235,238,240,0.7);
	background: linear-gradient(90deg, rgba(235,238,240,1), rgba(235,238,240,0.5));	
	bottom:0;
	right:0;
	width:40%;
	height:100%;
	z-index:-1;
	position: absolute;
}
article {
	padding:100px 10px;
	position:relative;
	text-align:center;
	width:100%;
}
h3.largerh3 {
    font-size: 3em;
    font-weight: bold;
    color: #AAA;
    margin: 10px 0 50px 0;
    padding: 10px 0;
    border-bottom: 2px solid #EEE;
}
.breadcrumbs {
    transform: translateY(-85px);
    padding-bottom: 13px;
	white-space: nowrap;
	line-height: 1em;
	z-index: 2;
    position: relative;
	overflow: hidden;
}

.breadcrumbs span {
	margin:0 10px;
	color:#DDD;
	font-weight:bold;
}

/*------*/
.container .breadcrumbs {
	transform: translateY(-90px);
    padding: 13px 13px;
	overflow:visible;
    text-shadow:0 0 5px #000;
    margin-bottom: 37px;
}
.container .breadcrumbs:before {
    content: '';
    display: block;
   /* background-image: url("../images/bottom_grunge.webp?v=a");*/
    width: 101vw;
    height: 9vw;
    min-height: 100px;
    position: absolute;
    bottom: -1px;
    left: 50%;
    margin-left: -50vw;
    background-size: cover;
    background-position: bottom center;
    z-index: -1;
}
.container .breadcrumbs span {
	margin:0 10px;
	color:rgba(255,255,255,0.2);
	font-weight:bold;
}
.bclink {
	color:#FFF!important;
}
.bclink:hover {
	color:var(--rcol) !important;
}
/*------*/
.spacer {
	height:400px;
}
#content.container article:first-of-type {
	padding:10px 10px 100px 10px;
}
#content.container article:last-of-type {
	padding:100px 10px 10px 10px;
}
.companyblocks a {
	background-color: transparent;
	position: relative;
	z-index:1;
}

.companyblocks a:after {
	content:'';
	background-color:#EEE;
	z-index:2;
	border-radius:25px;
	position:absolute;
	left:10px;
	top:10px;
	width:calc(100% - 20px);
	height:calc(100% - 20px);
	display:block;
}
.companyblocks a:hover:after {
	background-color:var(--lcol);
	transition:background-color 300ms ease;
}
.companyblocks a img {
	width:100%;
	height:100%;
	transition:transform 300ms ease;
	position:relative;
	z-index:9;	
}
.companyblocks a:hover {
	z-index:9;	
}
.companyblocks a:hover img, .companyblocks a:focus img {
	transform: scale(1.2);
	z-index:99;	
}

.companyblocks a div {
    z-index: 9;
    position: absolute;
    bottom: 10px;
    text-align: center;
    width: calc(100% - 20px);
    left: 10px;
    padding: 10px;
    font-size: 1.2em;
    font-weight: bold;
    background-color: #BBBBBB66;
    color: #FFF;
    border-radius: 0 0 20px 20px;
}

a.blocklink, .button, a.button {
	background-color: var(--rcol);
	color:#FFF;
	display:inline-block;
	padding:15px;
	border-radius:10px;
	margin:10px 0;
	transition:background-color 300ms ease;
	cursor:pointer;
}
a.blocklink:hover, .button:hover, a.button:hover  {
	background-color: var(--dcol);
	text-decoration:none;
}
.homeicons {
	text-align:center;
}
.homeicons img {
	height:40px;
	filter:brightness(2);
}

.featuredmag {
}
a.featuredmag img {
	width:100%;
	max-width:275px;
	max-height:50px;
	object-fit:contain;
	filter:saturate(0);
	margin:30px;
	transition:filter ease 300ms;
}

a.featuredmag:hover img, a.featuredmag:focus img {
	filter:saturate(1);
}
.signup {
    color: var(--lcol);
    padding: 0 0 30px 0;
    font-size: 2em;
}
input[type="email"]#signup {
    display: inline-block;
    width: 37%;
    background-color: #FFF;
    font-size: 18px;
    border-radius: 5px 0 0 5px;
	margin: 0 0 0 3%;
}
a.footer-link {
    display: block;
    color: #FFF;
    padding: 8px 3px;
    border-bottom: 1px solid rgba(var(--rgbcol), 0.3);
    transition: padding 300ms ease;
}
a.footer-link:hover {
    color: var(--lcol);
    padding: 8px 3px 8px 8px;
}
.signupButton {
    color: #FFF;
    display: inline-block;
    background-color: var(--rcol);
    border-radius: 0 5px 5px 0;
    width: 11%;
    height: 35px;
    text-align: center;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    transform: translateY(-3px);
    line-height: 2;
}
.signupButton:hover, .signupButton:focus {
    background-color: var(--dcol);
}

.footlogo {
	width:100%;
}
footer a.telfoot, footer a.whatfoot {
	font-size:1.5em;
	color:#FFF;
	font-weight:bold;
	position:relative;
	margin:30px auto;
	display: block;
	white-space: nowrap;
}
footer a.telfoot:before, footer a.whatfoot:before {
    background-repeat: no-repeat;
    background-position: 76% 57%;
    border-radius: 7px;
    background-size: 81%;
    padding: 14px;
    width: 0;
    height: 0;
    content: '';
    display: inline-block;
    margin: 0 10px 0 0;
    transform: translateY(11px);
    opacity: 0.6;
}
footer a.telfoot:before {
    background-color: var(--rcol);
    border: 2px solid #FFF;
    background-image: url(../images/wtel.png);
}
footer a.whatfoot:before  {
    background-color: transparent;
    border: none;
    background-image: url(../images/whatsapp_filled.png);
}
footer a.telfoot:hover:before, footer a.whatfoot:hover:before, footer a.telfoot:focus:before, footer a.whatfoot:focus:before {
    opacity: 1;
	outline:none;
}
footer a.telfoot:focus, footer a.whatfoot:focus {
	outline:none;
}
footer .footerright small {
    margin: 50px auto 50px -15px;
    width: calc(100% + 30px);
    display: block;
    white-space: normal;
}
footer .footermenu {
	position:relative;
	margin-bottom: 30px;
}

footer .footermenu .footitems h4 {
	font-weight:bold;
	color: #FFF;
}
footer .footermenu .footitems a {
    color: #777;
    margin: 15px 3px;
    font-size: 1em;
    display: block;
    border-left: 3px solid var(--dcol2);
    padding-left: 10px;
	transition:all 200ms ease;
}
footer .footermenu .footitems a:hover, footer .footermenu .footitems a:focus {
	color: #FFF;
	text-decoration:none;
    border-left: 3px solid var(--rcol);
    padding-left: 15px;
	outline:none;
}
.newsletterForm {
    margin-bottom: 30px;
}
.newsletterForm input[type="text"]{
    display: inline-block;
    width: calc(100% - 73px);    
}
input[type="text"]::placeholder{
    color: #FFF;
}
input[type="text"]:hover::placeholder{
    color: var(--dcol);
}
.newsletterForm input[type="submit"]{
    display: inline-block;
    width: 69px;
    margin-left: 4px;
    
}
.socials {
    margin-bottom: 30px;
}
.social-link {
    display: inline-block;
    background-image: url(../images/social.webp?v=2);
    background-size: 300% 200%;
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    transition: filter 200ms ease;
    margin: 0 5px 0 0;
    filter: brightness(5);
}
.social-link:hover {
    filter: hue-rotate(197deg) brightness(1.7);
}
a.social-link[data-social="facebook"]{
    background-position: calc(100% * 0) calc(100% * 0);
}

a.social-link[data-social="twitter"]{
    background-position: calc(100% * 0) calc(100% * 1);
}

a.social-link[data-social="linkedin"]{
    background-position: calc(100% * 1) calc(100% * 1);
}
a.social-link[data-social="instagram"]{
    background-position: calc(100% * 0.5) calc(100% * 0);
}
a.social-link[data-social="youtube"]{
    background-position: calc(100% * 1) calc(100% * 0);
}
a.social-link[data-social="tiktok"]{
    background-position: calc(100% * 0.5) calc(100% * 1);
}
input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="password"], input[type="time"], select {
	border:1px solid rgba(0,0,0,0.4);
	border-radius:5px;
	padding:5px;
	height:35px;
	background-color:rgba(255,255,255, 0.2);
	width:100%;
    transition: background-color 200ms ease;
}
.greyarticle input[type="text"], .greyarticle input[type="number"], .greyarticle input[type="email"], .greyarticle input[type="tel"], .greyarticle input[type="password"], .greyarticle select, .greyarticle textarea, .greyarticle input[type="time"] {
	color:#444;
    background-color: rgb(241,248,255);
}
.greyarticle .formInput label {
    top: -4px;
    color: #FFF;
}
input[type="text"].half, input[type="number"].half, input[type="email"].half, input[type="tel"].half, input[type="password"].half, select.half, input[type="time"].half {
	width:49%;
}
input[type="text"].half:nth-of-type(odd), input[type="number"].half:nth-of-type(odd), input[type="email"].half:nth-of-type(odd), input[type="tel"].half:nth-of-type(odd), input[type="password"].half:nth-of-type(odd), select.half:nth-of-type(odd), input[type="time"].half:nth-of-type(odd) {
	margin-right:0;
	float: left;
}

input[type="text"].half:nth-of-type(even), input[type="number"].half:nth-of-type(even), input[type="email"].half:nth-of-type(even), input[type="tel"].half:nth-of-type(even), input[type="password"].half:nth-of-type(even), select.half:nth-of-type(even), input[type="time"].half:nth-of-type(even) {
	margin-left:0;
	float: right;
}
.formInput .half + .halfLabel, .sideMenu .formInput label.halfLabel {
	left:51%;
}
select {
    color: #FFF;
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E), linear-gradient(to bottom,  var(--rvar)  0%, var(--dvar) 100%);
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
    cursor: pointer;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
	padding-right: 23px;
    transition: --dvar 300ms ease, --rvar 300ms ease;
}
select optgroup {
    color: #999;
}
select option {
    color: #333;
}

textarea {
	min-height:100px;
	width:100%;
	border:1px solid #999;
	border-radius:5px;
	padding:5px;
	margin-bottom:15px;
	background-color:rgba(var(--rgblcol), 0.52);
	color:#333;
}

textarea:focus, input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="password"]:focus, select:focus {
	background-color:#FFF;
}


input[type="submit"], input[type="reset"], input[type="button"], button, a.buttonlink {
	border-radius:5px;
	padding:5px;
	height:35px;
	background-color:var(--rcol2);
    background: linear-gradient(0deg, var(--dvar), var(--rvar));
    
	transition: --dvar 300ms ease, --rvar 300ms ease;
	color:#FFF;
	text-align:center;
	border:none;
	cursor:pointer;
}
a.buttonlink {
    display: inline-block;
    padding: 5px 17px;
}

input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, button:hover, a.buttonlink:hover {
	text-decoration:none;
	background-color:var(--dcol);
	--dvar:#c18b15;
	--rvar:#ffe074;
}
input[type="submit"].fullButton, button.fullButton {
	width:100%;
	max-width:100%;
}
input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active, button:active {
	background-color:var(--dcol2) !important;
}
.formInput, .formInputOther {
    position: relative;
    padding: 15px 0 0 0;
	clear: both;
	min-height:fit-content;
	/*z-index:9;*/
}
.formInputOther select {
	width:50%;
	display:inline-block;
	margin-right:10px;
}
formInput.col-lg-6, .formInputOther.col-lg-6 {
	float:left !important;
	clear: none;
}
.enquireForm {
	width: 50%;
	margin-left: 25%;
	position:relative;
}
.enquireForm input[type="submit"]{
    position: absolute;
    bottom: -35px;
    right: 0;
    width: 123px;
}
.formInput.col-lg-6:nth-of-type(2n+1) {
    padding: 15px 10px 0 0 !important;
}
.formInput.disabled {
	border:none !important;
}
.formInput label {
	position:absolute;
	top:-2px;
	left:2px;
	font-size:9px;
	color:var(--rcol);
	transition: all 300ms ease;
	opacity:0;
}
select:hover, input:hover, textarea:hover {
	border-color:var(--rcol);
	background-color:#FFF;
}
select:hover {
	cursor:pointer;
    --rvar: #F6dab4;
    --dvar: #d1a774;
}
.formInput input:focus ~ label, .formInput:hover label, .formInput input:not(:placeholder-shown) ~ label, .formInput textarea:focus ~ label, .formInput textarea:not(:placeholder-shown) ~ label, .shown label {
	opacity:1 !important;
}
.formInput:hover input::placeholder, .formInput input:focus::placeholder {
	color:#CDE;
}

.requestForms {
	min-height:400px;
	padding:15px;
}
.requestForms .formInput {
	margin-top: 20px;
}
.requestForms .formInput select, .requestForms .formInput input, .requestForms .formInput textarea {
	margin-top:10px;
	width:100%;
}
.requestForms .formInput select + label, .requestForms .formInput input + label, .formInput label.overwrite {
    font-size: 13px;
    top: -6px;
    opacity: 0.5;
}

.formInput.fileinput input {
    margin: 3px 0;
    border: 1px solid #666;
    padding: 5px;
    width: 100%;
    opacity: 1;
    transition: all 300ms ease;
    border-radius: 5px;
    background-color: #eaf2ff;
	cursor:pointer;
}
.formInput.fileinput input:hover {
    background-color: #FAFDFF;
}
.requestForms small.marketingIntro {

	width:100%;
	text-align:center;
	line-height:400px;
	display:block;
	background-image:url(../images/marketingbg.jpg);
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
}
.requestForms small.salesInteractions {
	width:100%;
	text-align:center;
	line-height:400px;
	display:block;
	background-image:url(../images/greeting.jpg);
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
}

.requestForms .formInput select:focus, .requestForms .formInput input:focus, .requestForms .formInput textarea:focus {
	animation:setfocus 2000ms ease forwards;
}

 .login .formInput{
	margin-top:20px;
}

.login input[type="text"], .login input[type="password"], .login input[type="email"]{
	width:100%;
}

.formInput.col-6 {
	padding: 15px 0 0 0;
}
.formInput.col-6:nth-child(odd) {
	padding: 15px 0 0 7px;
}

.col6-even .formInput.col-6:nth-child(odd) {
	padding: 15px 0 0 0;
}
.col6-even .formInput.col-6:nth-child(even) {
	padding: 15px 0 0 7px;
}

.rememberme {
    width: auto;
    transform:translateY(19px);
	position:relative;
	cursor:pointer;
}
.rememberme label {
	position:relative;
	margin:-3px 0 0 19px;
	cursor:pointer;
}
.rememberme input {
	margin: -7px 0 0 0;
    position: absolute;
	cursor:pointer;
}
.socialicons {
	translate:0 -30px;
    transform:translateY(-30px);
}
.headimg {
    position: relative;
    margin: -600px 0 0 -50vw;
    width: 100vw;
    height: 400px;
    object-fit: cover;
    z-index: 0;
    left: 50%;
    filter: brightness(0.5);
    max-width: 100vw;
}
.allProducts {
	min-width:100px;
	cursor:pointer;
	margin-bottom:30px;
	transition:all ease 400ms;
}

.allProducts div {
    position: relative;
    width: 100%;
    margin-left: 0;
    height: 0;
    padding-bottom: 100%;
    border-radius: 2px;
    border: 1px solid #EEE;
    transition: all ease 300ms;
}

.allProducts:hover div, .allProducts.this div {
	background-color:var(--vlcol);
}
.allProducts div img {
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	object-fit:contain;
	top:0;
	border-radius:2px;
	transition:all ease 400ms;
	mix-blend-mode: multiply;
}

.allProducts:hover div img, .allProducts.this img {
	transform:scale(1.2);
    z-index: 99;
}

.allProducts span {
    z-index: 9;
    position: absolute;
    bottom: 0px;
    text-align: center;
    width: calc(100% - 30px);
    left: 15px;
    padding: 10px;
    font-size: 1em;
    font-weight: normal;
    background-color: #FFFFFF88;
    color: #00000088;
    border-radius: 0 0 2px 2px;
    backdrop-filter: blur(3px);
}
.allProducts:hover span {
    background-color: #FFFFFF00;
	color:#FFF;
}
.whitearticle.row:hover > .allProducts img:not(:hover) {
	filter:saturate(0.3);
	opacity:1;
}
.allProducts.notthis img {
	filter:saturate(1) !important;
	opacity:1 !important;
}

.allProducts.notthis {
	filter:saturate(0) !important;
	opacity:0.2 !important;
}
.bannerDiv {
    width: 100%;
    position: relative;
    height: 0;
    padding-bottom: 13%;
    margin-top: -10%;
    margin-bottom: 10%;
}
.addWebBanners {
    width: 100%;
    overflow-y: hidden;
    overflow-x: auto;
    position: relative;
    height: 0;
    padding-bottom: calc(13% + 20px);
    margin-bottom: 30px;
    white-space: nowrap;
}
.addWebBanners div {
	width:90%;
	display:inline-block;
	margin-right:5%;
	position:relative;
}
.addWebBanners div .delthisbanner {
    background-image: url(../images/del.png);
    background-size: contain;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 10px;
    top: 5px;
    display: block;
    filter: drop-shadow(0 0 5px #000);
    cursor: pointer;
}
.addWebBanners img{
	width:100%;
}
.webbanner {
    /* display: none; */
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    translate: 0 -104px;
    height: 150px;
    background-color: #000;
}

.webbanner.current {
	display:block;
}
.industryLabel {
    position: relative;
    z-index: 9;
    float: right;
    margin: -98px 71px 0 0;
    font-size: 12px;
    color: var(--rcol);
}
.industries {
    position: relative;
    z-index: 9;
    float: right;
    margin: -77px 0 0 0;
    border: 1px solid #EEE;
    height: 35px;
    width: 160px;
    background: #FFF;
    border-radius: 5px;
    overflow: hidden;
	cursor:pointer;
}
.industries.opened {
	overflow:visible;
}
.industries:after {
	content:'';
	display:block;
	position:absolute;
	height:0;
	width:0;
	border-top:8px solid #0003;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	right:7px;
	top:20px;
	margin-top:-5px;
	pointer-events:none;
}

.industries div {
    width: 100%;
    height: 100%;
    line-height: 185%;
    padding-left: 5px;
	background:#FFF;
	transition:all 300ms ease;
	pointer-events:none;
	border-radius:0;
}
.industries.opened div {
	pointer-events:all;
	box-shadow: 0 3px 6px rgb(0 0 0 / 40%);
}
.industries:hover div.unselected {
	background:var(--rcol);
	color:#FFF;
}
.industries.opened div.unselected,.industries.opened:hover div.unselected {
	background:#AAA;
	color:#FFF;
}
.industries.opened div:not(.unselected):hover {
	background:var(--rcol);
	color:#FFF;
}
.industries div.selected {
	top:0;
	position: absolute;
}
.industries.opened div.selected {
	top:unset;
	position: unset;
	background-color:var(--lcol);
}

.industries.opened div:last-of-type {
	border-radius:0 0 7px 7px;
}
.industries.opened:after {
	content:'';
	display:block;
	position:absolute;
	height:1px;
	width:10px;
	border-top:2px solid #0007;
	border-left: none;
	border-right: none;
	right:7px;
	top:20px;
	margin-top:-5px;
	pointer-events:none;
	transform:rotate(45deg);
}
.industries.opened:before {
	content:'';
	display:block;
	position:absolute;
	height:1px;
	width:10px;
	border-top:2px solid #0007;
	border-left: none;
	border-right: none;
	right:7px;
	top:20px;
	margin-top:-5px;
	pointer-events:none;
	transform:rotate(-45deg);
}
.videoSection {
    width: 100%;
    height: 500px;
    padding: 0;
    margin: 65px 0 0 0;
    position: relative;
    background-color: #ffffff;
    border: 2px solid #AAA;
    border-radius: 3px;
}
.videoSection h3 {
    display: block;
    position: absolute;
    top: -55px;
    width: 50%;
    line-height: 55px;
    left: 0;
    height: 67px;
    color: #FFF;
    font-size: 25px;
    padding-left: 15px;
    background-color: #333;
    border-radius: 8px;
	 min-width: 242px;
}
.videoSection h3 span {
    display: block;
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    color: var(--rcol);
    background-color: #D00;
    border-radius: 4px;
    margin: 13px;
}
.videoSection h3 span:after {
    display: block;
    content: '';
    position: absolute;
    top: -6px;
    left: -4px;
    width: 0px;
    height: 0px;
    color: var(--rcol);
    margin: 13px;
    border-left: 14px solid #FFF;
    border-bottom: 7px solid transparent;
    border-top: 7px solid transparent;
}
.videoSection h3:before {
    content: '';
    display: block;
    position: absolute;
    bottom: 4px;
    width: 98%;
    line-height: 3px;
    left: 1%;
    z-index: 2;
    height: 0px;
    color: #FFF;
    padding-left: 0px;
    border-bottom: 6px dashed #FFF;
}
.videoSection h3:after {
    content: '';
    display: block;
    position: absolute;
    top: 4px;
    width: 98%;
    line-height: 3px;
    left: 1%;
    z-index: 2;
    height: 0px;
    color: #FFF;
    padding-left: 0px;
    border-bottom: 6px dashed #FFF;
}
.equiptype {
    position: relative;
    width: 100%;
    height: 100px;
    background-color: #FFF;
    margin-top: -140px;
    z-index: 1;
    margin-bottom: 140px;
}
.equiptype .wrapper {
	overflow:hidden;
	width:calc(100% - 30px);
}
.equiptype:before {
    content: '';
    display: block;
    position: absolute;
    width: calc(100vw - 6px);
    height: 100%;
    left: 50%;
    margin-left: -50vw;
    top: 0;
    background-color:#FFF;
    z-index: -1;
}
.equiptype span.typehead {
    font-size: 20px;
    line-height: 1em;
    height: 100px;
    display: inline-block;
    transform: translateY(-35px);
    font-weight: bold;
}
.equiptype .allequiptypes {
	white-space:nowrap;
	height:100px;
	width:fit-content;
	position: relative;
	transition:left ease 300ms;
	left: 0px;
}
.equiptype div.eachtype {
    display: inline-block;
    margin: 0 10px;
    height: 100px;
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    text-align: center;
	cursor:pointer;
	transition: background-color 200ms ease;
}

.equiptype div.eachtype:hover {
	background-color:#EEEFEF;
}

.equiptype div.eachtype {
    display: inline-block;
    margin: 0 10px;
    height: 100px;
    width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    text-align: center;
}
.equiptype div.eachtype img {
	height:50px;
	width:50px;
	object-fit:contain;
	margin-top:15px;
	mix-blend-mode: multiply;
}
.productlist{
	position:relative;
	display:block;
	background-color:#FFF;
	height: 390px;
	border-radius: 10px;
	text-decoration:none;
	cursor:pointer;
	transition:box-shadow 200ms ease;
	overflow:hidden;
}
a.productlist:focus {
	text-shadow:none;
}
.productlist:hover {
	box-shadow:0 0 10px rgba(0,0,0,0.5);
	z-index:2;
	text-decoration:none !important;
}
.typeh4 {
	width:100%;
	clear:both;
	margin:60px 0 20px 0;
}
.typeh4:first-of-type {
	margin:20px 0;
}
.productlist h5 {
    display: table;
    line-height: 1em;
    text-align: center;
    padding: 5px 0;
    height: 70px;
    font-weight: bold;
    font-size: 18px;
    color: var(--dcol);
    width: 94%;
    margin-left: 3%;
    background-color: #FFF;
    z-index: 3;
    position: relative;
}
.productlist h5 span {
	width: 100%;
	display: table-cell;
	vertical-align: middle;
}
.productlist img {
	width:90%;
	margin-left:5%;
	height:200px;
	object-fit:contain;
	transition:transform 200ms ease, filter 400ms ease, opacity 400ms ease;
}
.productlist:hover img {
	transform:scale(0.9);
}
.productlist button, .productlist .button{
	margin:8px  0;
	width:100%;
	max-width: 100%;
	clear: both;
    display: block;
    padding: 5px;
    border-radius: 5px;
}
.totop {
	width:30px;
	height:30px;
	border-radius:30px;
	background-color:#FFF;
	box-shadow:0 4px 11px rgb(0 0 0 / 50%);
	cursor:pointer;
	transition: background-color 200ms ease;
	position:fixed;
	bottom: 69px;
    right: 20px;
	z-index:999;
}
.totop:after {
    transform: rotate(45deg);
    border-top: 2px solid #666;
    border-left: 2px solid #666;
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    top: 12px;
    left: 10px;
	transition: top 200ms ease;
}
.totop:hover {
	background-color:var(--rcol);
	    animation: bop 1500ms infinite ease;
}

.totop:hover:after {
    border-top: 2px solid #FFF;
    border-left: 2px solid #FFF;
}
.featuredspecs {
	font-size:12px;
	color:#333;
	padding:15px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
	text-align:center;
   position: relative;
    /*bottom: -110px;*/
    transition: transform 400ms ease;
    z-index: 99;
}
.productlist:hover .featuredspecs {
    transform: translateY(-100px);
}
.productlist:hover img {
    filter: blur(3px);
    opacity: 0.2;
}
.darksection {
	background-color:#333;
	color:#FFF;
	width:100%;
	position:relative;
	margin:50px 0;
	padding:100px 0;
	z-index:1;
}

.darksection:before {
	top:0;
	background-color:#333;
	position:absolute;
	content:'';
	display:block;
	height:100%;
	width:calc(100vw - 6px);
	left:50%;
	margin-left:-50vw;
	z-index:-1;
}

.lightsection {
	background-color:#FFF;
	color:#666;
	width:100%;
	position:relative;
	margin:50px 0;
	padding:100px 0;
	z-index:1;
}

.lightsection:before {
	top:0;
	background-color:#FFF;
	position:absolute;
	content:'';
	display:block;
	height:100%;
	width:100vw;
	left:50%;
	margin-left:-50vw;
	z-index:-1;
}
.greysection {
	background-color:#DDD;
	color:#666;
	width:100%;
	position:relative;
	margin:50px 0;
	padding:100px 0;
	z-index:1;
}

.greysection:before {
	top:0;
	background-color:#DDD;
	position:absolute;
	content:'';
	display:block;
	height:100%;
	width:100vw;
	left:50%;
	margin-left:-50vw;
	z-index:-1;
}
.moveleft {
	position:absolute;
	right:0;
	top:0;
	height:100%;
	width:30px;
	cursor:pointer;
	transition: all 200ms ease;
}

.moveleft.moveright {
	transform:rotate(180deg);
}
.moveleft:after {
    width: 20px;
    height: 20px;
    content: '';
    border-bottom: 2px solid #333;
    border-right: 2px solid #333;
    transform: rotate(-45deg);
    position: absolute;
    top: 38px;
	transition: all 200ms ease;
}
.moveleft.disabled {
	pointer-events:none;
	border: none;
}
.moveleft:hover:after, .moveleft.disabled:after {
    border-bottom: 2px solid #DDD;
    border-right: 2px solid #DDD;
}
.shoppingCart {
    position: absolute;
    width: 300px;
    min-height: 300px;
    padding: 15px 0;
    background-color: rgba(255,255,255,0.7);
    backdrop-filter: blur(5px);
    right: 0;
    z-index: 9999999999999999;
    border-radius: 5px;
    filter:drop-shadow(-5px 5px 25px #000);
    display: none;
	max-height: 400px;
	margin-top: 12px;
}
.shoppingCart:before {
    border-bottom: 7px solid rgba(255,255,255,0.7);
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    content: '';
    display: block;
    position: absolute;
    right: 5px;
    top: -57px;
    padding-bottom: 50px;
    pointer-events: none;
}
.gotocart {
    position: absolute;
    bottom: 15px;
	left: 15px
}
.clearcart {
    position: absolute;
    bottom: 15px;
    right: 15px;
}
.cartitem, .noteitem {
    display: block;
    border-bottom: 1px solid #AAA;
    margin-bottom: 5px;
    padding: 0px 0 5px 0;
	transition:color 300ms ease;
	cursor: -webkit-zoom-in;
	cursor: zoom-in;
	position: relative;
	height: 55px;
}
.cartitem:hover, .noteitem:hover {
	color:#FFF;
}
.cartitem input[type="number"]{
	width:50px;
}

.cartitem span {
    line-height: 2.5;
    padding: 0 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
	width: 100%;
    display: block;
	color: var(--dcol);
    font-weight: bold;
}
.cartitem span font {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-flex;
    width: calc(100% - 40px);
}
.noteitem span {
    flex: 2;
    line-height: 2.5;
    padding: 0 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.noteitem span {
    padding-right: 0;
    width: 84%;
    flex: unset;
    display: inline-block;
}
.noteitem span + .del{
    position: absolute;
    right: 0;
	top: 0;
}
.noteitem span + .del + small {
    position: absolute;
    right: -9px;
    font-style: italic;
    font-size: 11px;
    bottom: 0;
	color:var(--Dcol) !important;
}
.cartitem img {
    display: inline-block;
    width: 30px;
    height: 30px;
    object-fit: cover;
    background-color: #FFF;
    border-radius: 5px;
    box-shadow: -4px 4px 9px rgb(0 0 0 / 70%);
	transition:all 300ms ease;
	position: relative;
    left: -10px;
}
.cartitem .cartqty{
    display: inline-block;
    width: 49%;
    padding-left: 46px;
    color: #777;
}
.cartitem .cartprice {
    display: inline-block;
    width: 49%;
    color: #000;
    right: 0;
    position: absolute;
    text-align: right;
}
.cartitems {
	position:relative;
}
.cartitems {
	position:relative;
}

.cartitems .deleteCartitem {
    top: 30px;
    right: 13px;
}
.HighlightRow:hover .fullcartitem, .HighlightRow:hover .del, .HighlightRow:hover .removeAddon, .HighlightRow:hover .retreiveAddon {
    filter: saturate(0.4);
}
.fullcartitem {
    position: relative;
    padding-left: 100px;
    font-weight: bold;
	color:var(--rcol);
	margin-top: 25px;
	mix-blend-mode: multiply;
}
.fullcartitem span {
    font-size: 14px;
    font-weight: normal;
    width: calc(100% - 100px);
    display: inline-block;
}
.fullcartitem  .fullcartprice {
    text-align: right;
    display: inline-block;
    right: 0;
    position: absolute;
	font-weight:normal;
	color:#666;
    border: 1px solid transparent;
}

.fullcartitem  .fullcartprice[contenteditable="true"] {
	cursor:text;
	transition:all ease 300ms;
}
.fullcartitem  .fullcartprice[contenteditable="true"]:hover, .fullcartitem  .fullcartprice[contenteditable="true"]:focus {
    border: 1px solid #AAA;
    border-radius: 5px;
}
.specTable .fullcartitem img{
    height: 100px;
    position: absolute;
    top: -20px;
    margin-right: 0;
    float: none;
	left: -15px;
	width: 100px;
    object-fit: contain;
}
.addons {
	margin: 35px 0;
	padding:15px;
	background-color:#DDD;
	border-radius:5px;
	font-size:12px;
	text-align: left;
}
.addons:empty {
    background-color: transparent;
    padding: 0;
	margin-bottom:0;
}
.addon {
	position:relative;
	height: 30px;
    border-bottom: 1px solid #EEE;
}
.addon:hover {
	color:var(--rcol);
	text-shadow:0 0 5px #FFF;
}
.addon:last-of-type {
    border-bottom: none;
}
.addonprice {
    float: revert;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 12px;
    padding-right: 35px;
}
.removeAddon, .retreiveAddon {
    width: 20px;
    height: 20px;
    background-image: url(../images/delbutton.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
    top: 0;
	cursor:pointer;
}

.retreiveAddon {
    background-image: url(../images/enable.png);
}
.removeAddon:hover, .retreiveAddon:hover {
	animation:wiggle 2000ms ease forwards;
}
.addon.removed {
	opacity:0.4;
	text-decoration: line-through;
}
.addon.removed .addonprice font {
	opacity:0.8;
	text-decoration: line-through;
}
.info {
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 42px;
    right: 12px;
    border: 2px solid #FFF;
    border-radius: 20px;
    text-align: center;
    line-height: 16px;
    font-style: italic;
    font-weight: bold;
    font-family: "MS Serif", "New York", serif;
    font-size: 18px;
    background-color: #000;
    color: #FFF;
    box-shadow: -3px 5px 12px #000;
    cursor: help;
    z-index: 9;
}
.addons:empty + .info {
	display:none;
}
.info:after {
    content: attr(alt);
    display: block;
    position: absolute;
    background-color: #FFE;
    padding: 10px;
    color: #000;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    width: 380px;
    font-weight: normal;
    border-radius: 5px;
    left: -355px;
    top: -0px;
    font-size: 15px;
    font-family: system-ui;
    opacity: 0;
    pointer-events: none;
    transition: all 300ms ease;
    white-space: pre-line;
}
.info:hover:after {
    z-index: 9999;
	opacity:1;
    top: -39px;
}
.dealerProduct .info {
    top: 0;
    left: 10px;
    width: 30px;
    height: 30px;
    font-size: 27px;
    line-height: 25px;
    border: 3px solid #FFF;
    cursor: pointer;
}
.dealerProduct .info:after {
	left: 0;
    top: 35px;
	width: 200px;
	line-height: 1.5;
}
.info:hover {
	z-index:999;
}
.dealerProduct .info:hover:after{
    top: 0;
}
.dealerProduct .info.tooltip-right:after {
    left: auto;
    right: 0;
}
.productPrice {
    color: #666;
    font-size: 30px;
    margin: 0px 0 38px 0;
    display: block;
    border-radius: 5px;
    line-height: 23px;
    position: relative;
}
.productPrice .info {
	bottom:8px;
}
.cartTotal {
    position: absolute;
    padding: 15px;
    bottom: -104px;
    border-radius: 0 0 10px 10px;
    right: 6px;
    background-color: #f5f5f5;
    border: 1px solid #BBB;
    border-top: 1px solid #f5f5f5;
    text-align: right;
    width: 210px;
}
.cartTotal .total{
    border-top: 1px solid #666;
}
.questiontag:hover .cartTotal {
    background-color: #FFF;
    border-top: 1px solid #FFF;
}
.noteitem img {
	display: inline-block;
    border-radius: 100%;
    border: 2px solid var(--rcol);
    width: 40px;
    height: 40px;
    box-shadow: -4px 4px 9px rgb(0 0 0 / 70%);
	transition:all 300ms ease;
    object-fit: cover;
    background-color: #FFF;
}
.noteitem span a {
    color: #333;
    display: inline;
    height: 100%;
    width: 100%;
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.noteitem span:hover a {
    color: var(--dcol);
	text-decoration:none;
}
img.gone {
    filter: saturate(0.5);
    border-color: #BBB !important;
}
.cartLargeImg.cartitem, .cartLargeImg.noteitem {
	cursor: -webkit-zoom-out;
	cursor: zoom-out;
}
.cartLargeImg.cartitem img, .cartLargeImg.noteitem img {
	transform:scale(5) rotate(10deg);
	z-index:9999999999999999;
	position: fixed;
}
.cartLargeImg.cartitem:hover img, .cartLargeImg.noteitem:hover img {
	transform:scale(5) rotate(10deg);
}
.cartitem:hover img, .noteitem:hover img {
	transform:rotate(10deg);
}
.del {
	display:block;
	width:20px;
	height:20px;
	background-image:url(../images/delbutton.png);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center center;	
    cursor: pointer;
	transition:all ease 300ms;
}
.del:hover {
	animation:wiggle 2000ms ease forwards;
}
.deleteCartitem {
    position: absolute;
    top: -6px;
    right: -3px;
    width: 25px;
    height: 25px;
    translate: 0 7px;
	z-index: 99999;
}
.deleteNoteitem {
    transform: translate(7px, 5px);
	background-image: url(../images/del.png);
}
.altExtra {
    width: 20px;
    padding: 0 12px;
    height: 16px;
    position: relative;
    border: none;
	background-color:transparent;
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23777777%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);
	translate: 5px 5px;
}

.altExtra:hover {
	background-color:#EEE;
}
.cart.cartScrolled {
    position: fixed !important;
    top: 0px;
    right: 0; /*30px*/
    height: 20px;
    z-index: 99999;
}
.cart.cartScrolled .cartIcon {
	filter: brightness(1.5) saturate(0) drop-shadow(-1px 1px 1px #FFF);
}
.cart.cartScrolled:hover .cartIcon {
	filter: brightness(0.8) saturate(0) drop-shadow(-1px 1px 1px #FFF);
}
.cartOptions {
    width: 185px;
    padding: 0 12px;
    height: 25px;
    position: relative;
    border-radius: 5px;
    cursor: pointer;
   /* top: 52px;*/
    background-color: var(--lcol2);
    font-size: 18px;
    line-height: 23px;
    padding-left: 33px;
    color: var(--dcol);
    font-weight: normal;
}
.cartOptions:hover {
	background-color:#666;
	color: #FFF;
}
.cartOptions:before {
    content: '';
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    border-top: 8px solid #777;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    top: 8px;
    left: 12px;
}
.cartOptions:hover:before {
    border-top: 8px solid #FFF;
}

.cartOptions:after {
	content:'Machine Options';
}
.altExtra options {
	padding:5px;	
}
.cartOptionsBox {
    display: none;
    background: #fff;
    border: 1px solid #CCC;
    box-shadow: -2px 2px 5px rgba(0,0,0,0.4), -2px 2px 50px rgba(0,0,0,0.4);
    width: 100%;
    position: relative;
    margin-top: 25px;
   	padding: 50px;
    border-radius: 5px;
    z-index: 999999999999999999999;
}
.cartOptionsBox input[type="checkbox"]:first-of-type, .cartOptionsBox input[type="radio"]:first-of-type {
	 margin-top: 25px;
}
.cartOptionsBox h4 {
    font-size: 12px;
}
.cartlist {
    max-height: 320px;
    margin-bottom: 50px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 14px;
    width: 100%;
}
.prodimg {
    width: 150%;
    max-width: 200%;
    object-fit: contain;
    cursor: pointer;
    position: absolute;
    top: -62%;
    left: -20%;
    z-index: 99;
}
h1.productType {
    font-family: 'Impact';
    font-weight: normal;
    margin-bottom: 13px;
}
h1.productType strong {
    font-weight: bold;
    position: relative;
    color: #666;
    font-size: 5vw;
    display: block;
    clear: both;
}
.productbutton {
    max-width: 100%;
    width: 100%;
    margin: 10px 0 40px 0;
}
.enlarger {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 99999999999999999;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    display: none;
    background-image: url(../images/Loading_icon.gif);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50px;
}
.enlarger::after {
    content: attr(alt);
    display: block;
    position: absolute;
    background-color: rgba(0,0,0,0.4);
    padding: 12px;
    bottom: 5px;
    left: 50%;
    transform: translate(-50%,-23%);
    border-radius: 5px;
    backdrop-filter: blur(6px);
    border: 2px solid #FFF;
    color: #FFF;
}
.enlarger iframe {
    display: block;
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    border-radius: 10px;
    box-shadow: 0 0 15px #000;
}
.enlarger .content {
    position: absolute;
    top: 5%;
    left: 15%;
    width: 70%;
    height: 90%;
    background-color: rgba(255,255,255,0.9);
    border-radius: 7px;
    box-shadow: 0 0 17px #000;
    border: 2px solid #FFF;
	overflow:hidden;
}

.enlarger .content img:not(.productpopup img) {
	width:100%;
	height:100%;
	object-fit:contain;
}
.galitems {
	position:relative;
    text-align: center;
        width: 100%;
}
img.galimg, div.galimg img, .galleryVideo img {
    width: max(30%, 270px);
    display: inline-block;
    margin: 1.5%;
    cursor: pointer;
    transition: all 200ms ease;
    border: 17px solid var(--xlcol) !important;
    box-shadow: 0px 6px 15px rgb(0 0 0 / 50%);
    border-radius: 7px;
    border-bottom: 50px solid var(--xlcol) !important;
    height: 300px;
    object-fit: cover;
	position:relative;
	z-index:1;
}
div.galimg {
    width: 30%;
    display: inline-block;
    margin: 1.5%;
    transition: all 200ms ease;
    height: 300px;
	position:relative;
	z-index:1;
}

 div.galimg img {
    width: 100%;
    display: block;
    margin: 0;
}

.galimgs {
    position: relative;
    display: inline-block;
    width: 33%;
}
.galimgs .galimg {
	width:95%;
	pointer-events:none;
}
.galleryVideo img {
	width:95%;
}
.galleryVideo:after {
	content:'';
	background-image:url(../images/play.png);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:contain;
	width:70px;
	height:70px;
	pointer-events:none;
	position:absolute;
	z-index:9;
	top:50%;
	left:50%;
	margin-left:-35px;
	margin-top:-35px;
	display:block;
}
.galimgs:after {
    content: attr(title);
    font-family: 'Autography';
    display: inline-block;
    position: absolute;
    z-index: 9;
    right: 22px;
    bottom: 17px;
    text-align: right;
    font-size: 36px;
	transition:all ease 300ms;
	pointer-events:none;
}
.galimg .galttl {
    display: block;
    position: absolute;
    z-index: 9;
    right: 15px;
    bottom: 17px;
    text-align: center;
    font-size: 15px;
    transition: all ease 300ms;
    pointer-events: none;
    width: calc(100% - 30px);
    height: 26px;
    line-height: 17px;
}
.galimg .galttl[contenteditable="true"] {
    cursor: text;
    background-color: #FFF;
    border-radius: 5px;
    border: 1px solid var(--rcol);
    pointer-events: all;
    height: 40px;
    padding: 2px;
    bottom: 5px;
    box-shadow: 0 0 22px 5px rgba(0,0,0,0.2);
}
.donthover div.galimg img {
	border: 17px solid #dddddd !important;
	opacity: 0.3;
}
.donthover div.galimg:hover img, .donthover div.galimg .galttl.editGalTitle:focus + img {
	border: 17px solid #FFF !important;
	opacity: 1;
}
.galleryVideo {
	position:relative;
	display:inline-block;
	width:33%;
    transition: all 200ms ease;
	cursor:pointer;
}
.galleryVideo span {
    position: absolute;
    bottom: 15px;
    left: 20px;
    width: calc(100% - 40px);
    height: 40px;
    text-align: center;
    color: #CCC;
    line-height: 40px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
	z-index:9;
}
.galimg:hover {
	transform:rotate(2deg) scale(1.1);
	z-index:9;
}
.galimgs:hover:after, .galimgs:hover .galimg, .galleryVideo:not(.loading):hover {
	transform:rotate(2deg) scale(1.1);
	z-index:9;
}
.galimgs:hover:after {
	transform:rotate(0deg) scale(1.1) translate(0px, 10px);
	z-index:9;
}
.sent {
    position: fixed;
    color: #FFF;
    background: linear-gradient(0deg, #090, #CF7);
    padding: 5px;
    width: 100%;
    display: block;
    text-align: center;
    top: 0;
    left: 0;
    z-index: 999999999999999;
    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
}
.sent .closer {
	transform: scale(0.5) translateY(-47px);
}
.galitems:not(.donthover) .galimg:nth-of-type(odd):hover {
	transform:rotate(-2deg) scale(1.1);
	z-index:9;
}
.galitems.donthover .galimg:nth-of-type(odd):hover, .galitems.donthover .galimg:nth-of-type(even):hover {
	transform:rotate(0deg) scale(1);
}
.galitems:not(.donthover):hover .galimg:not(:hover), .videoThumbs:hover .galleryVideo:not(:hover) {
	opacity:0.6;
	transform:scale(0.9);
}

.galprev, .galnext {
    position: absolute;
    top: 50%;
    z-index: 999;
    border-bottom: 10px solid #FFF;
    width: 30px;
    height: 30px;
    cursor: pointer;
    opacity: 0.6;
	transition:opacity 200ms ease;
}
.galprev {
    left: 2%;
    border-left: 10px solid #FFF;
    transform: rotate(45deg);
}
.galnext {
    right: 2%;
    border-right: 10px solid #FFF;
    transform: rotate(-45deg);
}
.hiddenVideo {
	display:none;
}
.galprev:hover, .galnext:hover {
	opacity:1;
	filter:drop-shadow(0 0 4px #a00) drop-shadow(0 0 5px #a00) drop-shadow(0 0 7px #a00);
}
.galprev.disabled, .galnext.disabled {
	opacity:0.1;
	pointer-events:none;
	    border: none;
}
.selectorsContainer {
    width: 100%;
    position: relative;
    margin-top: 70px;
    z-index: 999;
}
.selectors {
    width: 100%;
    text-align: left;
    position: absolute;
    margin-top: 0px;
	top:0;
}
.selectors:before {
	background-color: #EEE;
    content: '';
    position: absolute;
    top: 0;
    width: calc(100vw - 6px);
    left: 50%;
    margin-left: -50vw;
    display: block;
    height: 100%;
    z-index: -9;
	pointer-events:none;
	backdrop-filter:blur(3px);
	transition:background-color 400ms ease;
}
.selectors.selectorScrolled {
	position:fixed;
	top:55px;
}
.selectorScrolled:before {
    height: 42px;
    left: 0;
    top: unset;
    margin-left: 0;
    position: fixed;
    background-color: rgba(238,238,238,0.9);
    box-shadow: 0 3px 10px rgba(0,0,0,0.8);
}
.selectorScrolled .specselector.selected {
    background-color: transparent;
}
.selectorScrolled:hover .specselector.selected {
    background-color: #FFF;
}
.selectorScrolled:hover:before {
	background-color: rgba(238,238,238,1);
}
.specselector {
    position: relative;
    width: fit-content;
    display: inline-block;
    height: 42px;
    border-left: 1px solid rgba(150,150,150,0.5);
    padding: 8px 15px;
    border-bottom: 1px solid rgba(150,150,150,0.5);
	background-color:#EEE;
	cursor:pointer;
}

.specselector:last-of-type {
    border-right: 1px solid rgba(150,150,150,0.5);
}
.specselector:hover {
	background-color:#FFF;
}
.specselector.selected {
	border-bottom:3px solid var(--rcol);
	background-color:#FFF;
}
.specselector.selected:after {
    content: '';
    display: block;
    bottom: -10px;
    border-top: 10px solid var(--rcol);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    left: 50%;
    margin-left: -4px;
    position: absolute;
}
.specs {
	display:none;
}
.specs.selected {
	display:block;
}

.specTableOverflow {
	display:block;
    overflow-y: visible;
    overflow-x: auto;
	width:100%;
}
.specTable {
    text-align: left;
    width: 100%;
}
.specTable th {
    border-bottom: 2px solid var(--rcol);
    margin-bottom: 15px;
    background-color: #000;
    padding: 15px;
    color: #FFF;
    text-align: center;
}
.specTable tr td {
	color: #FFF;
	padding:15px;	
    min-height: 51px;
    /*line-height: 51px;*/
	border-bottom:1px solid var(--dcol2);
	border-right:1px solid var(--dcol2);
}
.specTable tr td:last-of-type {
	border-right:none;
}

.specTable tr td {
	background-color:#000;
    
}
.specTable tr:hover td {
	background-color: var(--vdcol2);
	color: var(--rcol);
	
}

.specTable img {
    height: 30px;
    float: right;
    margin-right: 15px;
}
.specgroups{
	border:1px solid var(--dcol);
	border-bottom:none;
}
.specTable tr.groupSpec td:nth-of-type(even), .specTable tr.groupSpec td:nth-of-type(odd) {
    border-bottom: 2px solid var(--rcol);
    margin-bottom: 15px;
    background-color: #FFF;
    padding: 15px;
	font-weight:bold;
}
.specTable tr.groupSpec td:nth-of-type(even) {
    background-color: #FAFAFA;
}
@property --myColor1 {
  syntax: '<color>';
  initial-value: transparent;
  inherits: false;
}

@property --myColor2 {
  syntax: '<color>';
  initial-value: transparent;
  inherits: false;
}

.specheader {
	position:relative;
	padding: 15px;
	cursor:pointer;
	color:#FFF;
	transition: all 300ms ease, --myColor2 100ms ease, color 100ms ease;
	background:linear-gradient(var(--myColor1), var(--myColor2));
	text-align:left;
	padding-left:20px;
}
.openHeader {
	--myColor1:var(--dcol);
	--myColor2:var(--vdcol);    
}
.specgroups.selected {
	box-shadow: 0 0 15px rgba(0,0,0,0.4);
	position:relative;
}
.specheader:hover, .specgroups.selected .specheader {
	--myColor1:var(--dcol);
	--myColor2:var(--vdcol);
}
.specgroups.selected .specheader, .specgroups.selected .specheader:hover {
	--myColor1: #787878;
    --myColor2: #323232;
	color:#FFF;
	font-weight:bold;
	font-size:18px;
}

.specheader:after {
	content:'';
	display:block;
	position:absolute;
	right:25px;
	top:17px;
	border-top:10px solid #FFF;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	transition:all ease 300ms;
}

.openHeader {
	--myColor1:var(--dcol);
	--myColor2:var(--vdcol);    
}

.specgroups.selected .specheader:after, .specgroups.selected .specheader:hover:after, .openHeader.specheader:after {
	border-top:10px solid var(--lcol);
	transform:rotate(180deg);
}
.specgroups:last-of-type{
	border-bottom:1px solid var(--dcol);
	border-radius:0 0 5px 5px;
}
.specgroups:first-of-type{
	border-radius:5px 5px 0 0;
}
.specgroups:only-of-type{
	border-radius:5px;
}
.specsGroup {
	display:none;
}
.otherprod {
    display: inline-block;
    position: relative;
    margin: 0 10px 15px 10px;
    width: 200px;
    height: 150px;
    border: 1px solid var(--rcol);
    border-radius: 12px;
    overflow: hidden;
	cursor:pointer;
}
.otherprod img {
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform 200ms ease;
}

.otherprod:hover img {
	transform:scale(1.3);
}
.otherprod span {
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: center;
    height: 40px;
    line-height: 40px;
    display: block;
    width: 100%;
    color: #FFF;
    background: linear-gradient(transparent, rgb(var(--rgbcol), 0.7));
    backdrop-filter: blur(2px);
	box-shadow: 0 0 4px #fff;
}
.tags {
	text-align:left
}
.tags h6 {
    text-align: left;
    height: 0;
    margin-top: 60px;
    margin-bottom: 10px;
}
.tags h6:after {
    bottom: 0;
    left: 0;
    width: 100%;
}
.tags a {
    display: inline-block;
    background-color: #e3e3e3;
    line-height: 30px;
    margin: 2px;
    padding: 3px 10px;
    border-radius: 5px;
    color: #777;
}
.tags a:hover {
    background-color: #666;
    color: #FFF;
	text-decoration:none;
}
/*Search*/
.searchResult {
    display: inline-block;
    padding: 15px 0;
    clear: both;
    margin: 0px 0 5px 20px;
    font-size: 13px;
    position: relative;
    width: calc(100% - 220px);
}
.searchImage {
    display: inline-block;
    width: 200px;
    height: 150px;
}
.searchImage img{
    width: 200px;
    height: 150px;
    object-fit: contain;
    translate: 0 -27px;
    transition: transform 300ms ease;
}

.searchImage:hover img{
    transform: scale(1.1);
}
.searchResult h3 {
	margin-bottom:0;
	color:var(--lcol);
}

.searchH2{
    font-size: 2rem;
    font-weight: bold;
    color: #FFF;
    background-color: var(--rcol);
    text-align: center;
    border-radius: 11px;
    padding: 5px;
    text-shadow: 0 0 10px #000;
}
.searchResult a {
    margin-bottom: 15px;
    display: block;
    color: #CCC;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.searchResult a:hover {
	text-decoration:none;
}

.searchResult a:hover h3 {
	color:var(--dcol);
	text-decoration:none;
}
.searchText {	
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.bolder {
	text-decoration:underline;
	font-weight:bold;
	color:var(--rcol);
}
.editthisproduct {
    position: absolute;
    right: -21px;
    bottom: 42px;
}
.editthisproduct img {
	height:30px;
}

.editthisproduct:hover img {
	animation: wiggle forwards ease 1s;
}
.filterButton {
    position: absolute;
    width: 100px;
    height: 40px;
    border: 1px solid #AAA;
    border-radius: 5px;
    text-align: center;
    margin-top: -61px;
    line-height: 37px;
    cursor: pointer;
    padding-right: 26px;
    transition: all 300ms ease;
    top: -9px;
    right: 26px;
}
.filterButton:after {
	position:absolute;
	content:'';
	display:block;
	height:10px;
	width:10px;
	border-bottom:2px solid #333;
	border-left:2px solid #333;
	transform:rotate(-45deg);
	top:14px;
	right:18px;
}
.filterButton:hover {
	background-color:#EEE;
}
.filter {
    position: absolute;
    width: 100%;
    height: 220px;
    border: 1px solid #AAA;
    border-radius: 5px;
    margin-top: 0px;
    left: 0;
    top: -98px;
    z-index: 999;
    box-shadow: 0 0 55px rgb(0 0 0 / 50%);
    background-color: #F8F8F8;
	display:none;
	padding: 50px;
}
.filterUp {
    position: absolute;
    display: block;
    height: 20px;
    width: 20px;
    transform: rotate(45deg);
    top: 15px;
    right: 18px;
    cursor: pointer;
	font-size:32px;
}
.filterUp:hover {
	animation:bop 1500ms infinite ease;
	color:#900;
}
.filter .formInput {
    width: 30%;
    display: inline-block;
    margin: 1.5%;
}
.filter .formInput select {	
    height: 59px;
    padding: 16px;
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E), linear-gradient(to bottom, rgba(245, 245, 245, 1) 0%,rgba(255, 255, 255, 1) 100%);
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
}
.filter .formInput select:hover, .filter .formInput select:active, .filter .formInput select:focus {
	outline-color: var(--rcol);	
    background-image: url(data:image/svg+xml;;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E), linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%,rgba(255, 255, 255, 1) 100%);
}

.filter .formInput select option:hover {
	background-color:var(--rcol);
}
.clearfilter {
    display: inline-block;
    border-radius: 5px;
    border: 1px solid #EEE;
    padding: 13px;
    margin: 12px;
}
.isfiltered {
    position: absolute;
    top: -86px;
    width: calc(100% - 115px);
    line-height: 0px;
}
.vcard img.galimg {
    width: 100%;
    height: 400px;
}

.allvcards {
	margin:auto
}
.allvcards img:not(.premesis, .officePosImg) {
    cursor: pointer;
    display: inline-block;
    width: 100%;
    height: 200px;
    margin: 0 0 21px 0;
    border: 10px solid #FFF;
    border-bottom: 10px solid #FFF;
    transition: all 200ms ease;
    box-shadow: 0px 6px 15px rgb(0 0 0 / 50%);
    border-radius: 7px;
    object-fit: cover;
    position: relative;
}
.allvcards img:not(.premesis, .officePosImg):hover {
    transform: rotate(5deg) scale(1.2);
    z-index: 9;
}
.allvcards h3 {
    font-size: 1.2rem;
    font-weight: bold;
    color: #999;
    border-bottom: 2px solid var(--dcol);
    display: inline-block;
    margin-bottom: 13px;
}
.allvcards h2 {
    margin: 50px 0;
    background-color: #DDD;
    padding: 10px;
    color: #666;
    border-radius: 12px;
    text-align: center;
}
.allvcards .person {
	padding:25px;
	width: 100%;
	margin-bottom:50px;
	text-align: center;
}
.vcard a, .allvcards a.email, .allvcards a.whatsapp, .allvcards a.contact {
	display:block;
	background-color:#666;
	color:#FFF;
	margin:20px 0 20px 50px;
	padding:10px;
	border-radius:5px;	
	position:relative;
	transition:background-color ease 200ms;
	text-align:left
}


.vcard a.normal {
	display:block;
	background-color:#EEE;
	color:#666;
	transition:color ease 200ms;
}
.vcard a:hover, .allvcards a.email:hover, .allvcards a.whatsapp:hover, .allvcards a.contact:hover, .allvcards a.share:hover, .allvcards a.tel:hover, .allvcards a.cell:hover {
	background-color:#AAA;
	text-decoration:none;
}
.vcard a.normal:hover {
	background-color:var(--rcol);
	color:#FFF;
}

.vcard a:before, .allvcards a:before {
	content:'';
	position:absolute;
	display:block;
	width:40px;
	height:40px;
	left:-50px;
	top:0;
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
	filter:brightness(0.7) saturate(0) contrast(1);
	transition:filter ease 200ms;
}

.vcard a.tel:before, .allvcards a.tel:before {
	background-image:url(../images/signature_tel.png?v=1);
}
.vcard a.email:before, .allvcards a.email:before {
	background-image:url(../images/signature_mail.png?v=1);
}
.vcard a.cell:before, .allvcards a.cell:before {
	background-image:url(../images/signature_cell.png?v=1);
}
.vcard a.sms:before, .allvcards a.sms:before {
	background-image:url(../images/signature_sms.png?v=1);
}
.vcard a.website:before, .allvcards a.website:before {
	background-image: url(../images/signature_web.png?v=1);
}
.vcard a.contact:before, .allvcards a.contact:before {
	background-image: url(../images/contact_icon.png);
}

.vcard a.address {
	color:#666;
	background-color:#FFF;
	cursor:default;
}
.vcard a.address:hover {
	color:var(--rcol);
	background-color:#FFF;
}
.vcard a.address:before {
	background-image: url(../images/signature_address.png?v=1);
}
.vcard .whatsapp:before, .allvcards .whatsapp:before {
	background-image:url(../images/whatsapp.png?v=1);
	filter:brightness(0.7) saturate(0) contrast(3);
}
.vcard a:hover:before {
	filter:brightness(1) saturate(1) contrast(1);
}
.vcard a.social, .vcard a.share, .allvcards a.share, .allvcards a.email, .allvcards a.whatsapp, .allvcards a.contact {
    display: inline-block;
    background-color: transparent;
    margin: 16px 16px 0 0;
    padding: 10px;
    border-radius: 5px;
    width: 45px;
    height: 50px;
    position: relative;
}
.allvcards a.share, .allvcards a.email, .allvcards a.whatsapp, .allvcards a.contact {
    margin: 0;
    padding: 0;
    width: 45px;
}
.allvcards .extraInfo a.email, .allvcards .extraInfo a.tel, .allvcards .extraInfo a.cell {
    width: 96%;
    padding: 0 0 0 53px;
    height: 24px;
    margin: 7px 0 0 2%;
    display: block;
    text-align: left;
    color: #FFF;
	position:relative;
	border-radius:5px;
}

.allvcards .extraInfo a.email:before, .allvcards .extraInfo a.tel:before, .allvcards .extraInfo a.cell:before {
    filter: brightness(4) saturate(0) contrast(1);
    height: 19px;
    margin-top: 2px;
    left: 12px;
}
.allvcards .extraInfo a.cell:before {
    left: 7px;
}
.allvcards .extraInfo a.tel:before {
    left: 8px;
}
.allvcards a.share:before, .allvcards a.email:before, .allvcards a.whatsapp:before, .allvcards a.contact:before {
	left: 7px;
	width: 30px;
    height: 30px;
	margin-top:10px;
}
.allvcards a.share:hover:before, .allvcards a.email:hover:before, .allvcards a.whatsapp:hover:before, .allvcards a.contact:hover:before {
	filter: brightness(4) saturate(0) contrast(1);
}
.vcard a.share, .allvcards a.share {
	z-index:9;
	cursor:pointer;
}
.vcard a.share:before, .allvcards a.share:before {
    background-image: url(../images/share.png);
    left: -5px;
    top: -2px;
    width: 44px;
    height: 44px;
    z-index: 9;
    cursor: pointer;
    filter: brightness(0.9);
    transition: all 200ms ease;
    border-radius: 50px;
    box-shadow: 0 0 0 4px rgb(140 181 223);
}
.vcard a.share:hover:before, .allvcards a.share:hover:before {
    filter: brightness(1.2);
	transform:scale(1.2);
}
.vcard a.social:after {
	transform:scale(1.8);
	transition:all 200ms ease;
}
.vcard a.social:hover:after {
	transform:scale(2);
	filter: brightness(1.5);
}
.nameh1 {
	position:relative;
}
.nameh1 small {
	position:absolute;
	left:0;
	bottom:-20px;
	font-size:14px;
	color:#CCC;
	font-style:italic;
}
.shareBox {
	display:none;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 13px;
    position: absolute;
    width: 340px;
    z-index: 9;
    background-color: rgba(240,240,240,0.7);
    box-shadow: -4px 8px 15px rgb(0 0 0 / 50%);
    backdrop-filter: blur(11px);
}
.offset-half {
	margin-left:4%;
}
.registerWarranty {
    display: none;
    padding: 50px 30px 10px 50px;
    margin-top: 30px;
    background-color: #F3F3F3;
    border-radius: 5px;
	position:relative;
}

.registerWarranty .closer{
	transform:scale(0.5);
}
.warrentyContainer {
	text-align:left;
}
.warrentyContainer .formInput {
    margin-top: 15px;
}
.warrentyContainer .formInput label.overwrite {
    font-size: 15px;
    top: -10px;
}
.questiontag.greyonly:hover {
background-color: #EEE;
}
.questiontag.greyonly:not(.unavailable):hover:after, .greyonly.questiontag.unavailable:hover:before {
	background-color: #EEE;
    border-bottom: 1px solid #EEE;
}

.questiontag .formInput input[type="text"].dsign {
	height:100px;
	pointer-events:none;
	background-color:transparent;
	border:none;
	border-bottom:1px solid #999;
	border-radius: 0;
	text-align:center;
	font-family: 'Autography';
	font-size:50px;
}
.hasDatepicker {
    background-image: url(../images/datepicker.png);
    background-repeat: no-repeat;
    background-position: 99% 4px;
    background-size: 30px;
    cursor: pointer;
}
.sortby {
	position:absolute;
	right:0;
	top:-60px;
	height:40px;
	width:150px;
	border-radius:5px;
	cursor:pointer;
	padding: 0;
	overflow: hidden;
	z-index: 9;
}
.sortby:after {
	content:'';
	display:block;
	border-top:8px solid #999;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	position:absolute;
	top:15px;
	right:10px;
	z-index:99;
    transition: all ease 200ms;
    filter: drop-shadow(0 0 3px #FFF) drop-shadow(0 0 4px#FFF) drop-shadow(0 0 5px #FFF) drop-shadow(0 0 3px #FFF);
}
.sortby:hover:after {
    filter: drop-shadow(0 0 3px var(--rcol)) drop-shadow(0 0 4px var(--rcol)) drop-shadow(0 0 5px var(--rcol)) drop-shadow(0 0 3px var(--rcol));
	border-top:8px solid #FFF;
}
.sortby.opened {
	overflow: visible;
	filter:drop-shadow(0 0 15px rgba(0,0,0,0.5));
}
.sortby.opened:after {
	display: none;
}

.sortby div {
    height: 40px;
    width: 150px;
    position: relative;
    pointer-events: none;
    background: #FFF;
    transition: all ease 100ms;
    z-index: 1;
    padding: 6px;
    border: 1px solid #CCC;
    border-radius: 5px;
	white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.sortby:not(.opened):hover div, .sortby.opened div:hover {
	background-color:var(--rcol) !important;
	color:#FFF;
}
.sortby.opened div {
    pointer-events: all;
    opacity: 1 !important;
    border: 1px solid #FFF;
    border-bottom: 1px solid #EEE;
    border-radius: 0;
}
.sortby.opened div:last-of-type{
    border-radius: 0 0 5px 5px;
    border-bottom: 1px solid #FFF;
}
.sortby.opened div:first-of-type{
    border-radius: 5px 5px 0 0;
}
.sortbyText{
	position:absolute;
	top: -53px;
    right: 163px;
}

.sortby.opened div:not(.selected) {
	opacity: 0;
}
.sortby.opened div {
	pointer-events: all;
	opacity: 1 !important;
}

.sortby div.selected {
	position:absolute;
	top:0;
	z-index:2;
}

.sortby.opened div.selected {
	position:relative;
	top:unset;
	background-color: #EEE;
}
.filterContainer {
    padding: 71px 0 0 0;
    /*overflow: hidden;*/
	border-radius: 10px;
}
.filterSide {
    position: sticky;
    max-height: calc(100vh - 80px);
    width: calc(100% - 5px);
    background-color: #EEE;
    border-radius: 10px;
    text-decoration: none;
    transition: box-shadow 200ms ease;
    overflow-x: hidden;
    overflow-y: auto;
	padding:5px;
	top: 60px;
	z-index: 99;
}
/*#products {
    min-height: calc(100vh - 80px);
}*/
.filterSide h2 {
	padding: 10px;
	cursor:pointer;
}
.filterSide h2:hover {
	color:var(--rcol);
}
.filterSide h4 {
	padding: 10px;
	background-color:#FFF;
	border-radius:10px 10px 0 0;
	margin-bottom:0;
	position:relative;
	cursor:pointer;
    transition: all ease 200ms;
	transition-delay: 0ms;
	font-size: 1em;
}
.filterSide h4:hover {
	background-color:var(--vlcol);
}
.filterSide h4:after {
    content: '';
    display: block;
    border-bottom: 8px solid #999;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    position: absolute;
    top: 16px;
    right: 10px;
    z-index: 99;
    transition: all ease 200ms;
	cursor:pointer;
}

.filterSide h4.hide {
	border-radius: 10px;
	transition-delay: 200ms;
	display: block !important;
}
.filterSide h4.hide:after {
	transform:rotate(180deg);
}
.filterSide h4 + div.fdiv {
	padding: 10px;
	background-color:#FFF;
	border-radius:0 0 10px 10px;
	margin-bottom: 10px;
	font-size: 14px;
}
.fminmax {
	width:49%;
	display:inline-block;
}

.fminmax input[type="number"]{
	text-align:left;
	width:70%;	
}
.slider {
	position:relative;
	height:80px;
}
.slider:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 10px;
    top: 50%;
    margin: -5px 0 0 0;
    background: linear-gradient(#AAA, #EEE);
    border: 1px solid #888;
    z-index: 1;
    border-radius: 10px;
}
.slider .slideMin {
	z-index:3;
	position:absolute;
	width:20px;
	height:20px;
	left:0;
	top:50%;
	margin:-10px 0 0 0;
	border-radius:20px;
	border:2px solid #FFF;	
	background-color:var(--lcol);
	box-shadow:-2px 2px 7px rgba(0,0,0,0.5);
    cursor: pointer;
}
.slider .slideMax, .slider .slideMin {
	z-index:3;
	position:absolute;
	width:20px;
	height:20px;
	top:50%;
	margin:-10px 0 0 0;
	border-radius:20px;
	border:2px solid #FFF;	
	background-color:var(--lcol);
	box-shadow:-2px 2px 7px rgba(0,0,0,0.5);
    cursor: pointer;
}
.slider .slideMin {
	left:0;
}
.slider .slideMax {
	left:calc(100% - 20px);
}
.slider .slideMax:hover, .slider .slideMin:hover {
	background-color:var(--rcol);
}
.slideConnector {
	position:absolute;
	width:100%;
	height:10px;
	top:50%;
	margin:-5px 0 0 0;
	background-color:#AAA;
    background: linear-gradient(#AAA, #777);
	border:1px solid var(--dcol);
	z-index:2;
	border-radius:10px;
}

.slider.moving .slideConnector {
	background-color:#666;
    background: linear-gradient(#999, #555);
}
.textFilter, .clearfilters {
	background-color:#FFF;
	border:1px solid #666;
	padding:10px;
	border-radius:5px;
	cursor:pointer;
	margin-bottom:5px;
}
.textFilter:hover, .clearfilters:hover {
	background-color:var(--vlcol);
}
.textFilter.selected {
	background-color:var(--rcol);
	color:#FFF;
}
.textFilter:after {
	content:attr(data-units);
}
.catRow {
	margin-bottom:100px;
	position:relative;
}
.catRow > .clearfilters {
    position: absolute;
    top: -53px;
    left: 18px;
    border: 1px solid #CCC;
    padding: 7px;
}
.showHideFilters {
	position:relative;
}
.showHideFilters:after {
    content: '';
    display: block;
    border-bottom: 8px solid #999;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    position: absolute;
    top: 26px;
    right: 10px;
    z-index: 99;
    transition: all ease 200ms;
	cursor:pointer;
}
.showHideFilters.turn:after {
	transform:rotate(180deg);
}
.showHideFilters + div.unhiddenFilters {
	display:block;
	margin-bottom: 10px;
}
.extraInfo {
	display:none;
	backdrop-filter:blur(5px);
    position: absolute;
    top: 266px;
    width: 100%;
    z-index: 9;
    border-radius: 5px;
    min-height: 100px;
    left: 0;
    background-color: rgba(0,0,0,0.6);
    box-shadow: 0 0 15px rgb(0 0 0 / 40%);
	color:#FFF;
}
.contactInfo {
	position:absolute;
	z-index:2;
	background-color:#666;
	font-weight:bold;
	color:#FFF;
	text-align:center;
	line-height:23px;
	height:30px;
	width:30px;
	bottom: 153px;
	left:25px;
	border:3px solid #FFF;
	border-radius:30px;
	cursor:pointer;
	box-shadow:0 0 15px #000;
	z-index:99;
	font-size:18px;
	transition:all ease 500ms;
}
.contactInfo:after {
	content:'i';
	font-family:"Times New Roman", Times, serif;
	font-style:italic;
    display: block;
	transition:transform ease 800ms, font-size ease 500ms;
}
.contactInfo.makeClose {
	transition:all ease-in-out 500ms;
	left: 94%;
}
.contactInfo.makeClose:after {
    content: '+';
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    transform: rotate(45deg);
}

.contactInfo:hover {
	background-color:var(--rcol);
    line-height: 35px;
    height: 40px;
    width: 40px;
    bottom: 149px;
    left: 20px;
    font-size: 28px;
}
.contactInfo.makeClose:hover  { 
	left: 94%;
}
 .contactInfo:hover:after  {
    font-size: 32px;
}
.birthdays {
    position: fixed;
    background-color: #FFF;
    background-image: url(../images/bday.jpg);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
    min-height: 300px;
    max-height: 80%;
    width: 50%;
    top: 20%;
    left: 25%;
    padding: 40px;
    z-index: 999999999999;
    box-shadow: 0 0 50px rgb(0 0 0 / 50%), 0 0 0 5000px rgb(0 0 0 / 50%);
    border-radius: 20px;
}
.contactDetails .contactItm {
    margin-bottom: 30px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}
.contactItm a {
    white-space: nowrap;
}
.contactItm h3 {
	font-weight:bold;
	font-size:24px;
	line-height:25px;
	color:#FFF;
	position:relative;
	transition: all 300ms ease;
	isolation: isolate;
	padding-bottom: 5px;
}

.contactDetails .contactItm.sendwhatsapp {
    padding-bottom: 177px;
}
.contactItm h3:before {
	content:'';
	z-index:-1;
	display:block;
	left:0;
	bottom:0;
	height:2px;
	width:0;
	background-color:#CCC;
	opacity:0;
	position:absolute;
	transition:all 300ms ease;
	border-radius:;
}
.contactItm:hover h3 {
	color:var(--rcol);
}

.contactItm:hover h3:before {
	width:100%;
	opacity:1;
	background-color:var(--rcol);
}
.contactItm strong {
	display:inline-block;
	width:100px;
}
.button.whatsappButton {
	margin: 15px 0 0 0;
	width:150px;
	text-align:center;
	height:40px;
	line-height:5px;
}
input#other {
    display: none;
    margin-top: 15px;
}
.focusOnMe:invalid {
    position: relative;
    z-index: 9999999;
    box-shadow: 0 0 0 10000px rgba(0,0,0,0.2), 0 0 15px var(--rcol);
}
.productLists {
    border: 1px solid var(--rcol);
    margin: 0;
    border-radius: 9px;
    padding-bottom: 2px;
    min-height: 187px;
    background-color: rgba(255,255,255,0.8);
    text-align: left;
}
.addProductButton {
    height: 35px;
    line-height: 31px;
    border-radius: 5px;
    background-color: var(--rcol);
    color: #FFF;
    display: block;
    margin: 18px 0;
    transition: background-color 300ms ease;
	cursor:pointer;
	text-align:center;
}
.addProductButton:hover {
    background-color: var(--dcol);
}
.newProd {
    width: 48%;
    float: left;
    position: relative;
    line-height: 26px;
}
.NoProds {
	position:relative;
}
.NoProds:before {
    content: 'No products have been selected, please select a product and click "Add Product"';
    display: block;
    color: #F00;
    width: 250px;
    left: 50%;
    margin-left: -125px;
    top: 40px;
    position: absolute;
	text-align:center;
}
.newProd input[type="checkbox"]{
	display:none;
}

.newProd input[type="checkbox"] ~ label{
	margin:0 0 0 30px;
	cursor:pointer;
}
.newProd input[type="checkbox"] ~ label:before {
    display: block;
    content: '';
    position: absolute;
    left: 6px;
    top: 6px;
    width: 20px;
    height: 20px;
    border: 1px solid var(--rcol);
    border-radius: 5px;
    cursor: pointer;
    transition: all 300ms ease;
}
.newProd input[type="checkbox"].hideSquare ~ label:before{
    opacity: 0;
}

.newProd input[type="checkbox"] ~ label:after {
    display: block;
    opacity: 0;
    content: '';
    position: absolute;
    left: 1px;
    top: 27px;
    width: 16px;
    height: 0px;
    border-right: 6px solid #CCC;
    border-bottom: 6px solid #CCC;
    transform: rotate(33deg) skew(6deg) scale(0.5);
    border-radius: 0px 0px 6px 6px;
    transition: all 200ms ease;
    pointer-events: none;
}
.newProd input[type="checkbox"]:hover ~ label:after {
    border-right: 6px solid #353;
    border-bottom: 6px solid #353;
}
.newProd input[type="checkbox"]:checked ~ label:after {
    opacity: 1;
    height: 30px;
    top: 0px;
    left: 8px;
    transform: rotate(33deg) skew(6deg) scale(0.5);
}
.newProd .label {
    text-align: center;
    position: absolute;
    top: 3px;
    left: 7px;
    width: 14px;
    color: #AAA;
	pointer-events:none;
}

.newProd .label span {
    text-align: center;
    position: absolute;
    top: 0;
    left: -1px;
    width: 100%;
	display:block;
}
.addProduct {
	padding:15px;
}
.contactHeader {
	text-align:center;
	position:relative;
	margin:-50px 0 50px 0;
}
#content.container article.row {
margin: 0;
}
.magazines {
    text-align: center;
}
a.magname {
    display: inline-block;
    height: 278px;
    width: 174px;
    overflow: hidden;
	cursor:pointer;
	position:relative;
	color:#333;
	margin:30px 24px;
	transition:all ease 300ms;
	border-radius:5px;
	background-image: url(../images/Loading_icon.gif);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50px;
}

a.magname:hover {
	transform:rotate(-2deg) scale(1.2);
	filter: drop-shadow(-6px 12px 11px rgba(0,0,0,0.6));
}

a.magname span {
	position:absolute;
	bottom:0;
	left:0;
	display:block;
	color:#333;
	z-index: 2;
}
.magname div {
    inset: 0 0 37px 0;
    position: absolute;
    box-shadow: inset 0 0 29px rgba(0,0,0,0.9);
    border-radius: 5px;
    border: 3px solid #333;
	z-index: 3;
}

.magname embed, .magname object, .magname iframe, .magname img {
	pointer-events:none;
	position:absolute;
	top: 0;
    left: 0;
	z-index: 1;
    border-radius: 5px;
}
	
a.magname:after {
    content: attr(title);
    display: none;
    position: absolute;
    bottom: 39px;
    z-index: 4;
    background-color: rgba(var(--rgbcol), 0.7);
    color: #FFF;
    padding: 10px;
    border-radius: 5px;
    backdrop-filter: blur(4px);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	height:83px;
}
.magname img {
    width: 191px;
    height: 241px;
    object-fit: contain;
    display: none;
    z-index: 2;
    background-color: #FFF;
}
.magazines:hover .magname:not(:hover) {
	transform:scale(0.9);
	filter:saturate(0.3) brightness(1.2);
}
.thismag {
	width:1px;
	height:1px;
	position:absolute;
	opacity:0;
}
.enlarger embed, .enlarger object {
	width:80%;
	height:80%;
	top:10%;
	left:10%;
	position:absolute;
	box-shadow: 0 0 15px #000;
	border-radius:5px;
}
.aboutImg {
    width: 100%;
    border: 2px solid #eFeFeF;
    border-radius: 3px;
    border-bottom-width: 50px;
    box-shadow: 2px 2px 45px #000;
    transform: rotate(5deg) translateY(-20px);
    transition: all 300ms ease;
    cursor: pointer;
    z-index: 9999;
    position: sticky;
    top: 50px;
}
.aboutPage {
	margin:0 0 100px 0;
}
.financers .col-lg-4.col-md-12 {
	position: relative;
}
.financers .col-lg-4.col-md-12:before {
    position: absolute;
    content: '';
    background-color: #CCC;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    display: block;
    top: 30px;
    left: 30px;
    z-index: -1;
    border-radius: 5px;
}
.financers .col-lg-4.col-md-12 img {
	width:calc(100% - 50px);
	margin-left:30px
}
.financers .headimg {
}
.aboutParallax {
    height: 400px;
    width: 100%;
    background-position: 0 -181.5px;
    background-size: 100%;
    background-repeat: no-repeat;
	border-radius:10px;
	box-shadow:inset -7px 9px 10px rgba(0,0,0,0.4);
}
.dbut {
    height: 33px;
    width: 239px;
    background-color: #CCC;
    background: linear-gradient(#FFF, #EEE);
    border: 1px solid #DDD;
    border-radius: 5px;
    position: absolute;
    right: -246px;
    text-align: center;
    line-height: 33px;
    font-size: 14px;
}
.dIcon {
    background-image: url(../images/pdf-jpg-word-icons2.jpg);
    background-repeat: no-repeat;
    background-size: auto 100%;
    width: 35px;
    height: 35px;
    mix-blend-mode: multiply;
    position: relative;
    display: block;
}
.dIcon span {
    position: absolute;
    top: 29px;
    display: block;
    width: 450px;
    z-index: 999999;
    background-color: #FFD;
    color: #333;
    padding: 5px;
    display: none;
    line-height: 18px;
    right: -90px;
    box-shadow: -3px 9px 15px rgb(0 0 0 / 50%);
    border-radius: 5px;
    border: 2px solid #FFF;
}
.dIcon:hover span {
	display:block;
}
.download_pdf {
    background-position: 0 0;
}
img.teamimg.galimg {
    width: 70%;
    margin-left: 15%;
    height: auto;
}
.teamheader {
	background-color:var(--rcol);
	color:#FFF;
	text-align:center;
	margin:50px 0 20px 0;
	border-radius: 9px;
}
.littlePeople {
    float: left;
    position: relative;
    cursor: pointer;
}
.littlePeople img {
    transition: all 300ms ease;
    mix-blend-mode: multiply;
    width: 100%;
    position: relative;
}
.littlePeople:hover img {
    transform: scale(2);
}
.spotm {
    position: absolute;
    transition: all 300ms ease;
    width: 200%;
    height: 0;
    padding-bottom: 200%;
    background-image: url(../images/spotm2.png);
    background-size: contain;
    animation: spin2 10000ms linear infinite;
    top: -108%;
    left: -50%;
}
.littlePeople:hover .spotm {
    opacity: 0;
}
.salesPersonOftheMonth {
    background-image: url(../images/spotm.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 36%;
    height: 0;
    padding-bottom: 45%;
    position: absolute;
    right: -7px;
    top: -21px;
    z-index: 9;
    filter: drop-shadow(5px 6px 3px rgba(0,0,0,0.4));
}
.salesPersonOftheMonth.hide {
    display: none;
    width: 23%;
    right: 10%;
    top: 0;
}
.littlep {
    width: 100%;
    bottom: 0;
    left: 15px;
    position: absolute;
    background-color: #FFF;
    border-bottom: 5px solid #FFF;
}
.littlep:after {
    content: '';
    display: block;
    left: 5%;
    width: 90%;
    height: 10px;
    position: absolute;
    border-radius: 100%;
    box-shadow: 0 13px 16px rgba(0,0,0,0.9);
    z-index: -1;
}
.hiringcontainer {
	position:relative;
	margin-top: -140px;
    transition: all 2000ms ease;
	cursor:pointer;
}
.hiring {
	width:100%;
	animation: infinite bop 1000ms ease;
    transition: all 2000ms ease;
}
.bigdealermap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999999999;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(3px);
    display: none;
	overflow-x: auto;
    overflow-y: hidden;
}

.hiringcontainer:hover {
	transform: scale(0.9);
}
	
.hiringcontainer:hover .hiring{
	animation: none;
	filter:brightness(0.9);
}

.mapmarker {
    pointer-events: none;
    width: 30px;
    height: 30px;
    background-image: url(../images/pin.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    position: absolute;
    z-index: 1;
    filter: drop-shadow(0px 0px 4px cyan) drop-shadow(0px 0px 0px cyan) drop-shadow(1px 11px 7px black) brightness(1.5);
}

a.mapmarker {
    pointer-events: none;
    width: 30px;
    height: 30px;
    position: absolute;
    z-index: 1;
    filter: drop-shadow(0px 0px 4px cyan) drop-shadow(0px 0px 0px cyan) drop-shadow(1px 11px 7px black) brightness(1.5);
}


a.mapmarker > div {
    pointer-events: none;
    width: 30px;
    height: 30px;
    background-image: url(../images/pin.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    position: absolute;
    top:0;
    left:0;
    z-index: 1;
}
.bigdealermap .mapmarker > div {
    pointer-events: all;
    cursor: pointer;
}
.bigdealermap a.mapmarker:hover {
    filter: drop-shadow(0px 0px 4px cyan) drop-shadow(0px 0px 0px cyan) drop-shadow(1px 11px 7px black) brightness(1);
    z-index: 999999999999999999999999999;
}
.bigdealermap img {
    height: 100%;
    border-radius: 20px;
}
.bigdealermap .mapmarker .mapdealerdetails {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: opacity 300ms ease;
    top: 29px;
    left: 29px;
    padding: 15px;
    display: inline-block;
    background-color: #FFF;
    border-radius: 10px;
    box-shadow: -3px 3px 10px rgba(0,0,0,0.4);
        min-width: 222px;
}
.bigdealermap .mapmarker:hover .mapdealerdetails {
    pointer-events: all;
    opacity: 1;
}
.inmap {
    height: 100%;
    width: fit-content;
    margin: auto;
    position: relative;
}
.bigdealermap .inmap {
    margin: 5px auto;
}
.dealer {
    padding: 45px;
	position:relative;
	margin-bottom:40px;
}
.dealer:before {
    background-color: #EEE;
    border-radius: 10px;
    border: 1px solid #AAA;
	display:block;
	content:'';
	position:absolute;
	z-index:-1;
	left:1%;
	top:1%;
	width:98%;
	height:98%;
}
.dealers h4 {
    clear: both;
    width: 100%;
    font-weight: bold;
    color: var(--rcol);
    margin-bottom: 5px;
    border-bottom: 2px solid #EEE;
	position:relative;
	margin-top: 0;
}
.dealerPerson {
	display:none;
    margin: 10px 0 10px 15px;
    border-left: 3px solid #4787C6;
    padding-left: 5px;
}
.showdealerpeople {
    position: absolute;
    left: -11px;
    height: 40px;
    width: 40px;
    background-image: url(../images/genericm.jpg);
    background-color: #FFF;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border-radius: 100%;
    border: 2px solid var(--rcol);
	cursor:pointer;
	bottom:-11px;
	animation:blip infinite 4000ms cubic-bezier(0, 0.3, 0.4, 0.9);
	transition:height 300ms ease, width 300ms ease, filter 300ms ease;
}

.showdealerpeople:hover {
	animation:wiggle infinite ease 2000ms;
    border: 2px solid var(--dcol);
    height: 50px;
    width: 50px;
	filter: brightness(0.7);
}

.showdealerpeople.opened {
	animation:none;
    background-image: none;
}
.showdealerpeople.opened:after, .showdealerpeople.opened:before {
    display: block;
    width: 30px;
    height: 2px;
    border-radius: 5px;
    background-color: #966;
    border: 2px solid #966;
    content: '';
    position: absolute;
    left: 3px;
    top: 16px;
    transform: rotate(45deg);
	transition:all 300ms ease;
}
.showdealerpeople.opened:before {
	transform:rotate(-45deg);
}

.showdealerpeople.opened:hover:after, .showdealerpeople.opened:hover:before {
    border: 2px solid #A00;
	background-color: #A00;
	translate: 5px 5px;
}
.careerclick {
    cursor: pointer;
}
.smalldate {
    display: block;
    clear: both;
    border-bottom: 1px solid #CCC;
    padding-bottom: 4px;
    color: #999;
}
.deps {
    font-size: 14px;
    cursor: pointer;
    width: 100%;
    display: block;
    clear: both;
    margin: 15px 0;
}
.deps:before {
    font-weight: bold;
    content: ' \00BB';
    color: #999;
    transition: all 300ms ease;
    float: left;
    display: block;
    font-size: 17px;
    margin-top: -3px;
}
.depSubs {
    padding: 15px;
    display: none;
}
.uploadBtn {
    margin: 13px 0 0 0;
    position: relative;
}
.uploadBtn input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.uploadBtn div {
    float: left;
    position: absolute;
    margin: -19px 11px 0px 0;
    color: var(--rcol);
    font-size: 9px;
    width: 32px;
    height: 53px;
    white-space: nowrap;
    background-image: url(../images/pdf-jpg-word-icons.png);
    background-repeat: no-repeat;
    background-size: auto 62%;
    background-position: 0px bottom;
    pointer-events: none;
    z-index: 9;
}
.inppdfdoc div {
    background-position: 0 bottom;
    background-image: url(../images/pdfdoc.png);
}
.uploadBtn label {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: rgba(var(--rgblcol), 0.52);
    border: 1px solid var(--rcol);
    color: var(--rcol);
    text-align: left;
    position: relative;
    cursor: pointer;
    border-radius: 5px;
    float: left;
}
.uploadBtn label span {
    width: 200px;
    height: 40px;
    float: left;
    position: relative;
    padding: 0 5px 0 33px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
.uploadBtn label:after {
    content: 'Browse';
    display: block;
    position: relative;
    width: 98px;
    color: #FFF;
    height: 38px;
    background-color: var(--rcol);
    float: right;
    text-align: center;
    border-radius: 0 4px 4px 0;
}
.uploadBtn label:hover:after {
    background-color: var(--dcol);
}
.careersub {
    position: absolute;
    right: 0;
    bottom: -72px;
}
.careercap {
    position: absolute;
    bottom: -67px;
}
.uploadBtn div svg {
    position: absolute;
    left: 0;
    bottom: 0;
    transition: all 300ms ease;
    transform: scale(0.7);
    filter: drop-shadow(0px 0px 3px black);
}
.inpjpg div, .inpjpeg div {
    background-position: 18% 112%;
}

.jobs {
	display:none;
	width:500px;
	position:fixed;
	right:0;
	top:200px;
	background-color:#FFF;
	border:3px solid #FFF;
	border-radius: 5px 0 0 5px;
	box-shadow:0 0 50px #000;
	z-index:99;
	height:calc(100vh - 300px);
	overflow-y:auto;
	overflow-x:hidden;
	padding:30px;
}
.jobs .closed {
    position: absolute;
    top: -13px;
    right: -18px;
    height: 60px;
    width: 60px;
    cursor: pointer;
    filter: drop-shadow(0 0 3px rgba(0,0,0,0.9)) drop-shadow(0 0 7px rgba(0,0,0,0.9));
    z-index: 9999999999999999999999999;
    transform: scale(0.6);
}
.jobs .closed:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    background-color: #FFF;
    transform: rotate(45deg);
    right: 10px;
    width: 60px;
    height: 5px;
    transition: all 300ms ease;
    border-radius: 5px;
}
.jobs .closed:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    background-color: #FFF;
    transform: rotate(-45deg);
    right: 10px;
    width: 60px;
    height: 5px;
    transition: all 300ms ease;
    border-radius: 5px;
}
.jobs .closed:hover:before, .jobs .closed:hover:after {
    background-color: #A00;
    transition: all 300ms ease;
}

.checking {
	position:relative;
	z-index:2;
}
.checking:after {
	position:absolute;
	content:'Checking';
	display:block;
	top:0;
	left:0;
	height:100%;
	width:0;
	animation:fill 1000ms linear infinite;
	background-color:var(--rcol);
	color:#000;
	z-index:9;
	text-align:left;
	padding:5px;
	line-height: 22px;
}
.availableUser {
	color:#090;
}
.unavailableUser {
	color:#900;
}
.conf {
	margin-top:15px;
}
.enquireProduct h3 {
	margin-top:50px;
}
.numberModal div {
    text-align: center;
    height: 100%;
    /* padding: 0 0 33% 0; */
    padding: 0;
    background-color: #CCC;
    background: linear-gradient(#FFF, #EEE);
    border: 1px solid #DDD;
    line-height: 200%;
    border-radius: 5px;
}
.minus, .plus {
    line-height: 180%;
    cursor: pointer;
	transition:all ease 200ms;
}
.numberModal {
    padding: 15px 0!important;
    margin: 0 !important;
    cursor: default;
    clear: both;
}
.qtyQuote {
    width: 165px !important;
}
.numberModal div.amount {
    border: none;
    background-color: #FAFAFA;
    background: #FAFAFA;
    cursor: text;
}
.numberModal div.amount:hover {
	background-color:#FFF;
}

.minus:hover, .plus:hover {
	transform:translate(-1px,1px);
	box-shadow:inset -1px 1px 2px rgba(0,0,0,0.4);
    background: linear-gradient(#EEE, #DDD);
}
.minus:active, .plus:active {
    background: linear-gradient(var(--vlcol), var(--vlcol2));
}
.titleSpec .cartitem {
	border-bottom:none;
	cursor:default;
}
.titleSpec .cartitem img {
	cursor:zoom-in;
	position:relative;
}
.titleSpec .cartitem.cartLargeImg img{
	cursor:zoom-out;
	z-index:9999999999999999;
}
.titleSpec .cartitem:hover {
    color: #000;
}

.slider {
    width: 100%;
    height: 50px;
    margin-bottom: 15px;
	position:relative;
	z-index:1;
}
.slidebar {
	width:100%;
	height:10px;
	background-color:var(--rcol);
	border:1px solid #036;
	position:absolute;
	top:20px;
	left:0;
	border-radius:10px;
	box-shadow:inset 2px -2px 3px rgba(0,0,0,0.3);
	z-index:2;
}

.sliderail {
	width:100%;
	height:10px;
	background-color:#EEE;
	border:1px solid #AAA;
	position:absolute;
	top:20px;
	left:0;
	border-radius:10px;
	box-shadow:inset -2px 2px 3px rgba(0,0,0,0.3);
	z-index:1;
}
.slide_min {
	height:30px;
	top:10px;
	position:absolute;
	width:15px;
	background-color:#EEE;
	box-shadow:inset 2px -2px 3px rgba(0,0,0,0.3), 2px 2px 9px rgba(0,0,0,0.3);
	border-radius:7px;
	z-index:9;
	cursor:pointer;
	left:0;
}
.slide_max {
	height:30px;
	top:10px;
	position:absolute;
	width:15px;
	background-color:#EEE;
	box-shadow:inset 2px -2px 3px rgba(0,0,0,0.3), 2px 2px 9px rgba(0,0,0,0.3);
	border-radius:7px;
	z-index:9;
	cursor:pointer;
	right:0;
}
.minAmt, .maxAmt, .slide_max div, .slide_min div {
	position:absolute;
	top:-20px;
	height:10px;
	width:auto;
	color:#DDD;
}
.minAmt, .slide_min div {
	left:0;
}

.maxAmt, .slide_max div {
	right:0;
}

.slide_max div, .slide_min div {
	color:var(--rcol);
	top: 37px;
	white-space: nowrap;
	transition: margin-left 90ms ease,  margin-right 90ms ease;
}
.slide_min:hover, .slide_max:hover {
	background-color:#999;
}
.slide_min:active, .slide_max:active {
	background-color:var(--rcol);
}
.slide_max div:before {
	content:'Maximum: ';
	font-weight:bold;
}
.slide_min div:before {
	content:'Minimum: ';
	font-weight:bold;
}
.questiontag {
    background-color: #F5F5F5;
    padding: 20px;
    margin: 25px 0;
    border: 1px solid #AAA;
    border-radius: 5px;
    position: relative;
    filter: drop-shadow(-4px 4px 3px rgba(0,0,0,0.2));
    transition:transform 150ms ease, filter 150ms ease, background-color 150ms ease;
    height: fit-content;
	width: 100%;
	min-height:125px;
}
.questiontag:hover {
    background-color: #FEFEFE;
   /* transform: translate(2px, 2px);*/
    filter: drop-shadow(-6px 6px 5px rgba(0,0,0,0.3));
}

.questiontag:not(.unavailable):after, .questiontag.unavailable:before {
    content: attr(data-tag);
    background-color: #F5F5F5;
    padding: 3px 5px 0 5px;
    border: 1px solid #AAA;
    border-bottom: 1px solid #EEE;
    border-radius: 4px 4px 0 0;
    position: absolute;
    top: 0;
    left: 0;
    text-align: right;
    transform: rotate(-90deg) translate(-100%, -50%);
    transform-origin: left;
    width: fit-content;
    font-size: 15px;
    font-weight: bold;
    font-family: Arial;
    transition: all 150ms ease;
}

.questiontag:not(.unavailable):hover:after, .questiontag.unavailable:hover:before {
    background-color: #FEFEFE;
    border-bottom: 1px solid #FEFEFE;
}
.reduce {
	margin:0;
	padding: 0;
}
.deleteaccount {
	position: absolute;
	right: 10px;
	bottom: 10px;
	background-color:#A99;
}
.deleteaccount:hover {
	background-color:#900;
}
/*-- Intranet css - code: int123*/
.intranetIcon {
    background: linear-gradient(30deg, #4787C6, #95CAFF);
    width: 200px;
    height: 200px;
    overflow: hidden;
    border-radius: 25%;
    display: inline-block;
    border: 10px solid #FFF;
    margin: 30px;
    position: relative;
	text-align:center;
	box-shadow: -10px 10px 25px rgba(0,0,0,0.4);
	/*animation: blub 10000ms linear infinite;*/
}

.intranetIcon img {
    object-fit: cover;
    object-position: center center;
    width: 180px;
    height: 180px;
    position: absolute;
    top: 0;
    left: 0;
	transition:all 300ms ease;
}
.intranetIcon:hover img {
	transform:scale(1.2);
}
/*.intranetIcon:nth-of-type(n+1)  {
	animation-delay:1000ms;
}
.intranetIcon:nth-of-type(2n+2)  {
	animation-delay:3500ms;
}
.intranetIcon:nth-of-type(3n+3)  {
	animation-delay:2250ms;
}
.intranetIcon:nth-of-type(4n+4)  {
	animation-delay:6000ms;
}
.intranetIcon:nth-of-type(5n+4)  {
	animation-delay:40ms;
}*/


.intranetIcon:nth-of-type(5n+2) {
    background: linear-gradient(30deg, #0C0, #C5F169);
}

.intranetIcon:nth-of-type(5n+3) {
    background: linear-gradient(30deg, #F90, #FC0);
}
.intranetIcon:nth-of-type(5n+4) {
    background: linear-gradient(30deg, #900, #F00);
}
.intranetIcon:nth-of-type(5n+5) {
    background: linear-gradient(30deg, #63C, #F6F);
}
.intranetIcon:nth-of-type(5n+6) {
    background: linear-gradient(30deg, #4787C6, #95CAFF);
}
.intranetIcon span {
	background:rgba(0,0,0,0.7);
	position:absolute;
	margin:0 0 0 0;
	top:0;
	left:0;
	right:0;
	bottom:0;
	height:100%;
	width:100%;
	opacity:0;
	transition:all 300ms ease;
	line-height:200px;
	text-align:center;
	color:#FFF;
    font-size: 18px;
}

.intranetIcon:hover span, .intranetIcon.throb span {
	opacity:1;
}
.notifications {
    position: absolute;
    width: 400px;
    min-height: 300px;
    padding: 15px 0;
    background-color: rgba(255,255,255,0.7);
    backdrop-filter: blur(5px);
    right: 0;
    z-index: 9999999999999999;
    border-radius: 5px;
    filter: drop-shadow(-5px 5px 25px #000);
    display: none;
    max-height: calc(100vh - 40px);
    margin-top: 12px;
}
.notifications:before {
    border-bottom: 7px solid rgba(255,255,255,0.7);
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    content: '';
    display: block;
    position: absolute;
    right: 64px;
    top: -57px;
    padding-bottom: 50px;
    pointer-events: none;
}
.notificationBell.hasNotif {
	animation:wiggleAlot 2000ms ease infinite;
}
.notifylist {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 14px;
    width: 100%;
    min-height: 300px;
    max-height: calc(100vh - 40px);
}
.noticeBoard  {
	position:relative;
}
.noticeCard {
	position:relative;
	display:inline-block;
	overflow:hidden;
	width:31%;
	padding:20px;
	background-color:#F4F4F4;
	box-shadow:0 0 15px rgba(0,0,0,0.4);
	height:auto;
	margin:0 2.3% 30px 0;
	border-radius:5px;
	transition:all 300ms ease;
	vertical-align:top;
	cursor:pointer;
}
.noticeCard.homeNotice {
    width: 100%;
    margin: 0;
    background-color: #fff;
    border-radius: 19px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
	overflow: visible;
}
.noticeCard:hover {
	transform:translate(2px, -2px);
	box-shadow:-4px 4px 18px rgba(0,0,0,0.4);
	background-color:#FFF;
	z-index: 9;
}
.noticeCard .expand {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 18px;
    font-weight: bold;
    color: #FFF;
    width: 26px;
    height: 26px;
    background-color: #000;
    border: 3px solid #FFF;
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
    text-align: center;
    line-height: 16px;
    z-index: 999;
	border-radius:100%;
	transition:all 300ms ease;
	cursor:pointer;
    
}
.noticeCard .expand:hover, .noticeCard.showCard .expand {
	background-color:#999;
}
.noticeCard.showCard .expand:hover  {
	background-color:#000;
}
.noticeCard.showCard   {
	cursor:default;
}
.noticeCard img.noteimg{
	width:100%;
	height:200px;
	object-fit: cover;
	border-radius: 5px;
	margin-bottom:5px
}
.noticeCard .cardBody {
    display: none;
    max-height: 365px;
    overflow-x: hidden;
    overflow-y: auto;
	padding: 0 5px 0 0;
	cursor:default;
}
.noticeCard.homeNotice .cardBody {
    display: block;
    max-height: none;
    overflow-x: visible;
    overflow-y: visible;
}
.noticeCard.homeNotice .bubblePerson  , .commentImage, .newCommentImg{
	position:absolute;
	left: -77px;
	border-radius:100%;
}
.noticeCard.homeNotice .bubblePerson:before {
    content: '';
    width: 30px;
    height: 30px;
    position: absolute;
    display: block;
    left: 41px;
    top: -50px;
    border-radius: 30px;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    background-color: #FFF;
}
.noticeCard.homeNotice .bubblePerson:after {
    content: '';
    width: 15px;
    height: 15px;
    position: absolute;
    display: block;
    left: 27px;
    top: -20px;
    border-radius: 30px;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    background-color: #FFF;
}
.commentImage {
    left: -50px;
    top: 0;
    transform: scale(0.7);
    outline: 10px solid #ffffff;
    width: 69px;
}
.newComment {
	position: relative;
    display: block;
    height: 95px;
}
.newComment:hover .commentbox {
	background-color:#FFF;
}
.newComment .commentbox {
	background-color: rgba(var(--rgblcol), 0.2);
    position: absolute;
    width: calc(100% - 32px);
    left: 18px;
    top: 12px;
    border-radius: 30px;
    padding: 15px;
	border: 1px solid var(--rcol);
	cursor:text;
}
.commentbox:before {
	content:attr(data-placeholder);
	position:absolute;
	color:var(--lcol);
	top: 14px;
	pointer-events:none;
	opacity:0;
}
.commentbox:empty:before {
	opacity:1;
}
.emojibutton {
	width:30px;
	height:30px;
	position: absolute;
	z-index:2;
	background-image:url(../images/emojis.png);
	background-position:0 0;
	background-size:400%;
	filter: saturate(0) opacity(0.5) contrast(2);
    cursor: pointer;
	transition: filter ease 100ms;
}
.emojibutton:hover {
	filter: saturate(1) opacity(1) contrast(1);
}
.commentSection .emojibutton {
    right: 25px;
    top: 25px;
}
.emojibutton + .emojiList {
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0,0,0,0.6);
    background-color: #FFF;
    position: absolute;
    display: none;
    z-index: 9999999;
    right: 53px;
    bottom: -55px;
	width: 164px;
}
.emoji {
	background-image:url(../images/emojis.png);
	background-position:0 0;
	background-size:400%;
	display:inline-block;
	height: 30px;
    width: 30px;
}
.emojibutton + .emojiList .emoji {
	cursor:pointer;
	transition:transform ease 300ms;
}
.emojibutton + .emojiList .emoji:hover {
	transform:scale(1.3);
}
.emoji[data-emoji="smile"] {
	background-position:0 0;
}
.emoji[data-emoji="tongue"] {
	background-position:33.3% 0;
}
.emoji[data-emoji="happy"] {
	background-position:66.6% 0;
}
.emoji[data-emoji="laugh"] {
	background-position:100% 0;
}
.emoji[data-emoji="smirk"] {
	background-position:0 33.3%;
}
.emoji[data-emoji="wink"] {
	background-position:33.3% 33.3%;
}
.emoji[data-emoji="love"] {
	background-position:66.6% 33.3%;
}
.emoji[data-emoji="kiss"] {
	background-position:100% 33.3%;
}
.emoji[data-emoji="cool"] {
	background-position:0 66.6%;
}
.emoji[data-emoji="heart"] {
	background-position:33% 66.6%;
}
.emoji[data-emoji="thumbsup"] {
	background-position:66% 66.6%;
}
.emoji[data-emoji="surprise"] {
	background-position:100% 66.6%;
}
.emoji[data-emoji="shock"] {
	background-position:0 100%;
}
.emoji[data-emoji="angry"] {
	background-position:33.3% 100%;
}
.emoji[data-emoji="nowords"] {
	background-position:66.6% 100%;
}
.emoji[data-emoji="cry"] {
	background-position:100% 100%;
}

.noticeCard.homeNotice:hover .bubblePerson:before, .noticeCard.homeNotice:hover .bubblePerson:after, .noticeCard.homeNotice:hover .bubblePerson img {
    box-shadow: 0 0 15px rgba(0,0,0,0.6);
}
.noticeCard h3 {
    display: inline-block;
    overflow: hidden;
    font-size: 18px;
    color: var(--rcol);
    margin: 0;
    height: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	font-weight:bold;
}
.cardDate {
	font-size:12px;
	font-style:italic;
	color:#999;
}
img.fromImg {
    width: 69px;
    height: 69px;
    object-fit: cover;
    border: 3px solid var(--rcol);
    border-radius: 50%;
    position: relative;
    float: left;
    margin: 0 10px 0 0;
}

img.fromImg:hover {
	animation: wiggle 2000ms forwards ease;
}

.noticeCard a.button {
	width:100%;
	clear:both;
	margin:15px 0 0 0;
	text-align:center;
}
.readCards {
    display: none;
    min-height: 0;
    opacity: 0.7;
    margin-top: 60px;
    padding-top: 30px;
    border-top:2px solid #AAA;
}
.readCards .noticeCard h3 {
	color:#666;
}
.viewRead {
	padding:5px;
	text-align:center;
	background-color:#DDD;
	color:#FFF;
	cursor:pointer;
	margin:50px 0 0 0;
	border-radius:5px;
	transition:all 300ms ease;
	position:absolute;
	bottom:-69px;
	width: 100%;
}
.readCards h2 {
	margin-bottom:30px;
	text-align:center;
}
.viewRead:hover{
	background-color:var(--lcol);
}
.bigImg {
	cursor:pointer;
	transition:filter 300ms ease;
}
.bigImg:hover {
    filter: brightness(0.9) contrast(1.2) saturate(1.2);
}
.sideMenu {
	position:fixed;
	left:0;
	bottom:0;
	top:0;
	z-index: 99999999999999999999;
	width:fit-content;
}
.sideMenu .openPanel {
    transform: rotate(90deg);
    background-color: #EEE;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 150px;
    padding: 8px 0px 8px 13px;
    border-radius: 10px 10px 0 0;
    left: -34px;
    cursor: pointer;
    transition: all 300ms ease-in-out;
    z-index: -1;
    width: 106px;
    text-align: center;
    background-image: url(../images/cog.png);
    background-repeat: no-repeat;
    background-position: 12px 13px;
    background-size: 18px;
    color: #666;
}
.sideMenu .openPanel:hover {
    background-color: #FFF;
	color:var(--rcol);
}
.sideMenu.openSettings .openPanel {
    left: 367px;
}
.overlay, .overlay2 {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.3);
    display: none;
	opacity:0;
	transition:all ease 300ms;
}
.overlay .closerd {
    position: fixed;
    top: -1px;
    left: 428px;
    transition: all ease 300ms;
}
.overlay .closerd.biggerPanel {
    left: 828px;
}
.sideMenu.openSettings .overlay {
	opacity:1;
	display:block;
}
.sideMenu.openSettings .overlay:hover {
    background-color: rgba(0,0,0,0.1);
	cursor:not-allowed;
}
.sideMenu .contents {
    display: none;
    width: 400px;
    background-color: rgba(255,255,255,0.9);
    height: 100%;
    box-shadow: 0 0 50px rgba(0,0,0,0.7);
    z-index: 2;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    backdrop-filter: blur(4px);
	transition:width 300ms ease;
	color: #333;
}
.sideMenu .button:not(.commissioning, .preview, .preview2, .previewPI) {
    margin: 10px 0;
    height: 35px;
    border-radius: 5px;
    line-height: 100%;
    padding: 8px;
    width: 100%;
    background-color: #AAA;
    text-align: center;
}

.sideMenu .button:hover {
    background-color: #999;
}
.sideMenu h2 {
    border-bottom: 2px solid var(--rcol);
    padding-bottom: 15px;
    margin-bottom: 30px;
	padding-right: 40px;
}
.closerd, .editQuotePanel .closeBtn {
    position: absolute;
   /* transform: scale(0.7);*/
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    cursor: pointer;
    filter: drop-shadow(0 0 5px #000);
    z-index: 9999999999999999999999999;
}
.closerd:before, .editQuotePanel .closeBtn:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    background-color: #FFF;
    transform: rotate(-45deg);
    right: 10px;
    width: 60px;
    height: 8px;
    transition: all 300ms ease;
    border-radius: 8px;
}
.closerd:after, .editQuotePanel .closeBtn:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    background-color: #FFF;
    transform: rotate(45deg);
    right: 10px;
    width: 60px;
    height: 8px;
    transition: all 300ms ease;
    border-radius: 8px;
}

.closerd:hover, .editQuotePanel .closeBtn:hover {
    filter: drop-shadow(0 0 5px #FFF);
}
.settingClose {
    position: sticky;
    top: -15px;
    right: 0;
    float: right;
    font-size: 34px;
    margin: -13px -13px 0 0;
    transform: rotate(45deg);
    cursor: pointer;
    transition: background-color 300ms ease;
    background-color: rgba(var(--rgbcol), 0.5);
    border-radius: 50%;
    text-align: center;
    line-height: 18px;
    height: 27px;
    width: 27px;
	color:#FFF;
	z-index: 99999;
}
.settingClose:hover{
	background-color:#900;
}
.closerd:hover:before,.closerd:hover:after {
    background-color: #900;
}
.settingsDrop {
	position:relative;
}
.validateForm  .formInput:hover h4 {
	color:#000;
}
.settingDropdown {
	position:relative;
	background-color:#FFF;
	border:1px solid #AAA;
	border-radius:16px;
	box-shadow: 0 2px 15px rgba(0,0,0,0.7);
	padding:15px;
	margin-bottom: 15px;
	display:none;
}

.editQuotePanel .closeBtn {
    position: sticky;
    float: right;
    transition: top ease 300ms;
}
.sideMenu .formInput, .sideMenu .formInputOther {
    min-height: 80px;
	opacity: 0.7;
}
.sideMenu .formInput:hover, .sideMenu .formInputOther:hover, .sideMenu .formInputOther:focus-within, .sideMenu .formInput:focus-within { 
	opacity: 1;
}
.sideMenu .formInput small, .sideMenu .formInputOther small, .onoffwidget small {
    position: absolute;
    left: 2px;
    color: var(--dcol);
    transition: all 300ms ease;
	font-size: 13px;
    top: -6px;
    opacity: 1;	 /*change to 0.5*/
    display: block;
    width: 100%;
}
.sideMenu .formInput:hover small, .sideMenu .formInputOther:hover small {
	opacity:1;
}
.sideMenu .formInput .checkers {
	width:100%;
	position:relative;
}
.sideMenu textarea {
	margin-bottom: 0;
}
.peedsDivs {
	position:relative;
	margin-bottom:25px;
	border-bottom:1px solid #AAA;
	padding-bottom:15px;
}
.sideMenu input[type="checkbox"]:not(.cartOptionCheck, .toggle) {
    clear: left;
    display: inline-block;
    height: 14px;
    width: 14px;
    margin: 5px 5px 5px 15px;
	position: relative;
}

.sideMenu .formInput label {
	width:100%;
	color: var(--dcol);
}
.sideMenu .formInput label.overwrite{
	opacity:1 !important;;
}
.sideMenu .formInput select {
    color: var(--dcol);
}
.sideMenu input[type="checkbox"] + label {
    clear: right;
    display: inline-block;
    width: calc(100% - 50px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
    translate: 5px 2px;
	position: relative;
	color: #666;
    font-size: 16px;
    line-height: 1.5em;
}
.sideMenu input[type="checkbox"] + label.otheroverflow {
    overflow: visible;
    text-overflow: unset;
    white-space: unset;
}

.sideMenu input[type="checkbox"] + label.otheroverflow span {	
	display:block;
    width: calc(100% - 10px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

input[type="checkbox"] + label span small, select option small {	
	color:#CCC;
	font-style:italic;
}
.sideMenu input[type="checkbox"].allPeeps {
    height: 18px;
    width: 18px;
    margin: 5px;
}
.settingDropdown .formInput h4 {
	margin-bottom:0;
    font-size: 18px;
	margin-top: 7px;
	font-weight: normal;
}

.sideMenu .formInput .info {
	bottom: 0;
    right: -8px;
}
.sideMenu .formInput .info:after {
    width: 331px;
    left: -333px;
    font-size: 14px;
}
.dontbutton {
    background-color: #DDD;
    position: absolute;
    right: -16px;
    top: 6px;
    height: 16px;
    width: 16px;
    border-radius: 20px;
    box-shadow: 0 0 7px rgba(0,0,0,0.4);
    cursor: pointer;
    z-index: 9999999;
}
.dont {
	opacity:0.3;
	text-decoration:line-through;
}
.otheroverflow.must {
	text-decoration: underline;
}
.dont .dontbutton {
    background-color: #A00;
}
.must .dontbutton {
    background-color: #0A0;
}
.dontbutton:hover {
	background-color:#F00;
}

.must .dontbutton:hover {
    background-color: #0F0;
}
.dontbutton:after {
    background-color: #FFF;
    width: 6px;
    left: 5px;
    top: 7px;
    position: absolute;
    content: '';
    display: block;
    height: 2px;
    transform: rotate(0deg);
}
.must .dontbutton:before {
    background-color: #FFF;
    width: 6px;
    left: 5px;
    top: 7px;
    position: absolute;
    content: '';
    display: block;
    height: 2px;
    transform: rotate(90deg);
}
.validateForm[data-valid="true"] h4 {
	color:#000;
}
.validateForm[data-valid="complete"] h4 {
	color:#549518;
}
.validateForm[data-valid="incomplete"] h4 {
	color:#090;
}

.formInput label.prodImg.articleDropHere  {
	width:100%;
	height:0;
	padding-bottom:100%;
	position:relative;
	cursor:pointer;
	outline:2px dashed var(--lcol);
	background-color: #F1F1F1;	
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}
.formInput label.prodImg.articleDropHere.overwrite.expoImg, .formInput label.prodImg.articleDropHere.overwrite.webbannerinput {
	padding-bottom:16%;
	overflow: visible;
}
.formInput label.prodImg.articleDropHere.overwrite.webbannerinput img:not(.mainimg) {
    width: 30px;
    height: 30px;
    bottom: -2px;
}
.formInput label.prodImg.articleDropHere:hover  {
	outline:2px dashed var(--rcol);
}
.nicEdit-main {
	cursor:text;
	background-color:#FAFAFA;
	padding:4px;
}
.disableTextEditor .nicEdit-main {
	pointer-events:none;
	background-color:#EEE;
	color:#888 !important;
}
.nicEdit-main:focus, .nicEdit-main:active {
	background-color:#FFF;
}
.prodImg input {
	position:absolute;
	top:0;
	left:0;
	display:block;
	z-index:9;
    width: 100%;
    height: 100%;
	opacity:0;
	cursor:pointer;
}
.prodImg img.mainimg {
	width:100%;
	height:100%;
	object-fit:contain;
	position:absolute;
	top:0;
	left:0;
	display:block;
	pointer-events:none;
}
.prodImg img:not(.mainimg) {
    width: 60px;
    height: 60px;
    object-fit: contain;
    position: relative;
    bottom: -263px;
    margin: 5px;
    display: inline-block;
	z-index:9;
    background-color: #FFF;
    box-shadow: 0 0 15px rgba(0,0,0,0.7);
    border-radius: 5px;
}

.validateForm[data-valid="true"] h4:after {
	color:#F00;
	content:'*';
	margin-left: 5px;
}
.validateForm[data-valid="complete"] h4:after {
	content: '\2713';
	margin-left: 15px;
	color:#090;
}

.validateForm[data-valid="incomplete"] h4:after {
	content: 'x';
	margin-left: 15px;
	color:#090;
}
.pricebanner {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 104px;
    left: -82px;
    color: #FFF;
    background-color: rgba(var(--rgbcol), 0.7);
    backdrop-filter: blur(5px);
    font-weight: bold;
    transform: rotate(-45deg);
    text-shadow: 0 0 10px #000;
    font-size: 15px;
}
.pricebanner.specialbanner {
    top: 125px;
    left: -65px;
    font-weight: normal;
    background-color: rgb(255 0 0 / 70%);
}
.sideMenu .settingDropdown h2 {
    padding-bottom: 5px;
    margin-bottom: -7px;
    padding-right: 40px;
    font-size: 22px;
    margin-top: 50px;
	font-weight: bold;
	position:relative;
}
.inactive {
	opacity: 0.3;
	font-style:italic;
}
.bday {
    background-image: url(../images/present.png);
    background-position: calc(100% - 4px) 4px;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-color: #FFF;
    position: absolute;
    z-index: 999;
    overflow: hidden;
    text-align: right;
    border: 3px solid #666;
    height: 33px;
    line-height: 25px;
    border-radius: 20px;
    width: 33px;
    opacity: 0.2;
    box-shadow: 0 0 10px #000;
    right: 13px;
    top: 2px;
    cursor: pointer;
    transition: all ease 300ms;
    white-space: nowrap;
    color: #FFF;
}
.bday div {
    margin-right: 29px;
    position: absolute;
    right: 0;
}
.showBday {
    width: 200px;
    border: 3px solid #fff;
    opacity: 1;
    background-color: rgba(var(--rgbcol),0.7);
}

.allbdays {
    background-image: url(../images/present.png);
    background-position: 4px 4px;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-color: #FFF;
    position: fixed;
    z-index: 999;
    border: 3px solid #666;
    height: 33px;
    line-height: 25px;
    border-radius: 20px;
    width: 33px;
    opacity: 0.2;
    box-shadow: 0 4px 11px #000;
    right: 149px;
    bottom: 100px;
    cursor: pointer;
    transition: all ease 300ms;
}
.allbdaystext {
    background-color: #FFF;
    position: fixed;
    z-index: 999;
    border: 1px solid #ededed;
    height:1px;
    line-height: 25px;
    border-radius: 5px;
    width: 303px;
    box-shadow: 0 4px 18px rgb(0,0,0,0.4);
    right: 15px;
    bottom: 135px;
    transition: all ease 300ms;
    padding: 14px;
	opacity:0;
    overflow: hidden;
	pointer-events:none;
}
.bday:hover, .allbdays:hover {
    opacity: 1;
}

.allbdays.shown + .allbdaystext {
    height: calc(100vh - 260px);
    overflow-x: hidden;
    overflow-y: auto;
	opacity:1;
	pointer-events:all;
}
input[type="checkbox"].toggle {
	display:none;
}
input[type="checkbox"].toggle + label {
	position:relative;
	display:inline-block;
	min-height: 19px;
	width: auto;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
input[type="checkbox"].toggle + label:before {
    position: relative;
    content: '';
    display: inline-block;
    height: 15px;
    width: 30px;
    background-color: #BAA;
    margin: 0 15px 0 2px;
    border-radius: 15px;
    box-shadow: inset -2px 2px 5px rgba(0,0,0,0.7), -2px 2px 2px #FFF;
	transition:background-color ease 300ms;
}
input[type="checkbox"].toggle + label:after {
    position: absolute;
    content: '';
    display: inline-block;
    height: 13px;
    width: 13px;
    background-color: #EEE;
    border-radius: 13px;
    box-shadow: -1px 1px 1px #000;
	left:3px;
	top:4px;
	background-image: radial-gradient(farthest-corner at 70% 30%,#FFF,#AAA);
	transition:left ease 300ms;
}

input[type="checkbox"].toggle:checked + label:before {
    background-color: #4A3;
}
input[type="checkbox"].toggle:checked + label:after {
	left:18px;
}
input[type="checkbox"].toggle + label span {
    position: relative;
    translate: 0px -4px;
    display: inline-block;
	transition:all ease 300ms;
}
input[type="checkbox"].toggle + label:hover span {
	text-shadow: 0 0 3px #000;
}
input[type="checkbox"].toggle:checked + label span {
	color: #72f772;
    text-shadow: 0 0 5px #000;
}
.dropdownsettings {
    position: relative;
    height: 20px;
    width: calc(100% + 2px);
    background-color: #DDD;
    background: linear-gradient(#EEE, #DDD);
    border-radius: 0 0 10px 10px;
    cursor: pointer;
    transition: all 300ms ease;
    border: 1px solid #CCC;
    border-top: none;
    margin-top: -2px;
}
.dropdownsettings:after {
    display: block;
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    height: 10px;
    width: 10px;
    margin: -8px 0 0 -8px;
    border-left: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(-45deg);
	transition:all ease 300ms;
}
.dropdownsettings.opened:after {
    transform: rotate(135deg);
	    margin: -2px 0 0 -8px;
}
.expandKeysdiv {
	display:none;
}
.dropdownsettings:hover {
	background-color:#FFF;
    background: linear-gradient(#EEE, #FFF);
	box-shadow: 0 2px 2px rgba(0,0,0,0.3);
}
.hideTextarea .nicEdit-main {
    display: none;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: 300px;
    box-shadow: inset -2px 2px 10px rgba(0,0,0,0.3);
    border-radius: 5px;
	padding: 2px 5px;
	max-width: calc(100% - 5px);
	min-height: 1px !important;
}
.keyspan {
    display: inline-block;
    position: relative;
    background-color: #FFF;
    padding: 2px 8px 2px 2px;
    border-radius: 5px;
    box-shadow: -1px 2px 5px rgba(0,0,0,0.4);
    margin: 15px 10px 0 0;
    cursor: grab;
}
.keyspan:active {
	cursor: grabbing;
}
.keyspanafter {
    position: absolute;
    top: -11px;
    right: -8px;
    border: 2px solid #FFF;
    width: 20px;
    height: 20px;
    line-height: 10px;
    text-align: center;
    border-radius: 15px;
    background-color: #400;
    color: #FFF;
    font-size: 24px;
    transform: rotate(45deg);
    cursor: pointer;
    transition: all ease 300ms;
    box-shadow: -1px 2px 5px rgba(0,0,0,0.7);
}
.keyspanafter:hover {
    background-color: #A00;
}
.addkeys {
    margin-top: 15px;
    background-color: rgba(var(--rgblcol), 0.52);
    border: 1px solid #AAA;
    border-radius: 5px;
    height: 40px;
    line-height: 34px;
	cursor:text;
	position:relative;
}
.addkeys:hover, .addkeys:active, .addkeys:focus {
	 background-color: #FFF;
    border: 1px solid var(--rcol);
}

.addkeys:after {
	content:'Type a new keyword here';
	pointer-events:none;
	color:rgba(0,0,0,0.4);
}

.addkeys:active:after, .addkeys:focus:after {
	display:none;
}
tr.madeEditable td {
	position:relative;
	padding:5px;
}
tr.madeEditable td span{
	padding:10px;
	display:inline-block;
}
tr.madeEditable td span[contenteditable="true"] {
    background-color: rgba(255,255,255,0.7);
    cursor: text;
    border-radius: 5px;
    border: 1px solid #AAA;
	width: 100%;
	white-space: nowrap;
}
tr.madeEditable td span[data-field="value"] {
	padding-right:0;
}
tr.madeEditable td span[data-field="units"] {
	padding-left:2px;
}

tr.madeEditable td span[contenteditable="true"]:focus {
    background-color: rgba(255,255,255,1);
}
tr.madeEditable td span[contenteditable="true"][data-field="value"] {
    border-radius: 5px 0 0 5px;
    border-right: none;
	width: calc(100% - 80px);
}
tr.madeEditable td span[contenteditable="true"][data-field="units"] {
    border-radius: 0 5px 5px 0;
    border-left: none;
	width: 80px;
}
.sideMenu .keywords {
    padding: 7px;
    border: 1px solid #cdcdcd;
    border-radius: 5px 5px 0 0;
    width: calc(100% + 2px);
	background-color: #EEE;
}
.savespecs, .savebricks, .newSpec {
    position: fixed;
    bottom: 25px;
    z-index: 99999;
    left: 50%;
    width: 150px;
    margin-left: -75px;
    padding: 10px;
    border-radius: 5px;
    background-color: var(--rcol);
    box-shadow: -2px 6px 15px rgba(0,0,0,0.7);
    color: #FFF;
	display:none;
	cursor:pointer;
	transition:all 300ms ease;
}
.savespecs:hover, .savebricks:hover, .newSpec:hover {
    background-color: var(--dcol);
}
.newSpec {	
    margin-left: -236px;
    background-color: var(--lcol);
}
.newSpec .div {
    position: absolute;
    top: -44px;
    left: 0;
    width: 310px;
    padding: 7px;
    background-color: #666;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    z-index: 9;
}
.newSpec input{
    width: 269px;
    position: relative;
    left: -17px;
    border-radius: 5px;
}
.newSpec .closer {
    position: absolute;
    top: -9px;
    right: -15px;
    transform: scale(0.5);
}
.cover {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 119px;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(3px);
    z-index: 100;
    display: none;
}
.cancelspecs,.cancelbricks, .canceldelete, .cancelsort, .canceldeleteprod {
    position: fixed;
    bottom: 25px;
    z-index: 99999;
    left: 50%;
    width: 44px;
    height: 44px;
    margin-left: 86px;
    border-radius: 5px;
    background-color: #900;
    box-shadow: -2px 6px 15px rgba(0,0,0,0.7);
    color: #FFF;
    display: none;
    cursor: pointer;
    transition: all 300ms ease;
}
.cancelspecs span, .cancelbricks span, .canceldelete span, .cancelsort span, .canceldeleteprod span {
    display: block;
    font-size: 67px;
    transform: rotate(45deg) translate(4px, -2px);
    text-align: center;
    line-height: 30px;
}
.cancelspecs:hover, .cancelbricks:hover, .canceldelete:hover, .cancelsort:hover, .canceldeleteprod:hover {
    background-color: #C00;
}
.spectools {
    display: none;
	opacity:0.2;
    width: 25px;
    background-color: #CCC;
    height: 50px;
    position: absolute;
    top: 3px;
    right: -27px;
    overflow: hidden;
    border-radius: 0 15px 15px 0;
    background-image: linear-gradient(90deg, #777, #CCC 15px);
	cursor:pointer;
	transition:all ease 300ms;
	box-shadow: 2px 4px 7px rgba(0,0,0,0.2), inset 29px -7px 29px rgba(0,0,0,0.3);
	border: 1px solid #AAA;
    border-left: none;
}
.spectools:before {
    pointer-events: none;
    content: '';
    display: block;
    transform: rotate(45deg);
    border-bottom: 2px solid #FFF;
    border-left: 2px solid #FFF;
    width: 10px;
    height: 10px;
    right: 154px;
    top: 19px;
    position: absolute;
}

.spectools:after {
    pointer-events: none;
    content: '';
    display: block;
    transform: rotate(-45deg);
    border-bottom: 2px solid #000;
    border-right: 2px solid #000;
    width: 10px;
    height: 10px;
    right: 10px;
    top: 19px;
    position: absolute;
}
.spectools.opened:after {
    right: -34px;
}
.spectools:hover {
	background-image: linear-gradient(90deg, #888, #EEE 15px);
 	translate: 15px 0; width: 40px; 
	opacity:0.5;
}
.spectools.opened, .spectools.opened:hover {
	background-image: linear-gradient(90deg, #888, #EEE 15px);
	translate: 150px 0; width: 175px;
    background-color: #FFF;
	opacity:1;
}
.specstatus {
    position: absolute;
    width:100px;
    padding: 5px;
    right: 50px;
    top: 7px;
    height: 34px;
    border-radius: 10px;
    box-shadow: inset -2px 2px 5px #666;
    background-color: rgba(255,255,255,0.5);
    overflow: hidden;
	transition:all ease 300ms;
}

.specstatus:hover {
    box-shadow: inset -1px 1px 5px #444;
    background-color: rgba(255,255,255,1);
}
.specstatus font {
	transition: all 300ms ease;
}
.specstatus font {
	position:relative;
	display:block;
	line-height: 24px;
}
.specstatus.isfeatured, .specstatus.isfilter {
    background-color: rgba(235,240,255,0.5);
}
.specstatus.isfeatured:hover, .specstatus.isfilter:hover {
    background-color: rgba(235,240,255,1);
}
.specstatus.isfeatured font, .specstatus.isfilter font {
	color:var(--dcol);
}
.specstatus.isfeatured font:first-of-type {
	margin-top:-24px;
}
.specstatus.isfilter font:first-of-type {
	margin-top:-48px;
}
.spectools .deleteSpec {
    position: absolute;
    right: -40px;
    top: 6px;
    background-image: url(../images/trash.png);
    width: 33px;
    height: 33px;
	transition:all ease 300ms;
}
.spectools.opened .deleteSpec {
    right: 5px;
}
.spectools .deleteSpec:hover {
	filter: brightness(1.3);
}
.specTable tr.putbeforehere {
    height: 2px;
    overflow: hidden;
    display: block;
}

.specTable tr.putbeforehere td {
	padding: 0;
}
.gr {
	display:none;
	background-image:url(../images/groupicon.png);
	background-size:contain;
	background-repeat:no-repeat;
	width:30px;
	height:30px;
	position: absolute;
	right: 13px;
    top: 12px;
}
.gr .grOpener {
    background-image: url(../images/del.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    opacity: 0;
	transition: opacity 300ms ease;
}
.gr .grOpener.opened {
    opacity: 1;
}
.gr .grps {
    width: 256px;
    height: fit-content;
    padding: 5px;
    background-color: #EEE;
    z-index: 99999999;
    position: absolute;
    margin-top: 30px;
    border-radius: 10px;
    box-shadow: 0 0 31px rgba(0,0,0,0.5);
    left: -114px;
    display: none;
}

.gr .grps .changeGroupTo {
    padding: 10px;
	transition: all 300ms ease;
	cursor:pointer;
	border-radius: 5px;
}
.gr .grps .changeGroupTo:hover {
    padding: 10px;
	background-color:var(--rcol);
	color:#FFF;
}
input::-webkit-calendar-picker-indicator {
  opacity: 0.3 !important;
  margin-top:-5px;
  cursor:pointer;
}
.addspecs {
    display: none;
    position: absolute;
    right: 60px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50px;
    background-color: rgba(0,0,0,0.3);
    color: #FFF;
    border: 2px solid #FFF;
    top: 10px;
    z-index: 9;
    font-size: 36px;
    font-weight: bold;
    line-height: 21px;
    opacity: 0.4;
}
article.greyarticle table {
	color: inherit;
}
.addspecs:hover {
    opacity: 1;
}
.addspecs:after {
	content:'+';
}
.sideImg {
	width:40%;
	float:left;
}
.fullImg {
	width:100%;
}
.secondText {
    text-align: left;
    float: left;
    width: 50%;
    margin-left: 10%;
}

.secondTextFull {
	text-align: left;
    margin-top: 30px;
}
img.blankimg {
	width:1px; height:1px;
}

.countdownBar {
	height:10px;
	background-color:#4787C6;
	margin: 15px 0;
	animation: shrinktozero forwards 60000ms linear;
}
.delperson, .delproduct, .delgallery, .delarticle, .deleteBooking {
    position: absolute;
    top: 0;
    height: 50px;
    width: 50px;
    z-index: 10;
    filter: drop-shadow(0 0 15px rgba(0,0,0,0.4));
	display:none;
}
.inactiveperson .delperson.del, .inactiveProduct .delproduct.del, .inactiveGallery .delgallery, .del[data-active="0"]{
	    background-image: url(../images/enable.png);
}
.person.enabledelete .delperson, .enabledelete .delgallery, .sortItem.enabledelete .delproduct, .article.enabledelete .delarticle, .enabledelete .deleteBooking {
	display:block;
}
.inactiveProduct, .inactiveGallery {
    padding: 5px;
    opacity: 0.2;
    filter: saturate(0);
}
.enabledelete.inactiveProduct, .galimg.enabledelete.inactiveGallery {
    opacity: 1;
    filter: saturate(1);
}
.enabledelete.inactiveProduct a, .article.enabledelete a {
    filter: saturate(0);
    opacity: 0.4;
}
.dontshow {
	display:none;
}
.person.enabledelete img, .sortItem.enabledelete img, .galimg.enabledelete img, .article.enabledelete img  {
	filter:saturate(0);
	transform:none;
}

.person.enabledelete .contactInfo, .person.enabledelete .bday {
	display:none;
}

.person.enabledelete, .sortItem.enabledelete, .paginateRow.enabledelete, .article.enabledelete   {
	animation: shakesmall ease infinite 900ms;
}
.allvcards .row:nth-of-type(1n + 1) .person.enabledelete, .sortItem.enabledelete:nth-of-type(1n + 1), .paginateRow.enabledelete:nth-of-type(1n + 1), .article.enabledelete:nth-of-type(1n + 1)  {
	animation-delay:76ms;
}
.allvcards .row:nth-of-type(2n + 1) .person.enabledelete, .sortItem.enabledelete:nth-of-type(2n + 1), .paginateRow.enabledelete:nth-of-type(2n + 1), .article.enabledelete:nth-of-type(2n + 1) {
	animation-delay:150ms;
}
.allvcards .row:nth-of-type(3n + 1) .person.enabledelete, .sortItem.enabledelete:nth-of-type(3n + 1), .paginateRow.enabledelete:nth-of-type(3n + 1), .article.enabledelete:nth-of-type(3n + 1) {
	animation-delay:312ms;
}
.allvcards .row:nth-of-type(4n + 1) .person.enabledelete, .sortItem.enabledelete:nth-of-type(4n + 1), .paginateRow.enabledelete:nth-of-type(4n + 1), .article.enabledelete:nth-of-type(4n + 1) {
	animation-delay:470ms;
}
.delperson:hover, .delproduct:hover, .delarticle:hover  {
    filter: drop-shadow(0 0 15px rgba(0,0,0,0.4)) hue-rotate(145deg);
}
.person.enabledelete a, .sortItem.enabledelete a, .article.enabledelete a {
	pointer-events:none;
}
.showHidePeople.hidePerson, .galimg.hideGallery {
	display:none;
}
#ui-datepicker-div.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all {
	box-shadow: 0 0 60px rgba(0,0,0,0.7);
	border-radius: 5px;
	background-color: #999;
	color: #FFF;
}
#ui-datepicker-div.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all .ui-datepicker-header {
    background-color: #777;
    border: none;
}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    top: 8px;
    margin: 0 7px;
	cursor:pointer;
}
.halfbutton  {
    width: 49%;
    position: relative;
    translate: 2px 0px;
}
.halfbutton:nth-of-type(2)  {
    translate: 0 0;
}
.sortItem.sorting {
	cursor:grab;
}
.sortItem.sorting:active {
	cursor:grabbing;
}
.sortItem.sorting a {
	pointer-events:none;
}
.listofads {
    max-height: 230px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding-bottom: 30px;
	margin-bottom: 10px;
}
.listofads div {
    display: inline-block;
    position: relative;
}
.delthisad, .delthisdealerad {
    background-image: url(../images/del.png);
    background-size: contain;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 10px;
    top: 5px;
    display: block;
    filter: drop-shadow(0 0 5px #000);
    cursor: pointer;
}
.adsimg {
    height: 170px;
    margin: 15px;
}
.dealeradP {
    position: absolute;
    bottom: -11px;
    left: 29px;
    color: #FFF;
    text-shadow: 0 0 11px rgba(70,40,0,0.7);
    font-size: 13px;
    line-height: 22px;
    width: 363px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
div.advert.row {
	/*opacity:0;*/
    position: fixed;
    z-index: 9999999999999;
    /*width: 50vw;*/
    height: 90%;
    max-height: calc(100vh - 125px);
    left: 50%;
	margin-left:-25%;
	min-width: 400px;
	max-width:100vw;
	display:none;
    top: 123px;
    background-color: rgba(var(--rgbcol), 0.5);
    box-shadow: 0 0 45px 5px #000;
    color: #FFF;
    padding: 15px;
    text-align: center;
    border: 1px solid #FFF;
    border-radius: 6px;
    overflow: hidden;
	transition:opacity 300ms ease;
}
.allAds {
	height:100%;
}
.advert .allAds .adimg {
	display:none;
    height: calc(100% - 35px);
	max-width:100vw;
    width: auto;
    object-fit: contain;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 2;
    background-color: rgb(0, 0, 0);
}
.advert .allAds .adimg[aria-visibility="show"] {
    display: inline;
    position: relative;
    margin: -15px;
    height: calc(100% - 5px);
}
.dontshowad {
    position: absolute;
    top: 5px;
    right: 45px;
    color: #FFF;
    text-shadow:0 0 5px #000, 0 0 5px #000, 0 0 10px #000, 0 0 15px #000;
    font-size: 12px;
    cursor: pointer;
    z-index: 9;
}
.dontshowad #dontshow {
    position: absolute;
    left: -25px;
    height: 20px;
    width: 20px;
    top: 2px;
}
.dontshowad:hover  {
	color:var(--lcol);
}
.advert .closephp {	
    top: 2px;
}
.overlay.adoverlay{
    display: none;
    opacity: 1;
    z-index: 999999999999;
    backdrop-filter: blur(5px);
}
.scrollIndicator {
    display: none;
    position: absolute;
    height: 36px;
    width: 36px;
    z-index: 9;
    top: 13px;
    left: 328px;
}
.scrollIndicator span {
    overflow: hidden;
    position: absolute;
    height: 147px;
    width: 35px;
    border-radius: 100%;
    cursor: pointer;
}
.scrollIndicator div {
    position: absolute;
    transform: rotate(45deg) scale(0.7);
    border-bottom: 2px solid var(--rcol);
    border-right: 2px solid var(--rcol);
    left: 5px;
    width: 25px;
    height: 25px;
	opacity:0;
	animation:cascadeDown infinite linear 2000ms;
}
.scrollIndicator div:nth-of-type(2) {
	animation-delay:666ms;
}
.scrollIndicator div:nth-of-type(3) {
	animation-delay:1332ms;
}
.scrollIndicator:after {
    content: attr(alt);
    display: block;
    position: absolute;
    background-color: rgba(var(--rgbcol),0.5);
    padding: 10px;
    color: #fff;
    text-shadow: 0 0 5px #000;
    z-index: 999;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    width: 296px;
    font-weight: normal;
    border-radius: 5px;
    left: -283px;
    top: -5px;
    font-size: 15px;
    font-family: system-ui;
    opacity: 0;
    pointer-events: none;
    transition: all 300ms ease;
    backdrop-filter: blur(2px);
}
.scrollIndicator:hover:after {
    opacity: 1;
}
.advert .pause {
	display:none;
	width:50px;
	height:50px;
	position:absolute;
	top:-8px;
	left:-7px;
	border-radius:100%;
	border:3px solid rgba(255,255,255,0.8);
	box-shadow:0 0 15px rgba(0,0,0,0.7);
	background-color:rgba(100,0,0,0.3);
	backdrop-filter:blur(4px);
	cursor:pointer;
	z-index:9;
	transition: all 300ms ease;
	transform: scale(0.5);
}

.advert.paused .pause {
	background-color:rgba(0,100,0,0.4);
}
.advert .pause:hover{
	border:3px solid rgba(255,255,255,1);
	background-color:rgba(100,0,0,1);
}
.advert.paused .pause:hover{
	border:3px solid rgba(255,255,255,1);
	background-color:rgba(0,100,0,1);
}
.advert .pause:before {
    content: '';
    display: block;
    position: absolute;
    top: 12px;
    left: 13px;
    height: 22px;
    width: 6px;
    border-radius: 3px;
    background-color: rgba(255,255,255,0.8);
}

.advert .pause:after {
    content: '';
    display: block;
    position: absolute;
    top: 12px;
    left: 25px;
    height: 22px;
    width: 6px;
    border-radius: 3px;
    background-color: rgba(255,255,255,0.8);
}


.advert.paused .pause:before {
    top: 12px;
    left: 15px;
    height: 22px;
    width: 3px;
    border-radius: 3px 0 0 3px;
    background-color: rgba(255,255,255,0.8);
}

.advert.paused .pause:after {
    top: 12px;
    left: 18px;
    height: 22px;
    width: 17px;
    border-left: 16px solid rgba(255,255,255,0.8);
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent;
    background-color: transparent;
    border-radius: 0;
}
.advert.paused .pause:hover:before {
    background-color: rgba(255,255,255,1);
}
.advert.paused .pause:hover:after {
    border-left: 16px solid rgba(255,255,255,1);
}
.salesBoard {
	border-radius:10px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.6), 0 5px 100px 15px rgba(0,0,0,0.4);
	font-size: 12px;
	margin-bottom: 50px;
}
.salesBoard tr th {
	background-color:var(--rcol);
	text-align:center;
	color:#FFF;
	border:1px solid #666;
	text-align:center;
	padding:10px;
	border-top:none;
}

.salesBoard tr.disableedit:not(.enabled) {
    filter: grayscale(1);
}
.salesBoard tr.disableedit:not(.enabled) td * {
    pointer-events: none;
}

.salesBoard tr td {
	background-color:#F9F9F9;
	text-align:right;
	border:1px solid #CCC;
	padding: 3px 2px;
	position: relative;
}
.salesBoard tr:hover td, .salesBoard tr:hover td.boardleft, .salesBoard tr:hover td.consultantTotal {
	background-color:var(--vlcol2);
	color:#000 !important;
}

.salesBoard tr td strong{
	float: left;
    position: relative;
    z-index: 9;
}
.salesBoard tr td.boardleft {
	background-color:var(--vlcol);
	text-align:left;
	color:#5786A8;
	border-left:none;
	font-weight:bold;
	position:relative;
}
.salesBoard tr td.boardleft div.weeknames {
	width:100%;
	max-width:84px;
	height:100%;
	overflow:hidden;
	text-overflow: ellipsis;
    white-space: nowrap;
}
.salesBoard tr td.boardleft div.weeknames.nametypedealer {
	color:#900;
	font-size:9px;
}
.salesBoard tr.consultant td.boardleft {
	color: #45693F;
}
.salesBoard tr.boardTotal td,  tr.boardTotal td {
	font-weight:bold;
	border-top:2px solid #000;
	color:#A00;
	background-color:var(--vlcol2);
	border-bottom:none;
	white-space: nowrap;
}
.salesBoard tr th:first-of-type {
	border-radius:10px 0 0 0;
	border-left:none;
}
.salesBoard tr th:last-of-type {
	border-radius:0 10px 0 0;
	border-right:none;
}
.salesBoard tr td:last-of-type {
	border-right:none;
}
.salesBoard tr.boardTotal td:first-of-type {
	border-radius:0 0 0 10px;
}
.salesBoard tr.boardTotal td:last-of-type {
	border-radius:0 0 10px 0;
}
.salesBoard td span {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    text-align: right;
    padding-right: 3px;
    cursor: pointer;
    top: 0;
    right: 0;
    overflow: hidden;
	line-height: 30px;
}
.salesBoard td span:hover {
    background-color: #FFF;
    box-shadow: 0 0 15px rgba(0,0,0,0.4);
    z-index: 8;
}
.salesBoard td span[contenteditable="true"]{
	cursor:text;
}
.salesBoard td input[type="text"] {
    display: none;
    position: absolute;
    bottom: -36px;
    left: -92px;
    width: 150px;
    box-shadow: 0px 5px 10px rgba(0,0,0,0.4);
	background-color: var(--vlcol2);
}
.salesBoard td input[type="text"]:focus {
	background-color:#FFF;
}
.salesBoard tr td.editing {
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0,0,0,0.4);
    z-index: 10;
}
.boardsettings {
    display: none;
    background-color: #CCC;
    width: 28px;
    height: 100%;
    position: absolute;
    top: 0;
    right: -28px;
    box-shadow: 5px 2px 6px rgba(0,0,0,0.4);
    z-index: 9;
    padding-left: 6px;
    border-radius: 0 10px 10px 0;
}

.addToThisAmount {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 7px 4px;
    float: left;
    font-size: 27px;
    font-weight: bold;
    line-height: 10px;
    color: #777;
}
.addToThisAmount:after {
    content: '+';
    width: 129%;
    display: block;
    text-align: left;
    height: 100%;
    margin-left: -4px;
    position: relative;
}
.boardsave {
    color: #FFF;
    display: block;
    float: right;
    font-size: 19px;
    background-color: #090;
    border-radius: 100%;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    margin: 4px 1px;
}
.boardsave:after {
    content: '\2713';
    color: #FFF;
    display: block;
    float: right;
    font-size: 17px;
    background-color: #090;
    border-radius: 100%;
    width: 22px;
    height: 22px;
    line-height: 21px;
    text-align: center;
    margin: 1px;
}
.boardsave:hover:after {
    background-color: #060;
}
.addToThisAmount:hover {
	color:#FFF;
}
.salesBoard tr td.consultantTotal {
	background-color:var(--vlcol);
}
.boardChanged span {
    box-shadow: inset 0 0 0 1px #ADA;
}
.boardChanged:before {
    content: attr(data-firstname);
    display: block;
    position: absolute;
    background-color: #80b964;
    width: 10px;
    height: 15px;
    border-radius: 15px 0 0 15px;
    top: -10px;
    right: 0px;
    z-index: 9999;
    overflow: hidden;
    line-height: 15px;
    font-size: 9px;
    letter-spacing: 15px;
    padding-left: 3px;
    font-weight: bold;
    color: #FFF;
	transition:top ease 300ms;
}
.boardChanged:after {
    content: attr(data-lastname);
    display: block;
    position: absolute;
    background-color: #80b964;
    width: 10px;
    height: 15px;
    border-radius: 0 15px 15px 0;
    top: -10px;
    left: 100%;
    z-index: 9999;
    overflow: hidden;
    line-height: 15px;
    font-size: 9px;
    letter-spacing: 15px;
    padding-left: 1px;
    font-weight: bold;
    color: #FFF;
	transition:top ease 300ms;
}
.boardChanged:hover:before {
    width: auto;
    right: 0px;
    overflow: hidden;
    letter-spacing: 1px;
	top:-15px;
	white-space: nowrap;
}
.boardChanged:hover:after {
    width: fit-content;
    overflow: visible;
    letter-spacing: 1px;
    padding-left: 2px;
    padding-right: 2px;
	top:-15px;
	white-space: nowrap;
}
.addNewOption {
    width:30px;
    border-radius: 100%;
    background-color: #50b950;
    line-height: 109%;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    color: #FFF;
    float: right;
    height: 30px;
    font-size: 25px;
    margin: 2px 0 0 4px;
	position:relative;
}
.addNewOption:hover {
	background-color:#090;
    color: #FFF;
}
.addNewOption:after {
    content: '\2713';
}
.addopthere .formInput input[type="text"].half.opttitle{
    width: 65%;
    background-color: transparent;
    border: none;
    padding: 0 0 0 3px;
    height: 23px;
}
.addopthere .formInput input[type="text"].half.optprice {
    width: 27%;
    height: 23px;
    padding: 0;
    border: none;
    background-color: transparent;
	    margin-right: 8px;
}
input[type="text"].half.addopttitle {
    width: 60%;
}
input[type="text"].half.addoptprice {
    width: 28%;
    padding: 0 0 0 11px;
}
.addSymbolOption, .saveSymbolOption {
    position: absolute;
    right: 35.4%;
    bottom: 22px;
    cursor: pointer;
    font-size: 20px;
}
.saveSymbolOption {
    right: 30.4%;
    bottom: 7px;
}
.addSymbolOption:hover, .saveSymbolOption:hover {
	font-weight:bold;
	animation:blink2 infinite 700ms ease;
}
.deleteOption {
	position:absolute;
	right:-10px;
}
.addopthere .formInput {
	position:relative;
    height: 44px;
    min-height: 44px;
}
.saveOptions {
    width: 100%;
    margin: 0 0 15px 0;
}
.sminus {
	padding-right: 3px;
}
.sideMenu .addopthere .formInput input[type="checkbox"].linkchecker {
	display:none;
    position: absolute;
    right: -11px;
}
.makeLink {
    display: inline-block;
    height: 23px;
    width: 23px;
    background-image: url(../images/nicEditorIcons.gif);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: -505px 0;
    position: absolute;
    left: 6px;
    top: 62px;
	cursor:pointer;
}
.makeLink:hover, .makeLink.making {
    background-position: -484px 0;
}
.optionlink {
	position:relative;
}
.optionlink:before {
    position: absolute;
    left: -5px;
    top: 25px;
    content: '';
    display: block;
    border-left: 1px solid var(--rcol);
    height: calc(100% - 44px);
    width: 1px;
}
.optionlink .formInput:before {
    position: absolute;
    left: -5px;
    top: 25px;
    content: '';
    display: block;
    border-top: 1px solid var(--rcol);
    height: 1px;
    width: 4px;
}
input[type="radio"].deselect {
	display:none;
}
input[type="radio"].deselect + label {
	display:inline-block;
	width:200px;
	padding:15px;
	border-radius:5px;
	background-color:#AAA;
	color:#FFF;
	cursor:pointer;
}
input[type="radio"].deselect + label:hover {
	background-color: var(--rcol);
}
.cartOptionsBox .icloser {
    position: absolute;
    transform: scale(.5);
    border-radius: 100%;
    background-color: #000;
    border: 6px solid #FFF;
	top: 10px;
    right: 10px;
    width: 60px;
    height: 60px;
    cursor: pointer;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
    z-index: 9999999999999999999999999;
}
.cartOptionsBox .icloser:hover {
    background-color: #900;
}
.cartOptionsBox .icloser:after, .cartOptionsBox .icloser:before {	
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    background-color: #FFF;
    transform: rotate(-45deg);
    right: 10px;
    height: 5px;
    transition: all 300ms ease;
    border-radius: 5px;	
    width: 40px;
	translate: 6px -3px;
}
.cartOptionsBox .icloser:after {	
    transform: rotate(45deg);
}
div.button.commissioning {
    position: absolute;
    bottom: 20px;
    left: -300px;
    min-width: 231px;
    text-align: center;
}
.unlockcart {
    position: absolute;
    bottom: 36px;
    left: -58px;
	width:50px;
	height:50px;
	background-image:url(../images/locked.png);
	background-repeat:no-repeat;
	background-position:top left;
	transition:filter ease 300ms;
	cursor:pointer;
	z-index:999999999;
	background-size: contain;
}
.unlockcart:hover {
	filter:brightness(0.8) saturate(0);
}

.unlockcart.unlocked {
	background-image:url(../images/unlocked.png);
}
.commissioningDiv {
    display: none;
    position: absolute;
    bottom: -44px;
    left: -243px;
    width: 228px;
    background-color: #FFF;
    padding: 23px 10px 10px 10px;
    border-radius: 15px;
}
.commissioningDiv:before {
	content:'';
    position: absolute;
    top: -11px;
    left: 13px;
	border-bottom:11px solid #FFF;
	border-left:7px solid transparent;
	border-right:7px solid transparent;
}
.commissioningDiv.formInput label.overwrite {
    left: 10px;
	top:0;
	text-align: left;
}
#commissioningPrice{
}
.commprice {
	position:relative;
}
.commprice:after {
	position:absolute;
	content:attr(data-consumables);
	display:block;
	bottom:-48px;
	right:0;
	text-align:right;
}
.greyarticle .specTable {
	width:100%;
	border:1px solid var(--rcol);
}
.greyarticle .specTable tr td {
	padding:10px;
}
.greyarticle .HighlightRow:hover .titleSpec {
	background-color:#DEDEDE !important;
}
.greyarticle .HighlightRow:hover .valueSpec {
	background-color:#ECECEC !important;
}
.greyarticle .titleSpec {
	background-color:#EAF4FF;
	position:relative;
}
.greyarticle .valueSpec {
	background-color:#FFF;
	position:relative;
}
.greyarticle .evenSpec .titleSpec {
	background-color: #dcedff;
}
.greyarticle .evenSpec .valueSpec {
	background-color:#EAF4FF;
}
.allbdaystext a.button{
    width: 100%;
    text-align: center;
    height: auto;
    padding: 3px;
    margin: 0;
}

.newKeys {
    height: 33px;
    position: relative;
    outline: none !important;    
	
	z-index: 1;
	border: 1px solid #999;
    border-radius: 5px;
    padding: 5px;
    height: 35px;
    background-color: rgba(var(--rgblcol), 0.52);
	cursor:text;
}

.showhidethis {
	color:#4787C6;
	transition:opacity 300ms ease;
	position: absolute;
    top: 32px;
	left:8px;
	z-index:0;
}
.noChangeEdit:hover .showhidethis {
	opacity:0.3;
}
.keys {
    position: relative;
    z-index: 2;
    padding: 0 0 13px 8px;
    border: 2px dotted #AAA;
    border-radius: 5px;
    width: 100%;
    display: block;
	min-height: 40px;
}

.keyspan:active {
	display:inline; 
	cursor:grabbing;
}
.formInput .keyspan {
    display: inline-block;
    padding: 5px 15px 5px 5px;
    position: relative;
    background-color: #FFF;
    border: 1px solid #d8d8d8;
    margin: -3px 5px 0 0;
    width: auto;
    /*float: left;*/
    border-radius: 5px;
}
.supervisorPassword {
	display:none;
    position: fixed;
    top: 25%;
    left: 50%;
    margin-left: -160px;
    background-color: #EEE;
    padding: 15px;
    border-radius: 10px;
    width: 321px;
    box-shadow: 0 0 50px #000;
	z-index:99999999999999999999;
}
.supervisorPassword .closer {
    position: absolute;
    transform: scale(0.5);
    top: -14px;
    right: -19px;
}
div.silentSubmit {
	margin-top:20px;
	width: 100%;
	max-width: 100%;
	text-align:center;
    border-radius: 5px;
    padding: 5px;
    height: 35px;
    background-color: var(--rcol);
    color: #FFF;
    border: none;
    cursor: pointer;
}
div.silentSubmit:hover {
    background-color: var(--dcol);
}
.supervisorPassword + .overlay {
	backdrop-filter:blur(3px);
	opacity: 1;
}
.selectmachinesmessage {
    position: absolute;
    width: auto;
    white-space: nowrap;
    left: -459px;
    bottom: 71px;
    color: #F00;
    font-weight: bold;
    font-size: 20px;
}
.saveConsumables {
    left: -456px;
    bottom: -7px;
    width: 357px;
    position: absolute;
    text-align: center;
}
input[type="checkbox"].selectMachines {
    width: 25px;
    height: 25px;
    position: absolute;
    right: 5px;
    bottom: 5px;
    border-radius: 5px;
    box-shadow: 0 0 0px 981px rgba(0,0,0,0.5);
    z-index: 999999999999999;
}
input[type="checkbox"].selectMachines:checked {
    box-shadow: none;
}
.hideOverflow .cartitems{
	overflow:hidden;
}
.deleteComm, .deleteCust {
    position: absolute;
    top: -33px;
    right: -3px;
    width: 25px;
    height: 25px;
    translate: 0 7px;
    z-index: 99999;
}
.tsandcscomm {
    font-size: 11.5px;
    font-style: italic;
    text-align: center;
}
.preview, .preview2, .previewPI {
    padding: 6px;
    border-radius: 5px;
    margin-top: 0;
	float: right;
}
.hideText {
	color: transparent !important;
}
.hide {
	display:none !important;
}
.del.deleteCartitem.movedown {
    top: 0px;
    width: 35px;
    height: 35px;
}
.del.deleteCust {
    width: 35px;
    height: 35px;
}
.chat {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: var(--rcol);
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 999999999999999999999999;
    filter: drop-shadow(0px 4px 7px rgba(0,0,0,0.5));
	cursor:pointer;
	transition:all ease 300ms;
	overflow:hidden;
}
.chat:hover {
    background-color: #666;
}
.clicktochat {
    width: 30px;
    height: 16px;
    border-radius: 6px;
    background-color: #FFF;
	background-image: url(../images/dots.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size:contain;	
    position: absolute;
        bottom: 20px;
    right: 9px;
    z-index: 999;
    filter: drop-shadow(0px 4px 2px rgba(0,0,0,0.7));
	transition:all ease 300ms;
}
.chat:hover .clicktochat {
	    bottom: 24px;
}
.clicktochat:after {
    position: absolute;
    content: '';
    left: 19px;
    bottom: -8px;
	width: 0;
    height: 0;
    border-left: 9px solid #FFF;
    border-bottom: 9px solid transparent;
    display: block;
    transform: skewX(18deg);
	transition:all ease 300ms;
	background-color:transparent;
}

.chat:hover .clicktochat:after {
    bottom: -10px;
	width:8px;
	height:8px;
	border-radius:8px;
    border-left: 0px solid #FFF;
    border-bottom: 0px solid transparent;
    display: block;
    transform: none;
	background-color:#FFF;
}
.clicktochat:before {
	background-color:#FFF;
    position: absolute;
    content: '';
    left: 17px;
    bottom: -15px;
	width:0px;
	height:0px;
	border-radius:8px;
    display: block;
	transition:all ease 300ms;
}
.chat:hover .clicktochat:before {
	width:4px;
	height:4px;
}
.chat.chatting {	
    width: 300px;
	height: fit-content;
    border-radius: 20px;
	animation: openChat forwards 1200ms ease;
	background-color: var(--rcol);
}
.chat.chatting:hover {	
	background-color: var(--rcol);
}
.chat form {
    position: absolute;
    width: 271px;
    height: 433px;
    bottom: 100px;
    display: block;
    right: 14px;
    background-color: #efefef;
    padding: 15px;
    border-radius: 10px;
	cursor:default;
	opacity:0;
}
.chat.chatting form {
	opacity:1;
}

.chat.chatting form input[type="submit"] {
    translate: -18px 7px;
}
@keyframes openChat {
	0%{	height:50px;}
	50%{	height:50px;}
	100%{	height:550px;}
}
.mascottalk {
    height: 100px;
    width: calc(100% + 15px);
    position: relative;
    background-image: url(../images/mascot%20talk.png);
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 10% 0 0 27%;
    margin: -20px 0 -17px -15px;
    color: #333;
}
.closeChat  {
    position: absolute;
    transform: scale(.5);
    border-radius: 100%;
    background-color: #000;
    border: 6px solid #FFF;
    bottom: 502px;
    right: -13px;
    width: 60px;
    height: 60px;
    cursor: pointer;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
    z-index: 9999999999999999999999999;
}
.closeChat:before, .closeChat:after{
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    background-color: #FFF;
    transform: rotate(-45deg);
    right: 10px;
    height: 5px;
    transition: all 300ms ease;
    border-radius: 5px;
    width: 40px;
    translate: 6px -3px;
}
.closeChat:after {
    transform: rotate(45deg);
}
.closeChat:hover {
    background-color: #900;
}
.whatsappChat {
    background-image: url(../images/whatsapp_filled.png);
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    background-color: #6abd50;
    position: absolute;
    right: 87px;
    bottom: 13px;
    color: #fff !important;
    padding: 0 6px 0 34px;
    border-radius: 50px;
    border: 2px #6abd50 solid;
}
a.whatsappChat {
    background-image: url(../images/whatsapp_filled.png);
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    background-color: #6abd50;
    position: absolute;
    right: 87px;
    bottom: 13px;
    color: #fff !important;
    padding: 0 6px 0 34px;
    border-radius: 50px;
    border: 2px #6abd50 solid;
	cursor:pointer;
    width: 206px;
    height: 28px;
    line-height: 22px;
}
.chatting a.whatsappChat {
    left: 20px;
    right: unset;
}
.chat form .captchaSpin {
    scale: 0.7;
    position: absolute;
    bottom: -44px;
    left: 125px;
    width: 180px !important;
    white-space: nowrap;
}
 .chat form .captchaSpin div{
	 margin-right: 7px;
}
a.whatsappChat:hover {
    background-color: #49992f;
    border: 2px #49992f solid;
}
#availability{
    margin-bottom: 15px;
}
.customavailability {
	display:none;
}
.clientSearch {
	width:30px;
	height:30px;
	margin-left: 10px;
	display:inline-block;
	background:url(../images/people-search.jpg);
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	cursor:pointer;
}
.clientSearch:hover {
	opacity: 0.6;
}
.searchClients{
    border: 1px solid #999;
    border-radius: 5px;
    padding: 5px;
    height: 35px;
    background-color: rgba(var(--rgblcol), 0.52);
    width: 100%;
	cursor:text;
	display:inline-block;
	position:relative;
	margin-bottom: 50px;
}

.searchClients:before {
	display:none;
	content:'Search for clients details that has already been filled';
	position:absolute;
	color:rgb(var(--rgbcol), 0.4);
}
.searchClients:empty:before {
	display:block;
}
.searchClients:after{
	position:absolute;
	bottom:-33px;
	left:0;
	content:'';
	border-bottom:1px solid #DDD;
	width:100%;
	height:1px;
	display:block;
}
.clientsaveddetails {
    position: absolute;
    width: calc(100% - 20px);
    height: 310px;
    background-color: #FFF;
    z-index: 9;
    border-radius: 10px;
    left: 10px;
    filter: drop-shadow(0 8px 15px rgba(0,0,0,0.7));
    bottom: -265px;
	display:none;
	padding:15px;
}
.clientsaveddetails .result {
	height:100%;
	width:100%;	
    overflow-x: hidden;
    overflow-y: auto;
	padding-right: 15px;
}
.clientsaveddetails:before {
    position: absolute;
    content: '';
    border-bottom: 15px solid #FFF;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    left: 30px;
    top: -14px;
}
.clientsaveddetails .result .clientRow {
	padding:10px;
	cursor:pointer;
}
.clientsaveddetails .result .clientRow:hover {
	background-color: var(--lcol2);
}
.clientsaveddetails .result .clientRow :last-of-type {
	border-bottom:none;
}

.clientsaveddetails .result h5 {
    font-size: 12px;
    color: #DDD;
    margin: 0;
    font-weight: normal;
}
.addCustom {
    display: block;
    position: absolute;
    bottom: -59px;
    left: 0;
    height: 40px;
    width: 40px;
    background-color: var(--rcol);
    color: #FFF;
    font-size: 40px;
    text-align: center;
    line-height: 27px;
    border-radius: 30px;
    border: 1px solid #DDD;
    font-weight: bold;
    text-shadow: 2px -2px 2px rgba(0,0,0,0.6);
    cursor: pointer;
    transition: all linear 300ms;
    z-index: 9;
}
.addCustom:hover{	
    background-color: var(--dcol);
}
.Custom {
    display: flex;
    flex-flow: wrap;
    gap: 10px;
    padding: 10px;
    position: absolute;
    background-color: #EEE;
    width: 500px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
}
.closeCustom {
    left: 500px;
    bottom: 0;
    background-color: #000;
    transform: rotate(45deg) scale(0.7);
}
.customCode, .customField, .customQty, .customPrice {
    flex: 1;
    height: 35px;
    border-radius: 5px;
    border: 1px solid var(--rcol);
    padding: 5px;
    position: relative;
    line-height: 139%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
}

.customCode:before, .customField:before, .customPrice:before, .numberModal .amount:before {
    display: none;
    content: attr(data-placeholder);
    position: absolute;
    inset: 0;
    color: rgba(var(--rgbcol), 0.5);
    pointer-events: none;
    padding: 5px;
    line-height: 133%;
}
.customPrice {
	padding-left: 15px;
}
.customPrice:before {
	margin-left: 10px;
}
.customPrice:after {
    pointer-events: none;
    content: 'R';
    left: 3px;
    position: absolute;
    top: 5px;
    font-weight: bold;
    color: var(--rcol);
}
.customCode:empty:before, .customField:empty:before, .customPrice:empty:before, .numberModal .amount:empty:before {
	display:block;
}
.customQty {
    padding: 0 !important;
}
.customCode, .customField, .customPrice {
	cursor:text;
    background-color: rgba(var(--rgblcol), 0.52);
}
.customCode:hover, .customField:hover, .customPrice:hover, .customCode:focus, .customField:focus, .customPrice:focus {
    background-color: #FFF;
}
.customField {
	flex:3;
}
.addCustomBtn {
	width:100%;
	text-align:center;
	padding: 5px;
}
.downloadImage {
	background-image:url(../images/downloadImage.png?v=0);
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	width: 50px;
	height: 50px;
	position:absolute;
	z-index:9999999;
	top:48px;
	right:10px;
	cursor:pointer;
	transition:filter ease 300ms;
	filter: drop-shadow(0 0 6px rgba(0,0,0,0.6)) saturate(0);
}
.downloadImage:hover {
	filter: drop-shadow(0 0 6px rgba(0,0,0,0.6)) saturate(1);
}
.quotePopup {
    display: none;
    background: rgba(231,243,250,0.8);
    position: fixed;
    box-shadow: 0 0 15px rgba(0,0,0,0.6);
    border-radius: 10px;
    padding: 10px;
    top: 0;
    left: 0;
    backdrop-filter: blur(2px);
	color: #000;
	white-space: nowrap;
}
ul.quotelist {
    display: block;
    width: 100%;
    margin-top: 15px;
    clear: both;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(100vh - 430px);
}
li.quoteListItem:nth-of-type(even) .quotePopup {
    background:  rgba(210,231,247,0.6);
}
li.quoteListItem small{
    color: #CCC;
}
li.quoteListItem {
	border-radius:5px;
	padding: 3px;
	cursor:pointer;
	list-style-type: decimal;
}
li.quoteListItem:hover {
    background-color: var(--vlcol2);
}
.searchquotetype {
	height:35px;
	overflow:hidden;
	position:relative;
}
.quotesearch {
	width:calc(100% - 50px);
	position:absolute;
	left:50px;
	top:0;
	display:none;
	height:35px;
}
.searchquoteswitch {
	height:35px;
	width:35px;
	cursor:pointer;
	background-image:url(../images/sicons.png);
	background-repeat:no-repeat;
	background-size:100% 400%;
	background-position: 0 0;
	transition:all ease-in 300ms;
}
.searchquoteswitch:hover {
	filter:brightness(1.4);
}

.searchquoteswitch.surname {
	background-position: 0 -35px;
}
.searchquoteswitch.company {
	background-position: 0 -70px;
}
.searchquoteswitch.date {
	background-position: 0 -105px;
}
.editQuotePanel {
    display: none;
    width: 100%;
    position: fixed;
    overflow-y: auto;
    overflow-x: hidden;
    top: 0;
    right: 0;
    background-color: rgba(0,0,0,0.7);
    height: 100%;
    box-shadow: 0 0 15px rgba(0,0,0,0.7);
    cursor: default;
    backdrop-filter: blur(4px);
}
.quoteeditor {
    padding: 0 27px 0 50px;
    min-height: 100%;
    border-bottom: 10px solid transparent;
	position:relative;
}
.eventfilter {
    background-image: url(../images/sicons.png);
    background-repeat: no-repeat;
    background-size: 38px 369%;
    background-position: -1px -105px;
    position: relative;
    border: 1px solid #CCC;
    padding: 7px 7px 7px 37px;
    background-color: #FFF;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 5px;
    transition: all ease 300ms;
    width: 200px;
    z-index: 9;
}
.eventfilter:hover {
    background-color: #EEE;
}
.eventfilter.opened,.eventfilter.opened:hover {
	filter:drop-shadow(0 0 15px rgba(0,0,0,0.6));
    background-color: #FFF;
	cursor:default;
	background-image: none;
}
.eventfilterdrop {
    display: none;
    position: absolute;
    width: 200px;
    background-color: #FFF;
    border: 1px solid #CCC;
    left: -1px;
    top: 3px;
    border-top: none;
    z-index: 9;
    padding: 31px 4px 4px 4px;
}
.eventYear {
    border: 1px solid #CCC;
    text-align: center;
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    transition: all ease 300ms;
    margin-bottom: 10px;
    position: relative;
    margin-top: -30px;
    z-index: 9;
    background-color:  var(--lcol2);
}
.eventYear.notcurrent {
	background-color:#FFF;
}
.eventmonths {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.nextYear, .lastYear {
    position: absolute;
    transform: rotate(-45deg);
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    width: 15px;
    height: 15px;
    right: 15px;
    top: 12px;
    z-index: 99;
	cursor:pointer;
}
.lastYear {
	transform:rotate(135deg);
	right:unset;
	left:15px;
}

.nextYear:hover, .lastYear:hover {
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
}
.eventmonth {
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
	transition:all ease 300ms;
}
.eventmonth.selected, .eventmonth.realselected {
	background-color: var(--lcol2);
}
.eventfilter:after {
	position:absolute;
	right:10px;
	transform:rotate(45deg);
	border-right:1px solid #333;
	border-bottom:1px solid #333;
	width:10px;
	height:10px;
	display:block;
	content:'';
	top:10px;
}
.allevents {
	position:relative;
	min-height:300px;
}
.eventYear.notcurrent + .eventmonths .eventmonth.selected {
	background-color:#FFF;
	    color: #666;
}
.eventmonth:hover, .eventmonth.selected:hover, .eventYear.notcurrent + .eventmonths .eventmonth.selected:hover {
	background-color:var(--rcol);
	color:#FFF;
}
.resetevents {
    position: absolute;
    margin: -38px 0 0 212px;
    display: block;
}
.event {
	margin: 35px 0;
}
.event h1 {
    margin-bottom: 4px;
    padding: 0 0 6px 16px;
    border-bottom: 3px solid #EEE;
}

.event h1 small {
    float: right;
    margin-top: 28px;
    position: relative;
    display: block;
}
.evenContent span {
    display: block;
    overflow: hidden;
    height: 233px;
    background-color: #fff;
    width: calc(100% - 30px);
    border-radius: 22px;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
	position:relative;
	margin-left:10px;
}
.evenContent span font {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
	width:100%;
    padding: 5px;
}
.eventImage {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 235px;
    height: 340px;
    background-color: #666;
    float: left;
    position: relative;
    border-radius: 6px;
}
.eventImage:before {
    content: '';
    width: 30px;
    height: 30px;
    position: absolute;
    display: block;
    left: 222px;
    bottom: 36px;
    border-radius: 30px;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
    background-color: #FFF;
    z-index: 9;
    pointer-events: none;
}
.eventImage:after {
    content: '';
    width: 15px;
    height: 15px;
    position: absolute;
    display: block;
    left: 207px;
    bottom: 22px;
    border-radius: 30px;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
    background-color: #FFF;
    z-index: 8;
}
.eventImage .expodate {
    height: 100%;
    position: relative;
    background-color: rgba(0,0,0,0.4);
    border-radius: 5px;
}

.eventImage .expodate div {
	position:absolute;
	color:#FFF;
}
.eventImage .expodate div:first-of-type {
    top: 34%;
    text-align: center;
    width: 100%;
    font-family: 'Impact';
    font-size: 52px;
}
.eventImage .expodate div:last-of-type {
    width: 100%;
    text-align: center;
    top: 54%;
    font-family: 'Impact';
    font-size: 74px;
}
.evenContent {
	padding:0 15px;
	float:left;
	width: calc(100% - 235px);
}
.eventImage img {
	display:none;
	height:1px;
	position:absolute;
}
.fitFill {
    background-image: url(../images/fit.png?v=0);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    width: 46px;
    height: 30px;
    position: absolute;
    z-index: 9999999;
    top: 10px;
    right: 15px;
    cursor: pointer;
    transition: filter ease 300ms;
	transition: all ease-in 300ms;
	filter: drop-shadow(0 0 6px rgba(0,0,0,0.6)) saturate(0);
	cursor:pointer;
}
.fitFill:hover {
	filter: drop-shadow(0 0 6px rgba(0,0,0,0.6)) saturate(1);
}
.fitFill.fitimg {
    background-position: 0 -42px;
}
.scrollExpoGallery {
    height: 50px;
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 6px;
}
.scrollExpoGallery .groupOfImages {
	height: 50px;
	width: max-content;
	white-space:nowrap;
	    position: absolute;
		transition:all ease 300ms;
}
.evenContent a.button{
    width: 100%;
    margin: 10px 0;
    height: 51px;
    padding: 11px;
    text-align: center;
}
.evenContent a.button.disabled {
    opacity: 0.7;
    color: #000;
    background-color: #EEE;
    border: none;
	font-style:italic;
}
.evenContent .bigImg {
    height: 100%;
    float: left;
    margin: 2px;
    width: 50px;
    object-fit: cover;
    object-position: center;
	z-index:999;
	transition: all ease 300ms;
}
.scrollExpoLeft {
    position: absolute;
    height: 50px;
    width: 50px;
    left: 0;
    background-image: linear-gradient(90deg, #FFF, transparent);
	cursor:pointer;
	transition:all ease 300ms;
	z-index:999;
}

.scrollExpoLeft:after, .scrollExpoRight:after {
    content: '';
    display: block;
    height: 50%;
    width: 50%;
    transform: rotate(45deg);
    position: absolute;
    left: 13px;
    top: 25%;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
}
.scrollExpoRight:after {
    transform: rotate(-45deg);
    border-left: none;
    border-right: 2px solid #fff;
}
.scrollExpoRight {
    position: absolute;
    height: 50px;
    width: 50px;
    right: 0;
    background-image: linear-gradient(-90deg, #FFF, transparent);
	cursor:pointer;
	transition:all ease 300ms;
	z-index:999;
}
.scrollExpoLeft.disabled, .scrollExpoRight.disabled {
	opacity:0;
	pointer-events:none;
}
.scrollExpoLeft:hover:after, .scrollExpoRight:hover:after {
	filter:drop-shadow(0 0 4px rgba(0,0,0,1));
	animation:shakeOther infinite ease 1000ms;
}
.scrollExpoGallery em {
	display:block;
    position: absolute;
    background-color: #EEE;
    text-align: center;
    line-height: 50px;
    border-radius: 10px;
	width:100%;
}
.groupOfImages:hover img:not(:hover){
	filter:brightness(1.1) contrast(1.1) saturate(0.2);
	opacity:0.4;
}
a.button.half:not(.commissioning), div.button.half:not(.commissioning) {
    width: calc(49% - 10px);
    margin-right: 1%;
}
.sideMenu a.button.half:not(.commissioning), .sideMenu div.button.half:not(.commissioning) {
    margin-right: 0%;
}
.enableItNotes:after {
	content:' Note';
}
.hideDrop {
	display:none;
}

.cartOptionsBox input[type="radio"] + label,.cartOptionsBox input[type="checkbox"] + label{
	width: calc(100% - 30px);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	margin: 0;
	translate: 0 5px;
}
.halfFirstLabel{
    width: 48%;
    overflow: hidden;
    white-space: nowrap;
}
.article {
	position:relative;
}
.article h4 {
	height: 50px;
	overflow:hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.article .articleImg {
	height:200px;
	width:100%;
	object-fit:cover;
	margin-bottom:10px;
	border-radius: 10px;
}
.shortArticle {
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 15px;
}
.article small {
    /*border-top: 1px solid #bbb;*/
    width: 100%;
    display: block;
    color: #bbb;
    text-align: right;
}
.like {
	position: relative;
	padding-bottom: 15px;
	padding-left: 31px;
	color: var(--rcol);
	width: 100%;
	border-bottom: 1px solid #bbb;
	font-size: 13px;
}
.like > div {
    background-image: url(../images/heart.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left;
    height: 21px;
    width: 80px;
    display: block;
    filter: saturate(0) brightness(1.5);
    cursor: pointer;
    left: 3px;
    top: 3px;
    position: absolute;
    transition: all ease 300ms;
}
.like > font {
    font-size: 12px;
    margin-right: 2px;
    padding: 0 3px;
    translate: -1px 2px;
    display: inline-block;
    color: #FFF;
    background: #DDD;
    border-radius: 5px;
    cursor: pointer;
}
.like > font:hover {
    background: var(--dcol);
}
    
.like > div:hover {
    filter: saturate(0) brightness(1.5) drop-shadow(0 0 3px rgba(0,0,0,0.2));
	/*animation: wiggle 2000ms infinite ease;*/
}
.article .like > div:active, .like.liked > div:active {
	transform:scale(1.5) !important;
}
.like.liked > div {
    filter: saturate(1);
}
.like.liked > div:hover {
    filter: saturate(1) drop-shadow(0 0 3px rgba(255,0,0,0.4));
}
.sharers iframe {
	filter:saturate(0.5);
	transition: all ease 300ms;
}
.shareEmail {
	background-image: url(../images/signature_mail.png?v=1);
	display: inline-block;
    height: 30px;
    width: 30px;
    background-size: contain;
	background-repeat:no-repeat;
	margin-right:5px;
	filter:saturate(0.5);
	transition: all ease 300ms;
}
.shareWhatsapp {
	background-image: url(../images/whatsapp.png?v=1);
	display: inline-block;
    height: 30px;
    width: 30px;
    background-size: contain;
	background-repeat:no-repeat;
	margin-right:5px;
	filter:saturate(0.5);
	transition: all ease 300ms;
}
.shareWhatsapp:hover, .shareEmail:hover, .sharers iframe:hover  {
	filter:saturate(1);
	translate:0 -5px;
}
.individualarticle  {
	margin-top:30px;
	position:relative;
	padding: 0 15px 64px 15px;
	width: 100%;
}
.individualarticle img {
	max-width:100%;
}
.individualarticle .like {
    padding-top: 15px;
    margin-top: 20px;
    position: absolute;
    bottom: 0;
}
.individualarticle .sharers {
    position: absolute;
    bottom: -45px;
	right:0;
}
.individualarticle .like > div {
    top: 16px;
}
.individualarticle img {
    max-width: 100%;
    width:100%;
    float: none;
    padding: 30px 0;
}
.floatLeft, .individualarticle img.floatLeft {
    max-width: 50%;
    max-height: calc(100% - 50px);
    float: left;
    padding: 0 15px 15px 0;
    object-fit: cover;
}
.sideMenu .contents.bigger {
    width: 800px;
	max-width:100vw;
}
.clickToAddImg, .clickToAddImgLink {
    background-image: url(../images/downloadImage.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 22px;
    height: 22px;
    position: absolute;
    z-index: 9;
    right: 15px;
    translate: 0 17px;
    cursor: pointer;
    transition: all 300ms ease;
	filter:saturate(0.3);
}
.clickToAddImgLink {
    background-image: url(../images/linktoImage.png);	
    right: 40px;
}
.linkImageInEditor, .linkInEditor {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 270px;
    margin: -200px 0 0 -125px;
    padding: 20px;
    z-index: 999999999999999999999;
    background-color: #FFF;
    border-radius: 5px;
    box-shadow: 0 0 0 5000px rgba(0,0,0,0.6), 0 0 35px black;
}
.linkInEditor {
	height: 150px;
}
.linkImageInEditor #imgWidth{
	width:250px
}
.linkImageInEditor #widthType{
	width:105px
}
.hideTextarea {
	position:relative;
}
.link-button {
    width: 18px;
    height: 18px;
    overflow: hidden;
    zoom: 1;
    cursor: pointer;
    background-image: url(http://js.nicedit.com/nicEditIcons-latest.gif);
    background-position: -378px 0px;
    right: 67px;
    position: absolute;
	top: 18px;
}
div.button.addthisimage {
	margin-left: 0;
	width: 190px;
	text-align:center;
	margin-top: 15px;
}
div.button.canceladdimage {
    float: right;
    width: 150px;
    margin-right: 0;
	text-align:center;
	margin-top: 15px;
}
.clickToAddImg:hover, .clickToAddImgLink:hover {
	transform:scale(1.1);
	filter:saturate(1);
}
.AddImgHere {
    width: 100%;
    height: auto;
    cursor: pointer;
}
.AddImgHere:hover {
	filter:brightness(0.6);
}
.uploadarticleimg {
	opacity:0;
	position:absolute;
	width:1px;
	height:1px;
	overflow:hidden;
}
.nicEdit-main img {
	max-width:100%;
}
.contents.bigger .hideTextarea .nicEdit-main {
	height: 500px;
}
.commentSection {
    border-top: 1px solid #EEE;
    margin-top: 50px;
    min-height: 50px;
    width: 100%;
    position: relative;
    translate: 15px 0;
}
.individualarticle .like {
    padding: 15px 15px 15px 33px;
    margin-top: 20px;
    position: absolute;
    bottom: -50px;
    border-top: 1px solid #bbb;
    border-bottom: none;
    background-color: rgba(255,255,255,0.9);
    border-radius: 5px;
    box-shadow: 0 0 14px rgba(0,0,0,0.4);
}
.comments{
    margin-top: 20px;
}
.comment {
    position: relative;
    background-color: #ffffff;
    padding: 15px;
    border-radius: 15px;
	margin:15px 0 45px 0;
    filter: drop-shadow(0 0 20px rgba(0,0,0,0.1));
}
.comment h3 {
    font-size: 16px;
    font-weight: bold;
}
.comment h3 em, .areply h3 em {
    clear: both;
    display: block;
    font-size: 11px;
}
.newCommentImg {
    transform: scale(0.7) translate(44px, 10px);
}
.commentDate {
    position: absolute;
    top: 13px;
    right: 15px;
    text-align: right;
    font-style: italic;
    color: #AAA;
}
.deleteComment {
	position:absolute;
	right:5px;
	top:50%;
}
.likeComments{
    position: absolute;
    bottom: -30px;
	color:var(--rcol);
}
.likeComment {
    height: 30px;
    width: 30px;
    display: inline-block;
    background-image: url(../images/like.svg);
    background-position: center;
    background-size: 200%;
    background-repeat: no-repeat;
    position: relative;
    translate: 0 8px;
    cursor: pointer;
}

.likeComment:hover {
	opacity:0.6;
}
.likeComment.likedComment {
	background-image:url(../images/liked.svg);	
}
.reply {
    cursor: pointer;
}

.reply:hover {
	color:var(--lcol);
}
.showReplies {
	background-color:#FFF;
	padding:15px 15px 15px 45px;
	width:fit-content;
	position:relative;
	border-radius:30px;
	transition:all ease 300ms;
	cursor:pointer;
}
.showReplies.hideReplies {
	background-color:#EEE;
}
.showReplies:hover, .showReplies.hideReplies:hover {
	background-color:var(--vlcol2);
}
.showReplies:after {
    content: '';
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    transition: all ease 300ms;
    border-right: 1px solid var(--rcol);
    border-bottom: 1px solid var(--rcol);
    left: 20px;
    top: 20px;
}
.showReplies.hideReplies:after {
    transform: rotate(225deg);
	top: 25px;
}
.replies {
	display:none;
}
.areply {
    position: relative;
    background-color: #fff;
    /*box-shadow: 0 0 15px rgba(0,0,0,0.1);*/
    padding: 15px;
    border-radius: 15px;
    margin-bottom: 0;
    transform: scale(0.9);
}
.replies .commentImage:before, .replies .commentImage:after {
	display:none;
}
.replyComment {
	height: 69px;
    margin-bottom: 27px;
}
.silentSend input[type="submit"].arrowsubmit {
    background-image: url(../images/arrowsubmit.png);
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    color: transparent;
    font-size: 5px;
    height: 25px;
    width: 35px;
    z-index: 99;
    position: absolute;
    top: 27px;
    right: 63px;
	filter: saturate(0);
	transition: filter ease 300ms;
	display:none;
}
.silentSend input[type="submit"].arrowsubmit:hover {
	filter: saturate(1);
}
.articleImageHover {
	cursor:pointer;
}
.articleImageHover:focus, .articleImageHover:active {
	outline:2px solid var(--rcol)
}
.imageChanger {
    display: none;
    position: fixed;
    width: 96px;
    border-radius: 5px;
    height: 88px;
    padding: 11px;
    background-color: #fff;
    box-shadow: 0 0 26px rgba(0,0,0,1);
}
.imageChanger img {
    height: 30px;
    margin-bottom: 7px;
	filter:saturate(0);
	cursor:pointer;
	transition:all ease 300ms;
}

.imageChanger img:hover {
	filter:saturate(1);
	transform:scale(1.1);
}
img.halfcenter {
    clear: both;
    position: relative;
    width: 50%;
    margin: 0 auto;
    display: block;
}
img.halfleft {
	width:calc(50% - 30px);
	float:left;
	margin:15px;
}
img.halfright {	
	width:calc(50% - 30px);
	float:right;
	margin:15px;
}
.abox {
	padding:15px;
	border-radius:5px;
	box-shadow:0 0 15px rgba(0,0,0,0.3);
	margin-bottom: 30px;
	transition:background-color 600ms ease;
}
.abox:hover {
	background-color:#FFF;
}

.abox a.button {
    width: 100%;
    margin: 20px 0;
    text-align: center;
    line-height: 2px;
}
.latestArticles {
    position: relative;
    margin-bottom: 30px;
    width: 80%;
    margin-left: 10%;
}
.homeArticle {
	border-radius:20px;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	background-color:var(--lcol);
	width:30%;
	padding-bottom:30%;
	height:0;
	position:relative;
	color:#FFF;
	overflow:hidden;
}

.homeArticle:nth-of-type(1) {
    width: 68%;
    padding-bottom: 62%;
}
.homeArticle:nth-of-type(2) {
    position: absolute;
    right: 0;
    top: 0;
}.homeArticle:nth-of-type(3) {
    position: absolute;
    bottom: 0;
    right: 0;
}
.darkenArticle {
	background-color:rgba(0,0,0,0.3);	
	position:absolute;
	z-index:2;
	top:0;
	left:0;
	width:100%;
	height:100%;
	transition:background-color ease 300ms;
}
.homeArticle:hover .darkenArticle {
	background-color:rgba(0,0,0,0.5);	
}
.homeArticle h1 {
    position: absolute;
    z-index: 2;
    color: #FFF;
    bottom: 46px;
    left: 10px;
    border: none;
    text-align: left;
    width: calc(100% - 70px);
    font-size: 2em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}
.homeArticle h1 small {
	font-style:italic;
	color:#AAA;
	font-size:14px;
	display:block;
	clear:both;
	margin-top:15px;
}
.homeArticle a {
    display: block;
    position: absolute;
    z-index: 2;
    color: #FFF;
    bottom: 10px;
    left: 10px;
    height: 50px;
    width: 120px;
    text-align: left;
    border-radius: 50px;
    border: 1px solid #FFF;
    padding: 10px 15px;
    font-size: 12px;
}
.homeArticle a:hover {
	background-color:rgba(0,0,0,0.5);	
}
.homeArticle span {
	display:block;
	position:absolute;
	z-index:2;
	color:#FFF;
	bottom:10px;
	left:130px;
	height:50px;
	width: auto;
	border-radius:50px;
	background-color:rgba(255,255,255,0.1);
	padding:12px 20px 0 60px;
	font-size:12px;
}
.homeArticle span img {
	height:40px;
	width:40px;
	border-radius:100%;
	position:absolute;
	left:5px;
	top:5px;
	object-fit:cover;
}
.homeArticle a:after {
    content: '';
    display: block;
    position: absolute;
    z-index: 2;
    right: 13px;
    top: 15px;
    border-top: 2px solid #FFF;
    border-right: 2px solid #FFF;
    width: 12px;
    height: 12px;
}
.homeArticle a:before {
    content: '';
    display: block;
    position: absolute;
    z-index: 2;
    right: 21px;
    top: 15px;
    border-right: 2px solid #FFF;
    height: 18px;
    transform: rotate(45deg);
}
.icontest {
    position: relative;
    width: 41px;
    height: 41px;
}
.icontest:before {
    font-size: 34px;
    color: #999;
    transition: all ease 200ms;
    cursor: pointer;
    display: block;
    position: absolute;
    width: 41px;
    text-align: left;
    height: 41px;
    padding: 5px;
}
.icontest:after {
    content: attr(data-icon);
    position: absolute;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    background-color: #FFE;
    color: #555;
    display: block;
    padding: 5px;
    border-radius: 5px;
    pointer-events: none;
    opacity: 0;
    font-family: 'Segoe UI';
    transition: all ease 200ms;
    z-index: 99999999999;
    top: 4px;
    left: 153%;
    white-space: nowrap;
    text-align: left;
}
.icontest:hover:after, .icontest.throb:after {
	opacity:1;
}
.icontest:hover:before, .icontest.throb:before {
    z-index: 99;
    transform: scale(2);
    color: #000;
    background-color: #FFF;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0,0,0,0.7);
}
.addNewProductButton {
    position: absolute;
    height: 31px;
    width: auto;
    background-color: var(--rcol);
    background: linear-gradient(180deg, #DDD 69%, #CCC);
    color: #333;
    padding: 2px 11px;
    z-index: 9;
    transform: rotate(-90deg) translate(-237%, -98%);
    transform-origin: left;
    border-radius: 5px 5px 0 0;
	cursor:pointer;
}
.addNewProductButton:hover {
    background-color: var(--dcol);
    background: linear-gradient(180deg, #CCC 69%, #BBB);
}
.addNewProductButton:active {
    background-color: var(--dcol);
    background: linear-gradient(180deg, #BBB 69%, #CCC);
}
.addNewProductDiv {
    display: none;
    position: absolute;
    height: 111px;
	padding: 15px;
    width: 50%;
    background-color: #DDD;
    z-index: 9;
    top: 168px;
    left: 34px;
    box-shadow: 5px 4px 11px rgba(0,0,0,0.4);
    border-radius: 0 10px 10px 0;
	overflow:hidden;
}
.addNewProductCategory, .addNewProductProduct {
    display: none;
    position: absolute;
    height: 100%;
	padding: 15px;
    width: 100%;
    background-color: #DDD;
    z-index: 10;
    top: 0;
    right: 0;
}

.addNewProductCategory h5, .addNewProductProduct h5 {
	padding-left:30px;
	position:relative;
}
.closeCatSelector, .closeProdSelector {
    cursor: pointer;
    font-size: 48px;
    left: 0;
    top: -20px;
    position: absolute;
}
.closeCatSelector:hover, .closeProdSelector:hover{
	color:var(--rcol);
}
select.addNewProduct {
	width: 84%;
}
.sideMenu div.button.addThisProduct {
    width: 70px;
    position: absolute;
    right: 15px;
    top: 45px;
}
.sideMenu div.button.addThisProduct.disabled {
	color:#BBB;
}
a.button.makereview {
    position: relative;
    margin: -73px auto 0 auto;
    display: block;
    width: 300px;
    text-align: center;
}
.stockAmt {
    font-size: 19px;
    color: #AAA;
    margin: 12px 0 0 0;
}
.changetosubintrant {
	padding:20px;
}
.changetosubintrant div {
    height: 0;
    padding-bottom: 100%;
    position: relative;
    container-type: inline-size;
    background-size: cover;
    background-position: center;
	border-radius: 20px;
    overflow: hidden;
}
.changetosubintrant div span {
    cursor: pointer;
    transition: all ease 300ms;
    color: #FFF;
    width: 100%;
    height: 100%;
    display: block;
    text-align: center;
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    font-size: 32px;
    font-size: 8.5cqw;
    padding-top: 30%;
    line-height: 1;
}
.changetosubintrant:hover div span {
	background-color:rgba(0,0,0,0.2);
}
.slideScale {
	position:relative;
	padding:10px;
	/*background-color:#EEE;*/
	height: 30px;
}
.slideScaleLeft, .slideScaleRight {
    width: 20px;
    height: 20px;
    background-color: #EEE;
    background: url(../images/chrome.jpg);
    background-size: contain;
    z-index: 999;
    position: absolute;
    box-shadow: inset 3px -3px 7px rgba(0,0,0,0.4), -2px 4px 9px rgba(0,0,0,0.5);
    border-radius: 20px;
    top: -6px;
    border: 1px solid #AAA;
    cursor: pointer;
	transition:translate 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.slideScaleLeft:hover,
.slideScaleRight:hover  {
    box-shadow: inset 3px -3px 7px rgba(0,0,0,0.4), -2px 4px 15px rgba(0,0,0,0.9);
	translate:0 -1px;
	transform:scale(1.05);
}
.slideScaleLeft:active,
.slideScaleRight:active  {
    box-shadow: inset 3px -3px 7px rgba(0,0,0,0.4), -2px 4px 9px rgba(0,0,0,0.5);
	translate:0 1px;
	transform:scale(0.95);
}
.slideScaleLeft  {
	left:-20px;
}
.slideScaleRight  {
	right: -20px;
}
.slideScaleTrack {
    position: absolute;
    left: 10px;
    top: 10px;
    width: calc(100% - 20px);
    height: 10px;
    border-radius: 10px;
    background-color: #999;
    background-image: url(../images/holes.jpg);
    z-index: 1;
    box-shadow: inset -3px 4px 3px rgba(0,0,0,0.6), -1px 1px 2px #FFF, 2px -2px 4px #000;
    cursor: pointer;
    outline: 6px solid rgba(0,0,0,0.2);
    filter: drop-shadow(1px -1px 1px #FFF) drop-shadow(3px -1px 1px rgba(0,0,0,0.1));
}
.slideScaleBar {
    width: calc(100% - 20px);
    background-color: var(--rcol);
    background: radial-gradient(rgba(102,204,221,0.8), rgba(0,102,255,0.8));
    box-shadow: inset -1px 5px 1px rgba(255,255,255,0.2), -3px 4px 5px rgba(0,0,0,0.1);
    height: 10px;
    border-radius: 10px;
    position: absolute;
    top: 10px;
    z-index: 9;
}
.slideScaleLeft:before, .slideScaleRight:before {
    content: attr(data-value);
    position: absolute;
    top: -40px;
    width: auto;
    height: 30px;
    margin-left: -20px;
    background-color: #FFE;
    border: 1px solid #333;
    border-radius: 5px;
    display: block;
    padding: 1px 5px 2px 5px;
    text-align: right;
    opacity: 0;
    transition: opacity ease-in 500ms;
    pointer-events: none;
}
/*
.slideScaleLeft:after, .slideScaleRight:after {
    content: '%';
    position: absolute;
    top: -38px;
    margin-left: 33px;
    display: block;
    z-index: 9999999;
	opacity:0;
	transition:opacity ease-in 500ms;
	pointer-events:none;
}*/
.slideScaleLeft:active:after,.slideScaleLeft:active:before,
.slideScaleRight:active:after, .slideScaleRight:active:before  {
	opacity:1;
}
.rgbviewer {
	widht:100%;
	height:50px;
	background-color:#FFF;
	border:1px solid #888;
	border-radius:5px;
	margin:15px 0;
	cursor:pointer;
}
.clothesItm {
    margin:15px 0 30px 0;
}
.sex {
    position: absolute;
    z-index: 99;
    right: 18px;
    top: 40px;
    width: 30px;
    height: 30px;
    object-fit: contain;
}
.clothesItm .clothimages {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
}
.clothesItm .clothimg {
    width: 98%;
    position: absolute;
    top: 26px;
    left: 0;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
	opacity: 0;
	transition: opacity 1000ms ease-in-out;
	pointer-events: none;
}
.clothesItm .clothimg.cur {
	opacity: 1;
	pointer-events: all;
}
.clothesItm .clothimg.cur:hover {
	transform: rotate(0deg) scale(1);
}
.clothesItm  h4 {
    margin: 38px 0 4px 0;	
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
}
.clothesItm button {
	width: 100%;
}
.priceTag {
    height: 36px;
    position: absolute;
    width: auto;
    padding: 6px;
    z-index: 99;
    background-color: #d9ce95;
    bottom: 86px;
    right: 8px;
    border-radius: 5px;
    transform: rotate(12deg);
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.4));
}
.priceTag:before {
    content: '';
    height: 27px;
    position: absolute;
    width: 27px;
    z-index: -1;
    background-color: #d9ce95;
    top: 4px;
    left: -9px;
    border-radius: 5px;
    transform: rotate(45deg);
    display: block;
}
.priceTag:after {
    content: '';
    height: 5px;
    position: absolute;
    width: 5px;
    background-color: #e3e3e3;
    border: 1px solid rgba(0,0,0,0.4);
    top: 15px;
    left: -6px;
    border-radius: 5px;
    transform: rotate(45deg);
    display: block;
}
.enlarger .tempDiv {
    position: absolute;
    top: 0;
    left: 15px;
    width: 100%;
    padding: 80px;
	height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
	background-color: #EEE;
	    padding-bottom: 0;
}
.productpopup {
	position:relative;
	background-color:#FFF;
	overflow-x:hidden;
	overflow-y:auto;
	display: none;
	padding: 14px;
	height:100%;
}
.productpopup .greyarticle {
	background-color: #444;
}

.productpopup article {
	    padding: 10%;
}
.productpopup .specheader:after {
    top: 16px;
}
.enlarger select, .enlarger input[type="number"], .enlarger input[type="text"]{
	height: 52px;
	padding-left:30px;
}
.enlarger .formInput{
	margin-bottom:20px;
}
.enlarger input[type="submit"]{
	margin: 15px 0;
    width: 100%;
    height: 60px;
}
.boardroomCalendar {	
	box-shadow: 0 5px 15px rgba(0,0,0,0.6), 0 5px 100px 15px rgba(0,0,0,0.4);
	border-radius: 11px 11px 10px 10px;
}
.boardroomCalendar .col-2 {
	border:1px solid #666;
	padding:0;
}
.boardroomCalendar .col-2 > div{
	border-top:1px solid rgba(0,0,0,0.8);
}

.boardroomCalendar .col-2 .th {
	background-color: var(--rcol);
    text-align: center;
    color: #FFF;
    text-align: center;
	padding:10px 0;
}

.boardroomCalendar.adminoffice .col-2 .th {
	background-color:var(--gcol);
}
 .boardroomCalendar .hour {
	padding:10px;
	height:45px;
}
.boardroomCalendar .brcell {
    padding: 3px 10px;
    height: 45px;
    line-height: 18px;
	cursor:cell;
	position: relative;
}
.boardroomCalendar .brcell.booked {
	background-color:var(--rcol);
	color:#FFF;
}
.boardroomCalendar.adminoffice .brcell.booked{
	background-color:var(--gcol);
}
.boardroomCalendar .brcell.booked:not(.startBooking), .boardroomCalendar .brcell.halfhour.booked:not(.startBooking), .boardroomCalendar .col-2 > div.th{
	border-top:none;
}
.boardroomCalendar .hour {
	background-color:var(--vlcol);
}
.boardroomCalendar .brcell:hover {
	background-color:var(--vlcol);
}
.startBooking {
	position:relative;
}
.brcell .hover {
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:250px;
	pointer-events:none;
	background-color:#EEE;
	padding:15px;
	border-radius:5px;
	box-shadow: -2px 5px 15px rgba(0,0,0,0.5);
	z-index:999;
	color:#666;
}

.boardroomCalendar .brcell.booked, .boardroomCalendar .brcell.booked:hover {
	background-color:var(--rcol);
	cursor:help;
}
.boardroomCalendar.adminoffice .brcell.booked, .boardroomCalendar.adminoffice .brcell.booked:hover {
	background-color:var(--gcol);
}


.boardroomCalendar .col-2 > div.halfhour {
	border-top:1px solid rgba(0,0,0,0.3);
}
.boardroomCalendar .col-2:first-child {
	border-radius: 11px 0 0 10px;
}
.boardroomCalendar .col-2:last-child {
	border-radius: 0 11px 10px 0;
}
.boardroomCalendar .col-2:first-child .th {
	border-radius: 9px 0 0 0;
}
.boardroomCalendar .col-2:last-child .th{
	border-radius: 0 9px 0 0;
}
.boardroomCalendar .col-2:last-child  .brcell:last-child {
	border-radius: 0 0 9px 0;
}
.boardroomCalendar .col-2:first-child  .brcell:last-child {
	border-radius: 0 0 0 9px;
}
.boardroomCalendar .brcell.cellSellected {
	background-color:var(--lcol);
}
.editbookings:hover{
	cursor:pointer !important;
	background: linear-gradient(var(--lcol), var(--rcol)) !important;
}

.boardroomCalendar.adminoffice .editbookings:hover{
	cursor:pointer !important;
	background: linear-gradient(var(--lgcol), var(--gcol)) !important;
}
.hiddendiv {
	display:none;
}
h1.productListMaster {
	text-align:center;
	text-align:center;
	position:relative;
	padding:0;
	border-bottom:none;
	margin:90px 0 0 0;
	z-index:999;
}
h1.productListMaster span {
    display: block;
	text-align:center;
	background: linear-gradient(transparent 0, #FFF 40%);
	text-align:center;
	position:relative;
	padding:50px;
	border-bottom:1px solid #EEE;
	z-index:2;
}
h1.productListMaster:before {
    content: '';
    width: 80%;
    left: 10%;
    height: 40px;
    border-radius: 0 0 100% 100%;
    background-color: #EEE;
    position: absolute;
    display: block;
    bottom: 15px;
    box-shadow: 0 14px 43px rgba(0,0,0,0.3);
    z-index: -1;
}
.priceListCats {
    border: 1px solid #EEE;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right center;
    position: relative;
    box-shadow: 0 0 123px rgba(0,0,0,0.4);
    width: 100%;
    margin-left: 0px;
}
.priceListCats .plcats {
	background: linear-gradient(rgba(var(--rgbcol),0.8), var(--rcol));
	backdrop-filter: blur(5px);	
	color:#FFF;
	cursor:pointer;
}
.priceListCats .plcats:hover {
	background: linear-gradient(rgba(var(--rgbcol),0.8), var(--dcol));
}
.priceListCats .plcats strong {
    margin: 20px 10px;
    display: block;
    text-align: center;
}
.priceListCats .col-sm-8 {
	background: linear-gradient(90deg, #FFF, rgba(255,255,255,0.9));
	backdrop-filter: blur(2px);		
	padding-bottom:40px;
}

.priceListCats .col-sm-8 .prs{
	padding:15px 5px;
	border-radius:5px;
}
.priceListCats .col-sm-8 .showhide {
	display:none;
}
.priceListCats .col-sm-8 .prs:hover {
	background-color:rgba(var(--rgbcol),0.4);
}
.priceListCats .col-sm-8 div span{
	float:right;
	text-align:
}
.putExternalHere {
    display: block;
    border: 1px solid #DDD;
    margin: 15px 0;
    border-radius: 10px;
    padding: 10px;
    border-top-color: #CCC;
    border-right-color: #CCC;
    border-left-color: #FFF;
    border-bottom-color: #FFF;
    box-shadow: inset -1px 2px 1px #FFF, inset 1px -2px 2px #DDD;
}
.stationeryPdfButton {
    position: fixed;
    top: 190px;
    background-color: #FFF;
    width: 50px;
    height: 50px;
    font-size: 38px;
    padding: 11px 0px;
    text-align: center;
    border-radius: 10px 0 0 10px;
    box-shadow: -9px 7px 12px rgba(0,0,0,0.4);
	cursor:pointer;
	right: 0;
	transition:all 1000ms ease-in-out;
	color:var(--rcol);
	z-index: 999999999999999;
}

.stationeryPdfButton[data-icon="icon-remove-sign"] {	
	right: 840px;
	color: #A00;
}

.stationeryPdfButton:hover {
    background-color: var(--dcol);
    color: #FFF;
}
.stationeryPdf {
    display: none;
    position: fixed;
    right: 0;
    top: 60px;
    max-width: 100%;
    width: 840px;
    height: calc(100% - 100px);
    z-index: 99999999999999;
    background: linear-gradient(0deg, rgb(119 119 119 / 70%), rgb(51 51 51 / 85%));
    color: #FFF;
    padding: 10px;
    border-radius: 10px 0 0 10px;
    box-shadow: -4px 12px 50px rgba(0,0,0,0.7), -4px 12px 18px rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
}
.pdfEmbedded {
    height: calc(100% - 38px);
    border-radius: 6px;
    border: 2px solid #000;
}
input[type="text"].putstationery {
    width: calc(100% - 160px);
}
.chkStationery {
    position: relative;
    padding: 10px;
    margin-left: 20px;
    cursor: pointer;
}
.chkStationery:hover {
    font-weight: bold;
    animation: shake 2000ms infinite linear;
}
.chkStationery:before {
    position: absolute;
    left: -20px;
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-color: #9cd933;
    transition: background-color 300ms ease;
    border-radius: 4px;
}
.chkStationery:hover:before {
    background-color: #900;
}
.chkStationery:after {
    position: absolute;
    left: -14px;
    top: 10px;
    content: '';
    display: block;
    width: 9px;
    height: 15px;
    border-bottom: 2px solid #FFF;
    border-right: 2px solid #FFF;
    transform: rotate(45deg);
}
.chkStationery:hover:after {
    position: absolute;
    left: -13px;
    top: 4px;
    content: '+';
    display: block;
    width: 9px;
    height: 15px;
    border-bottom: none;
    border-right: none;
    transform: rotate(45deg);
    color: #FFF;
    font-size: 28px;
    font-weight: normal;
}
.psf input[type="submit"]{
    translate: 0px -2px;
}
.putStationeryHere {
    margin: 22px 0 0 0;
    border: 1px solid #AAA;
    border-radius: 5px;
    padding: 0 10px;	
}
.putStationeryHere.empty:after {
	content:'Type an order above and add to list to place an order';
	text-align:center;
	display:block;
	    margin: 15px;
}
.sendStationery {
	margin-top:30px;
}

#driverSort > div {
	transition: padding-right ease 300ms;
	border-radius: 10px;
}
#driverSort > div:hover {
	box-shadow: 0 0 31px rgba(0,0,0,0.4);
}
.driverSort > div {
	
	padding-right:50px;
	position:relative;
}
.driverSort .handle {
    position: absolute;
    width: 40px;
    text-align: center;
    top: 13px;
    right: 5px;
    z-index: 999;
    cursor: move;
}
#driverSort {
	margin-top:50px;
}
.driverSort .handle:after {
	content:"≡";
    top: 0;
    right: 0;
	font-size:40px;	
}
.makeSort {
    position: absolute;
    right: 50px;
    margin-top: -43px;
    width: 40px;
    height: 40px;
    color: #999;
	cursor:pointer;
}
.makeSort:after {
    content: "≡";
    top: 0;
    right: 0;
    font-size: 50px;
}
#driverSort.driverSort .driverContainer {
	pointer-events:none;
}

.lastupdateddriver {
	position:absolute;
	width:1px;
	height:1px;
	overflow:hidden;
	opacity:0;
	pointer-events:none;
}
.driverContainer {
	height:auto;
	width:100%;
	position:relative;
	margin-bottom:15px;
	border-radius: 10px;
    transition: height 400ms ease;
    overflow: clip;
}
.driverContainer:not(.inactive) {
	box-shadow: 0 0 31px rgba(0,0,0,0.4);
}
.driverItem {
	border:1px solid var(--rcol);
	width:100%;
	min-height:300px;
	padding:10px 10px 16px 10px;
	position:relative;
	z-index:2;
	background-color:#EEE;
	transition:all ease 300ms;
	left:0;
	border-radius: 10px;
}
.driverContainer h3 {
    margin: -10px -10px;
    width: calc(100% + 20px);
    text-align: center;
    position: relative;
    padding: 15px;
	cursor:pointer;
}
.driverContainer.driverDone, .driverContainer.driverError, .driverContainer.inactive, #driverSort.driverSort .driverContainer {
    overflow: hidden;
    height: 60px;
    transition: height 400ms ease;
}
.driverContainer.driverDone .driverItem, .driverContainer.driverError .driverItem, .driverContainer.inactive .driverItem, #driverSort.driverSort .driverContainer .driverItem {
    overflow: hidden;
    max-height: 60px;
    min-height: 60px;
}
.driverContainer.inactive .driverItem {
    color: #DDD;
    background-color: #FFF;
	border:1px solid #DDD;
	border-radius: 10px;
}

.driverContainer.driverDone  .driverItem{
    color: #686;
    background-color: #CEC;
	border:1px solid #686;
}

.driverContainer.driverError .driverItem {
    color: #866;
    background-color: #ECC;
	border:1px solid #866;
}

.driverContainer.driverDone h3, .driverContainer.driverError h3  {
	pointer-events:none;
}

.driverContainer.inactive h3 {	
    color: #000;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    overflow: hidden;
    display: block;
}

.driverContainer.driverDone h3 {
    color: #686;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    overflow: hidden;
    display: block;
}

.driverContainer.driverError h3 {
    color: #866;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    overflow: hidden;
    display: block;
}
.driverItem.swipeleft {
	width:calc(100% - 80px);
}

.driverContainer.driverDone h3:before {
    content: url(../images/yes.png);
    position: absolute;
    transform: scale(0.5);
    top: -7px;
    left: -7px;
}
.driverContainer.driverError h3:before {
    content: url(../images/del.png);
    position: absolute;
    transform: scale(0.2);
    top: -31px;
    left: -32px;
}
.driverItem.swiperight {
	left: 80px;
	width:calc(100% - 80px);
}
.driverContainer .driverComplete {
	position:absolute;
	background-color:#CFC;
	height:100%;
	width:80px;
	z-index:1;
	top:0;
	left:0;	
    border-radius: 15px 0 0 15px;
}

 .driverContainer .driverComplete:active {	 
	background-color:#6C6;
}
 .driverContainer .driverCant:active {	 
	background-color:#C66;
}
.driverContainer .driverComplete:before {
    content: '';
    display: block;
    position: absolute;
    background-color: #390;
    height: 9px;
    width: 26px;
    top: 50%;
    left: 14px;
    border-radius: 5px 0 0 5px;
    transform: rotate(45deg);
}
.driverContainer .driverComplete:after {
    content: '';
    display: block;
    position: absolute;
    background-color: #390;
    height: 9px;
    width: 48px;
    top: calc(50% - 8px);
    left: 24px;
    border-radius: 0 5px 5px 0;
    transform: rotate(-45deg);
}
.driverContainer .driverCant {
	position:absolute;
	background-color:#FCC;
	height:100%;
	width:80px;
	z-index:1;
	top:0;
	right:0;
    border-radius: 0 15px 15px 0;
}

.driverContainer .driverCant:before {
    content: '';
    display: block;
    position: absolute;
    background-color: #930;
    height: 9px;
    width: 48px;
    top: calc(50% - 4px);
    left: 16px;
    border-radius: 5px;
    transform: rotate(45deg);
}
.driverContainer .driverCant:after {
    content: '';
    display: block;
    position: absolute;
    background-color: #930;
    height: 9px;
    width: 48px;
    top: calc(50% - 4px);
    left: 16px;
    border-radius: 5px;
    transform: rotate(-45deg);
}
.driverContainer.next h3 {
    color: #F90;
}
.driverContainer.next .driverItem {
    border: 1px solid #F90;
}
.driverContainer.currentDest h3 {
    color: #090;
}
.driverContainer.currentDest .driverItem {
    border: 1px solid #090;
}
.driverItem .thing {
	margin: 10px 5px 0 5px;
	padding: 5px;
	border: 1px solid var(--rcol);
	background-color:#FFF;	
    border-radius: 8px;
	overflow:hidden;
}
.driverItem .thing:first-of-type {
	margin: 20px 5px 0 5px;
}
.driverItem .thing input[type="checkbox"] {
	margin-right: 5px;
}
.driverItem .thing strong {
    display: inline-block;
    font-size: 18px;
	margin-right:5px;
}

.driverItem .thing a, .driverItem .thing .personImage,  .driverItem .thing .itemImage,  .driverItem .thing .itemFile {
	display: inline-block;
	background-color: var(--rcol);
	color:#FFF;
	padding:5px;
	border-radius:5px;
	cursor:pointer;
}
.driverItem .thing a:hover, .driverItem .thing .personImage:hover,  .driverItem .thing .itemImage:hover,  .driverItem .thing .itemFile:hover {
	text-decoration:none;
	background-color: var(--dcol);
}
.driverContainer.currentDest .driverItem .thing a, .driverContainer.currentDest .driverItem .thing .personImage, .driverContainer.currentDest .driverItem .thing .itemImage {
    background-color: #090;
}
.driverContainer.next .driverItem .thing a, .driverContainer.next .driverItem .thing .personImage, .driverContainer.next .driverItem .thing .itemImage {
    background-color: #F90;
}
.markactive {
    width: calc(100% - 10px);
    background-color: #666;
    color: #FFF;
    padding: 15px;
    text-align: center;
    border-radius: 5px;
    margin: 15px 5px;
}
.markactive:after {
    content: 'Set as current destination';
}
.driverContainer.currentDest .markactive {
    background-color: #090;
}
.driverContainer.currentDest .markactive:after {
    content: 'Current destination';
}
.marknext {
    width: calc(100% - 10px);
    background-color: #666;
    color: #FFF;
    padding: 15px;
    text-align: center;
    border-radius: 5px;
    margin: 15px 5px;
}
.marknext:after {
    content: 'Set as next destination';
}
.driverContainer.next .marknext:after {
    content: 'Next destination';
}
.driverContainer.next .marknext {
    background-color: #F90;
}
.ui-loader.ui-corner-all.ui-loader-default.ui-body-a h1.ui-loader-header {
	display:none;
}
.logos {
    padding: 5px;
    border: 1px solid #4787C6;
    box-shadow: 2px 2px 20px rgb(0 0 0 / 50%);
    max-width: 400px;
    max-height: 100px;
    display: inline-block;
    position: relative;
    border-radius: 10px;
    margin: 0 0 30px 100px;
    background-color: #FFF;
    width: calc(100% - 103px);
}
.logos img {
	width:100%;
	height:100%;
	object-fit:contain;
	object-position: center center;
}
.logos:after {
    display: block;
    content: '';
    position: absolute;
    width: 74px;
    height: 72px;
    background-image: url(../images/pdf-jpg-word-icons.png?v=3);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: 0px bottom;
    pointer-events: none;
    z-index: 9;
    top: 10px;
    left: -75px;
    filter: drop-shadow(2px 4px 6px black);
}
.logos span {
    display: block;
    content: '';
    position: absolute;
    background-color: rgba(0,0,0,0.7);
    color: #FFF;
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: 8;
    text-align: center;
    font-size: 16px;
    line-height: 47px;
    top: 0;
    left: 0;
    border-radius: 10px;
	transition:opacity ease 300ms;
}
.logos:hover span {
	opacity:1;
}

.logoPdf.logos:after {
    background-position: 0px 0px;
}
.logoJpg.logos:after {
    background-position: -72px 0px;
}
.logoWord.logos:after {
    background-position: -143px 0px;
}
.logoXls.logos:after {
    background-position: -218px 0px;
}
.logoPng.logos:after {
    background-position: -299px 0px;
}
.logoCdr.logos:after {
    background-position: -367px 0px;
}
.logoDxf.logos:after {
    background-position: -438px 0px;
}

.CardExample {
	margin-top:50px;
	opacity:0;
	text-align: left;
	transition:opacity 600ms ease;
}
.showcards {
	opacity:1;
}
.CardExample img{ 
	z-index:2;
	position:relative;
}
.frontCardExample {
    width: 495px;
    border: 1px solid #AAA;
    float: left;
    margin: 0 30px 30px 0;
    font-family: 'Segoe UI';
    font-size: 11.9px;
    color: #777;
    position: relative;
    font-weight: 500;
}
.backCardExample {
	width:495px;
	border:1px solid #AAA;
	float:left;
}
.nameTitle {
    position: absolute;
    top: 109px;
    left: 29px;
    z-index: 9;
}

.telNumberEmail {
    position: absolute;
    top: 109px;
    right: 27px;
    z-index: 9;
}
.telNumberEmail div {
	float:left;
}
.nameTitle span.bcTitle {
}
.nameTitle b {
	font-size: 18px;
}
.cardGroup {
    position: absolute;
    top: 24px;
    right: 27px;
    z-index: 9;
    text-align: right;
    width: 200px;
    line-height: 15px;
}
.cardGroup span {
	font-size:10px;
	font-style:italic;
}
.cardAdd {
    position: absolute;
    bottom: 25px;
    right: 27px;
    z-index: 9;
    text-align: right;
    line-height: 15px;
}
form .formInput input[type="number"].marketingsize {
    width: 60%;
    height: 80px;
    font-size: 50px;
    font-family: LED;
    text-align: center;
    box-shadow: none;
    border: none;
    background-color: transparent;
}

.formInput .upArrow, .formInput .downArrow {
    width: 20%;
    height: 40px;
    background-color: #777;
    position: absolute;
    right: 0;
    border-radius: 5px;
    cursor: pointer;
    background: linear-gradient(0deg, #DDD, #FFF);
    box-shadow: -3px 3px 4px #FFF, -3px 3px 6px #FFF, 2px -2px 3px rgba(0, 0, 0, 0.2), -4px 4px 20px rgba(0, 0, 0, 0.2);
}

.formInput .upArrow:hover, .formInput .downArrow:hover {
    background: linear-gradient(0deg, #CCCECF, #FFF);
}
.formInput .upArrow:active, .formInput .downArrow:active {
    background: linear-gradient(0deg, #EEE, #AAA);
}

.formInput .upArrow:after, .formInput .downArrow:after {
    content: '';
    display: block;
    border-bottom: 7px solid #333;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    position: absolute;
    top: 50%;
    margin-top: -4px;
    left: 50%;
    margin-left: -7px;
}
.formInput .upArrow {
	top:15px;
}

.formInput .downArrow {
	bottom:22px;
}
.formInput .downArrow:after {
	transform:rotate(180deg);
}
/* Hide arrows in WebKit browsers (Chrome, Safari) */
input[type="number"].marketingsize::-webkit-outer-spin-button,
input[type="number"].marketingsize::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide arrows in Firefox */
input[type="number"].marketingsize {
    -moz-appearance: textfield;
}
form .formInput  input[type="number"].marketingsize:nth-of-type(2) {
	margin-left:2%;
}
form .formInput input[type="number"].marketingsize + span {
    position: absolute;
    margin-top: 4px;
    margin-left: -28px;
    color: #4787C6;
    font-weight: bold;
    font-size: 12px;
}
.ifother {
    display: none;
	margin: 5px 0 15px 0;
}
.articlebox h5, .nicEdit-main h5 {
    width: 100%;
    display: block;
    font-weight: bold;
    font-size: 24px;
    text-align: inherit;
    border-bottom: none;
    font-family: 'Segoe UI';
    padding: 15px 0;
}
.articlebox h6, .nicEdit-main h6 {
    width: 100%;
    display: block;
    font-weight: bold;
    font-size: 19px;
    text-align: inherit;
    border-bottom: none;
    font-family: 'Segoe UI';
    margin-bottom: 0;
    padding: 10px 0;
}
.articlebox h6:after, .nicEdit-main h6:after {
	display:none;
}
.statsOnFilter {
    display: block;
    border: 1px solid #DDD;
    margin: 15px 0;
    border-radius: 10px;
    padding: 10px;
    border-top-color: #CCC;
    border-right-color: #CCC;
    border-left-color: #FFF;
    border-bottom-color: #FFF;
    box-shadow: inset -1px 2px 1px #FFF, inset 1px -2px 2px #DDD;
	background-color: rgb(255 255 255 / 58%);
	padding-bottom:25px;
}
.statsOnFilter h6 {
    font-family: 'Segoe UI';
    font-size: 26px;
    display: block;
    text-align: center;
    margin: 10px 0 7px 0;
    padding-bottom: 10px;
    position: relative;
    font-weight: bold;
}
.statsOnFilter h6:after {
    width: 100%;
    left: 0;
    bottom: 7px;
    content: '';
    border-bottom: 1px solid #FFF;
    display: block;
    position: absolute;
    box-shadow: 1px -1px 1px rgba(0,0,0,0.2);
}
.statsOnFilter h5 {
    color: #AAA;
    padding: 15px 0 2px 0;
}
.statsOnFilter div {
	display:inline-block;
	padding: 3px;
}
.statsOnFilter > div:nth-of-type(odd) {
	width:70%;
	border-radius:3px 0 0 3px;
}
.statsOnFilter > div:nth-of-type(odd):hover, .statsOnFilter > div:nth-of-type(odd):hover + div {
	background-color:var(--lcol2);
}
.statsOnFilter > div:nth-of-type(even) {
    width: 30%;
    padding-right: 24px;
    text-align: right;
    position: relative;
	border-radius:0 3px 3px 0;
}
.statsOnFilter div[data-icon^="icon-"] {
	margin-top: -4px;
}
.statsOnFilter a {
    position: absolute;
    right: 0px;
}
.bannerad {
    border-radius: 7px;
    width: 100%;
}
.changetobrochure {
    margin: 30px 0;
    border: 1px solid #4787C6;
    padding: 15px 0;
    width: 100%;
	opacity:1;
	transition: all 300ms ease;
	border-radius:5px;
}

.changetobrochure:empty {
    border: none;
    padding: 0;
    margin: 0;
	opacity:0;
	transition: all 300ms ease;
}
.conTable {
	box-shadow:5px 5px 15px rgba(0,0,0,0.1);
	border-radius:5px;
	border:1px solid rgba(0,0,0,0.2);
	overflow:hidden;
}
.conTable tr td {
    background-color: #e6eeff;
    line-height: 26px;
    padding: 0 15px;
	border-right:1px solid rgba(0,0,0,0.2);
	position:relative;
	color:#999;
}
.conTable tr:nth-of-type(even) td {
    background-color: #eff5ff;
}

.conTable tr th {
    background-color: #AAA;
	color:#000;
    line-height: 26px;
    padding: 0 15px;
	border-right:1px solid #FFF;
	text-align:center;
}
.conTable tr th:last-of-type, .conTable tr td:last-of-type {
    border-right: none;
}
.conTable tr th.conCatrow {
    background-color: var(--rcol);
	color:#FFF;
}
.conTable tr td.conSubCatrow {
    background-color: #FFF;
	color:#333;
	font-weight:bold;
}
.orderConButton {
	width: 25px;
	height:25px;
	background-image:url(../images/order.png);
	background-size:contain;
	background-repeat:no-repeat;
	position:relative;
	margin:1px auto 0 auto;
	opacity:0.4;
	cursor:pointer;
}
.orderConButton:hover {
	opacity:1;
	filter:saturate(2.4);
}

.conTable tr:hover td {
	filter:saturate(2.4);
	color:#000;
}


.consumableTable tr td{
	background-color: #e6eeff;
	line-height:26px;
	border-right:1px solid rgba(0,0,0,0.1);
	padding:0 15px;
}
.consumableTable tr:nth-of-type(even) td {
    background-color: #eff5ff;
}

.consumableTable tr:hover td {
	background-color: #ccdcff !important;
}

.consumableTable tr td input[type="button"] {
    background-color: #AAA;
    background: linear-gradient(0deg, #AAA, #DDD);
    color: #000;
    width: 100%;
    max-width: 100%;
    height: 20px;
    line-height: 13px;
    box-shadow: inset -2px -2px 2px rgb(0 0 0 / 10%), inset 2px 2px 2px rgb(255 255 255 / 50%), 0 0 3px rgb(0 0 0 / 50%);
    color: #000;
    text-shadow: -1px -1px 2px rgb(0 0 0 / 50%), 1px 1px 2px rgb(255 255 255 / 80%);
	opacity:0.3;
}
.consumableTable tr td input[type="button"]:hover {
    background-color: #4787C6;
    background: linear-gradient(0deg, #888, #AAA);
    color: #000;
    width: 100%;
    max-width: 100%;
    height: 20px;
    line-height: 13px;
    box-shadow: inset -2px -2px 2px rgb(0 0 0 / 10%), inset 2px 2px 2px rgb(255 255 255 / 50%), 0 0 3px rgb(0 0 0 / 50%);
    color: #FFF;
    text-shadow: -1px -1px 2px rgb(0 0 0 / 50%), 1px 1px 2px rgb(255 255 255 / 80%);
	opacity:1;
}
.consumableTable tr td input[type="button"]:active {
    background-color: #4787C6;
    background: linear-gradient(0deg, #AAA, #888);
    color: #000;
    width: 100%;
    max-width: 100%;
    height: 20px;
    line-height: 13px;
    box-shadow: inset 2px 2px 2px rgb(0 0 0 / 10%), inset -2px -2px 2px rgb(255 255 255 / 50%), 0 0 3px rgb(255 255 255 / 50%);
    color: #FFF;
    text-shadow: none;
	opacity:1;
}
.consumableTable tr td.conCat {
	text-align:center;
	background-color:#4787C6 !important;
	font-weight:bold;
	color:#FFF;
}
.consumableTable tr td.subconCat {
	background-color:#FFF !important;
	font-weight:bold;
	padding-left: 8px;
}
.popupWindowIntra  {
    position: fixed;
    display: none;
    width: 360px;
    height: auto;
    top: 20%;
    left: 50%;
    margin-left: -130px;
    background-color: #EEE;
    border: 1px solid #FFF;
	border-radius:5px;
    box-shadow: 0 0 0 3000px rgba(0,0,0,0.5), 0 0 30px rgba(0,0,0,0.5);
	z-index: 99999;
	padding: 25px;
}

.popupWindowIntra:before {
    content: '';
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.1);
    left: 0;
    top: 0;
    z-index: -1;
    backdrop-filter: blur(8px);
}
.reqConsumables.popupWindowIntra .closer{
    right: 50%;
    margin-right: -280px;
    top: 20%;
    margin-top: -40px;
    transform: scale(0.5);
}

.productsPopup {
	width:80%;
	height:80%;
	top:10%;
	left:10%;
	margin:0 !important;
	transform:scale(1);
}
.popupWindowIntra input[type="button"] {
    margin: 10px auto;
    display: block;
    width: 100%;
    min-width: 100%;
	max-width: 100%;
}
.popupWindowIntra .contain input[type="number"] {
    position: relative;
    margin: 0 auto 34px auto;
    width: 100%;
    height: 60px;
    display: block;
    font-size: 43px;
    padding: 6px 0 6px 6px;
    text-align: right;
}
.reqConsumables h2 {
    font-size: 14px;
    margin: 4% 0;
    width: 100%;
	color:var(--rcol);
	border-bottom:2px solid var(--rcol);
}
.imgQuickDownloader {
    width: auto;
    background-color: #DDD;
    right: 0;
    position: absolute;
    border-radius: 4px;
	cursor:default;
	white-space: nowrap;
	padding:5px
}
.imgQuickDownloader a, .imgQuickDownloader div {
    display: inline-block;
    padding: 5px;
    background-color: var(--rcol);
    color: #FFF;
    border-radius: 5px;
    margin: 5px;
	cursor:pointer;
}
.imgQuickDownloader a:hover, .imgQuickDownloader div:hover {
    background-color: var(--dcol);
}
.permissionList {
	cursor:pointer;
}
.permissionList > div {
    position: absolute;
    display: none;
    background-color: #EEE;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
    margin-left: 105px;
    width: 240px;
    padding: 15px;
    z-index: 9999999;
    top: -3px;
}
.permissionList > div .closer {
    transform: scale(0.5);
    position: absolute;
    top: -16px;
    right: -16px;
}
.permissionList.hover {
	font-weight:bold;
	color:var(--rcol);
}
.permissionList:hover, .permissionList.hover:hover {
	color:#000;
}
.permissionList.hover > div {
	display:block;
}
select.quoteStatus {
    background: none;
    width: auto;
    border: none;
}
.showidnumber {
    position: absolute;
    top: 22px;
    left: 0;
    color: #F5F5F5;
    font-size: 75px;
    z-index: -1;
}
.showserials {
    cursor: pointer;
    text-align: center;
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid var(--rcol);
}
.sideMenu .saveSerials div.formInput {
	padding-top:0;
}
.showserials:hover {
	color:var(--rcol);
}
.saveSerials {
	display:none;
	background-color:#FFF;
	padding:6px 10px 10px 10px;
	border-radius:10px;
	margin-top: 16px;
	box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

.saveSerials input, .saveSerials select {
	margin-top:5px;
}
.prodpriceform {
	position:relative;
}
.prodpriceform .clearfix {
	clear:both;
}
.settingDropdown .prodpriceform .formInput h4 {
	margin-bottom:9px !important;
}
.sideMenu .prodpriceform input[type="checkbox"], .sideMenu .prodpriceform input[name="special"] + label {
    position: absolute;
    right: 3px;
    top: 21px;
    width: 34px;
    left: unset;
}

   
.sideMenu .prodpriceform input[type="checkbox"].isPercent {
	display:none;
}
.sideMenu .prodpriceform input[type="checkbox"].isPercent + label {
    margin-right: 47px;
    top: -74px;
    color: #1a8700;
    position: relative;
    width: 20px;
    display: block;
    float: right;
    z-index: 31;
    cursor: pointer;
	font-size:20px;
	overflow: visible;
	font-weight:bold;
}

.sideMenu .prodpriceform input[type="checkbox"].isPercent + label:before {
    content: 'R';
}
.sideMenu .prodpriceform input[type="checkbox"].isPercent:checked + label:before {
    content: '%';
}
.sideMenu .prodpriceform input[type="checkbox"].isPercent:checked + label {
	color:#009;
}
.sideMenu .prodpriceform input[type="checkbox"].isPercent + label:hover {
	color:var(--lcol);
}
 .sideMenu .prodpriceform input[type="checkbox"].isPercent:checked + label:hover {
	color:var(--rcol);
}
.sideMenu .prodpriceform input[type="checkbox"].isPercent:checked + label:after {
    position: absolute;
    content: '%';
    display: inline-block;
    top: 40px;
    right: -16px;
    font-size: 16px;
    z-index: 99999999999999;
	color:#999;
	font-weight:normal;
}
em.instructions {
    margin-top: 15px;
    font-size: 12px;
    color: #999;
    display: block;
    line-height: 1;
}
.deleteSecondImage {
    position: absolute;
    z-index: 99;
	width:30px;
	height:30px;
    top: 34px;
    right: 7px;
    filter: drop-shadow(-3px 2px 4px rgba(0,0,0,0.7));
}
.footnav {
    background-color: var(--rcol);
}
.footnav a {
    width: 24%;
    height: 0;
    margin: auto;
    position: relative;
    padding-bottom: 23%;
    display: inline-block;
    background-size: 35%;
    margin-bottom: 3%;
    filter: saturate(0) brightness(8);
	perspective: 200px;
    transition: all ease 1000ms;
}
.footnav a img {
    width: auto;
    margin-left: 27%;
    height: 35%;
    position: absolute;
    display: block;
    transition: all ease 1000ms;
    bottom: 30%;
    transform-style: preserve-3d;
}
.footnav a span {
    position: absolute;
    bottom: 10%;
    text-align: center;
    display: block;
    width: 100%;
    margin-left: -15px;
    font-family: 'Impact';
    font-size: 2em;
	color:#444;
}
.footnav a:focus {
	outline:none;
}
.footnav a:hover img, .footnav a:focus img {
	transform: rotateY(180deg);
}
.footnav.flipColour a, .footnav a:hover , .footnav a:focus {
	filter:saturate(0) brightness(1);
}
.footnav.flipColour a:hover, .footnav.flipColour a:focus {
	filter:saturate(0) brightness(10);
}
.phitsyear {
    display: inline-block;
    position: absolute;
    width: 69px;
    height: 25px;
    padding: 0 4px;
    margin-left: 10px;
}
.specialsMenu {
	background:linear-gradient(225deg, rgb(255 226 166), rgb(255 176 252),             
  rgb(199 242 255)) 0% 0% / 300% 300%;
  background-size: 200% auto;
  -webkit-animation: gradient_move 3s ease infinite;
          animation: gradient_move 3s ease infinite;
}

.menuMaster.specialsMenu:hover {
	background:linear-gradient(225deg, rgb(251, 175, 21), rgb(251, 21, 242),             
  rgb(21, 198, 251)) 0% 0% / 300% 300%;
  background-size: 200% auto;
  -webkit-animation: gradient_move 3s ease infinite;
          animation: gradient_move 3s ease infinite;
}
.rainbotext {
  font-family:"IMPACT", sans-serif;  
	background:linear-gradient(225deg, rgb(251, 175, 21), rgb(251, 21, 242),             
  rgb(21, 198, 251)) 0% 0% / 300% 300%;
  background-size: 200% 200%;
  animation: gradient_move 3s ease-in-out infinite;
  background-clip: text;
  -webkit-background-clip:text;
  color:transparent;
  width:100%;
  display:block;
  text-align:center;
  transition: color .2s ease-in-out;
  text-transform:uppercase;
  font-weight:900;
  border-bottom:none;
}
.specailHeading {
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 66px;
    background-color: var(--rcol);
    color: #FFF;
    font-weight: bold;
    border-radius: 30px 30px 0 0;
    text-shadow: 0 0 5px rgba(0,0,0,0.7);
}
.specailBox {
    background-color: #f2f2f2;
	border: 1px solid #d4dce2;
	padding:20px 15px 15px 15px;
    border-radius: 0 0 30px 30px;
	display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 3fr)); /* Adjust minmax and column count */
    grid-gap: 20px; /* Adjust gap between items */
	margin-bottom: 50px;
}
.specials {
    text-align: left;
	position:relative;
	padding-bottom: 15px;
}
.specials .sptext {
	padding:10px;
}
.specials a {
	color: #999;
}
.specials a:hover {
	text-decoration:none;
}
.specials a:hover h4 {
	color: var(--rcol);
}

.specials img.specialimg {
    border: 1px solid #d4dce2;
	background-color: #ffffff;
	width: 100%;
	height: 60%;
    padding-top: 10%;
	display:block;
	object-fit:contain;
    border-radius: 20px;
	transition:all ease 300ms;
}
.specials:hover img.specialimg {
    padding-bottom: 10%;
    padding-top: 0%;
	box-shadow:0 0 35px rgba(0,0,0,0.6);
}
.specials strong {
	color:#333;
}
.specials small {
	text-decoration:line-through;
}
.specialscontainer {
	display:block;
	background:linear-gradient(225deg, rgb(166 221 255), rgb(207 224 233),             
  rgb(199 221 255)) 0% 0% / 300% 300%;
  background-size: 200% auto;
  position: relative;
  width: 100%;
  height: 100px;
  text-align:left;
  overflow: hidden;
   border-radius: 30px;
   margin-bottom:50px;
}

.specialscontainer:hover {
	background:linear-gradient(225deg, rgb(101 136 173), rgb(63 159 215),             
  rgb(146 183 211)) 0% 0% / 300% 300%;
  -webkit-animation: gradient_move 3s ease infinite;
          animation: gradient_move 3s ease infinite;
}
.specialscontainer span {
    color: #FFF;
    position: absolute;
    display: block;
    text-align: center;
    width: 100%;
    height: 100%;
    font-size: 64px;
    line-height: 96px;
    text-shadow: 0 0 15px rgba(0,0,0,0.4);
    font-family: 'IMPACT';
	    z-index: 9;
}
.flying-image {
	position: absolute;
	width: 50px;
	height: 50px;
	object-fit:contain;
	transition:transform 10s linear;
	background-color:#FFF;
	mix-blend-mode: multiply;
}
.specialsavebanner {
    position: absolute;
    top: 0;
    right: 20px;
    background-color: #4787C6;
    border-radius: 0 0 10px 10px;
    color: #FFF;
    font-weight: bold;
    text-align: center;
    padding: 4px;
    width: 45px;
    height: 45px;
    line-height: 18px;
}
.specials .addtocart {
    height: 30px;
    width: 30px;
    border-radius: 15px;
    position: absolute;
    bottom: 47px;
    right: 0;
    font-size: 33px;
}
.specials .addtocart:focus, .specials .addtocart:active {
	outline:none;
}
.specials .addtocart span {
    position: relative;
    transform: translate(-1px,-6px);
    display: block;
}
.scrollITimg {
    width: 200px;
    height: 200px;
    object-fit: cover;
    object-position: 0 200px;
    display: inline-block;	
    position: sticky;
    top: 60px;
    margin: 0 auto;
    display: block;
    transition: object-position 200ms ease;
    background-image: url(../images/itsupport.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.scrollITimg.choosing {
    background-image: none;
}
.ITissue {
    display: inline-block;
	width: 100%;
    margin-top: 61px;
    background: linear-gradient(#FFF, var(--lgrey));
    border-radius: 10px;
    cursor: pointer;
    height: 62px;
    font-size: 28px;
    text-align: center;
    line-height: 62px;
    box-shadow: -2px 6px 15px rgba(0,0,0,0.4);
    position: relative;
    transition: all 300ms ease;
    z-index: 2;
}
.ITissue:hover {
    box-shadow: 0px 0px 15px rgba(0,0,0,0.8);
	color:var(--rcol);
}
.ITissueDetails{
    margin-top: 20px;
}
.ITissue:after {
	content:'';
	display:block;
	position:absolute;
	top:30px;
	right:10px;
	border-top:10px solid #AAA;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	transition:all ease 300ms;
}

.ITissue:hover:after {
	border-top:10px solid #666;
}

.ITissue.clicked:after {
	transform:rotate(180deg);
	top: 25px;
}
.ITissue.clicked {	
    border-radius: 10px 10px 0 0;
}
.ITissueDropdown {
    display: none;
    box-shadow: 0px 22px 35px rgba(0,0,0,0.8);
    background-color: #ffffff;
    border-radius: 0 0 15px 15px;
    position: relative;
    width: 100%;
    z-index: 3;
}
.ITissueDropdown ul {
	list-style-type: none;
	padding:15px;
}
.ITissueDropdown li {
	cursor:pointer;
    padding: 10px;
	transition:all ease 100ms;	
    border-radius: 5px;
}
.ITissueDropdown li.selected {
    list-style-type: disclosure-closed;
    margin-left: 14px;
    color: var(--rcol);
}
.ITissueDropdown li:hover {
	background-color:var(--rcol);
	color:#FFF;
}
.moreITinfo {
    display: none;
    border: 1px solid var(--rcol);
    border-radius: 5px;
    padding: 15px;
	white-space: nowrap;
}
div.moreMarketingInfo {
    display: block;
    padding: 15px;
}
.urgency {
    display: inline-block;
    width: 33%;
    margin: 0 0 10px 0;
    position: relative;
    height: fit-content;
}
.urgency input[type="radio"] {
	display:none;
}
.urgency input[type="radio"] + label {
    display: block;
    text-align: center;
    padding: 15px;
    border: 1px solid rgba(0,0,0,0.1);
    cursor: pointer;
    margin: 0;	
    width: 100%;
	font-size: 16px;
	color:#666;
}
.urgency[data-urgency="not"] input[type="radio"] + label {
	background-color:#D3F3D1;
	border-radius: 10px 2px 2px 10px;
}
.urgency[data-urgency="somewhat"] input[type="radio"] + label {
	background-color:#FFF4BB;
	border-radius: 2px;
}
.urgency[data-urgency="very"] input[type="radio"] + label {
	background-color:#ffefef;
	border-radius: 2px 10px 10px 2px;
}

.urgency input[type="radio"]:checked + label {
	font-weight:bold;
}

.urgency[data-urgency="not"] input[type="radio"]:checked + label {
	background-color: #090;
	color:#FFF;
}
.urgency[data-urgency="somewhat"] input[type="radio"]:checked + label {
	background-color:#FC0;
	color:#000;
}
.urgency[data-urgency="very"] input[type="radio"]:checked + label {
	background-color:#A00;
	color:#FFF;
}
.moreITinfo div.formInput {
    margin-top: 15px;
}
.itform input[type="submit"] {
    position: absolute;
    bottom: 0;
    width: calc(100% - 15px);
	transition:all ease 300ms;
	z-index: 9;
}
.itform input[type="submit"].disabled {
	opacity:0;
}
.settingsNotice {
    border: 1px solid #CCC;
    margin: 10px 0;
    padding: 0 10px 13px 10px;
    border-radius: 10px;
}
.settingsNotice.requestIssued {
    border: 1px solid #aaa;
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
}
.settingsNotice.deleting {
	animation: shake 1s infinite ease;
}

.settingsNotice.hidefromit {
	display:none;
}

.settingsNotice.hidefromit.requestIssued {
	display:block;
}

.settingsNotice h4 {
    display: inline-block;
    width: calc(100% - 60px);
    color: #666;
    position: relative;
    margin: 12px 0 0px 10px;
    padding-bottom: 30px;
    font-size: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    border-bottom: none;
}

.settingsNotice:hover h4  {
    color: #333;
}
 .settingsNotice.requestIssued h4  {
    color: var(--dcol);
}

.settingsNotice.requestIssued:hover h4  {
    color: var(--rcol);
}

.settingsNotice.requestComplete  {
    color: #AAA;
}
.settingsNotice.requestComplete h4  {
    color: #AAA;
}
.settingsNotice.requestComplete h4 :after {
    content: '\2713';
    margin-left: 15px;
    color: #090;
}

.settingsNotice.requestComplete img.settingsPerson  {
   border: 2px solid #AAA;
   opacity:0.4;
}
.openSettings .settingsNotice.requestComplete div.settingurgency[data-urgency]  {
   background-color: #AAA;
}

.settingsNotice h4:after {
	content:'';
	display:block;
	width:100%;
	position:absolute;
	bottom:20px;
	border-bottom:1px solid #AAA;
}
.settingsNotice h4 small {
    margin-bottom: -25px;
    position: relative;
    display: block;
    color: #999;
}
.settingsPerson {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50px;
    border: 2px solid var(--rcol);
    display: inline-block;
	position: relative;
    translate: 0 -20px;
}
.adminDetails {
	display:none;
}
.showhideAdminDetails{
    position: relative;
    height: 20px;
    width: calc(100% + 0px);
    background-color: #DDD;
    border-radius: 5px;
    cursor: pointer;
    transition: all 300ms ease;
    border: 1px solid #CCC;
    border-top: none;
    margin-top: -2px;
}
.showhideAdminDetails:hover {
    background-color: #FFF;
    background: linear-gradient(#EEE, #FFF);
    box-shadow: 0 2px 2px rgba(0,0,0,0.3);
}
.showhideAdminDetails:after {
    display: block;
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    height: 10px;
    width: 10px;
    margin: -8px 0 0 -8px;
    border-left: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(-45deg);
    transition: all ease 300ms;
}
.showhideAdminDetails.opened:after {
    transform: rotate(135deg);
    margin: -2px 0 0 -8px;
}
.settingurgency {
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    background-color: var(--rcol);
    color: #FFF;
    width: calc(100% + 20px);
    margin-left: -10px;
    border-radius: 9px 9px 0 0;
    font-size: 11px;
    height: 17px;
    line-height: 16px;
	transition:all 300ms ease;
}
.settingsNotice.requestIssued .settingurgency {
    background-color: #d11111;
}

.settingsNotice.requestIssued .settingurgency[data-urgency="Somewhat urgent"] {
    background-color: #f3b300;
}

.settingsNotice.requestIssued .settingurgency[data-urgency="Not urgent"] {
    background-color: #09b309;
}

.contents.bigger .settingurgency {
	font-size: 15px;
    height: 30px;
    line-height: 30px;
}
.sideMenu input[type="checkbox"].status-radio {
	display:none;
}
.statusBox {
	display:inline-block;
	width:32%;
}
input[type="checkbox"].status-radio + label {
    display: block;
    width: calc(100% - 5px);
    padding: 5px;
    text-align: center;
    background-color: #DDD;
    margin: 0 0 9px 0;
    border-radius: 5px;
}
input[type="checkbox"].status-radio + label:hover {
    background-color: #FDFDFF;
}
input[type="checkbox"].status-radio:checked + label {
    background-color: var(--rcol);
	color:#FFF;
}
.surveyicon {
	margin:-35px auto 50px auto;
	display: block;
	clear:both;
}

.surveytext {
	text-align:center;
}

.survey input[type="radio"], .survey input[type="radio"] + label {
    cursor: pointer;
    height: 20px;
    min-width: 32px;
    line-height: 20px;
    position: relative;
}
.chooseOption input[type="radio"], .chooseOption input[type="radio"] + label {
	transition:all ease 300ms;
}
.chooseOption input[type="radio"] + label {
	font-size:18px;
    top: -4px;
}
.chooseOption:hover input[type="radio"] {
	filter:drop-shadow(0 0 2px rgba(0,50,200,0.4));
}
.chooseOption:hover input[type="radio"] + label {
	color:#999;
}
.question {
    position: relative;
    margin-bottom: 70px;
    margin-top: 70px;
    clear: both;
    background-color: #FAFAFA;
    padding: 40px;
    border-radius: 5px;
    border: 1px solid #EEE;
	box-shadow: 0 0 23px rgb(0 0 0 / 10%);
}
.textq {
	position:relative;
	width:100%;
	padding-left:20px;
}
.question h3 {
    margin: 30px 0 80px 0;
    border-bottom: 2px solid #4787C6;
    border-top: 2px solid #4787C6;
    position: relative;
    font-size: 2em;
    text-align: center;
	padding: 5px 5px 5px 34px;
}
.question span.nubr {
    display: inline-block;
    background-color: #4787C6;
    color: #FFF;
    text-align: center;
    border-radius: 40px;
    height: 30px;
    width: 30px;
    line-height: 26px;
    position: absolute;
    left: 0;
    top: 4px;
    font-size: 20px;
    text-shadow: none;
}
.question input[type="text"] {
    background-color: #EEE;
    transition: all 300ms ease;
    border: none;
    border-bottom: 1px solid #999;
    width: calc(100% - 15px);
    margin: 0 0 0 15px;
    border-radius: 5px 5px 0 0;
    height: 55px;
}

.question input[type="text"]:hover {
	background-color:#FFF;
}

.question input[type="text"]:focus {
	background-color:#FFF;
    border-radius: 0 10px 10px 0;
	outline:none;
	box-shadow:0 0 15px rgba(0,0,0,0.4);	
}

.question img.texttypeimg {
    display: block;
    position: absolute;
    width: 36px;
    height: 55px;
    object-fit: contain;
    left: 0;
    bottom: 0;
    padding: 4px;
    background-color: #E6E6E6;
    border-bottom: 1px solid #999;
    border-radius: 5px 0 0 5px;
    border-right: 1px solid #FFF;
    border-left: 1px solid #CCC;
}
.radiostar {
  display: inline-flex;
  flex-direction: row-reverse;
    width: 9%;
    position: relative;
	text-align:center;
	height: 40px;
}
.radiostar input[type="radio"] {
	display:none;
}
.radiostar:before {
    content: attr(data-tag);
    position: absolute;
    top: -35px;
    left: calc(50% - 4px);
    display: block;
    color: #CCC;
}
.textq:before {
    content: attr(data-tag);
    position: absolute;
    top: -35px;
    left: 0;
	text-align:left;
    display: block;
    color: #CCC;
}
.radiostar input[type="radio"] + label {
	max-height:100%;
	max-width:88%;
    height: 50px;
    width: 50px;
	margin:0 auto;
	background-image:url(../images/star_grey.png);
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center center;
	transition:all 300ms ease;
}
.radiostar input[type="radio"] + label:hover, .radiostar input[type="radio"]:checked + label, .rated .radiostar input[type="radio"] + label{
	background-image:url(../images/star.png);
}
.radiostar.starchecked:before {
    color: #000;
}
.rated .radiostar.starchecked ~ .radiostar input[type="radio"] + label {	
	background-image:url(../images/star_grey.png);
}
.rated .radiostar.starchecked ~ .radiostar input[type="radio"] + label:hover {	
	background-image:url(../images/star.png);
}
.survey .captchaSpin {
	width:50% !important;
	float:left;
}
.survey input[type="submit"] {
    float: right;
    width: 50%;
    max-width: 50%;
}

.survey select {
    width: 100%;
    max-width: 100%;
    height: 64px;
	font-size:18px;
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E), linear-gradient(to bottom, rgba(225, 235, 255, 1) 0%,rgba(225, 235, 255, 1) 100%);
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
	transition:all 300ms ease;
}

.survey select:hover {
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E), linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%,rgba(255, 255, 255, 1) 100%);
	
    background-position: right .7em top 60%, 0 0;
}

.survey select optgroup {
	color:#2565a4;
	padding:20px;
	background-color:#F8FAFF;
}
.survey select optgroup:nth-of-type(even) {
	color:#666;
	background-color:#FFF;
}

.textq.bool{
	padding:0;
}
.bool input[type="radio"] {
	display:none;
}
.bool input[type="radio"] + label {
    height: 40px;
    width: 45%;
    margin-left: 3.3%;
    border: 1px solid #ddd;
    text-align: center;
    line-height: 40px;
    font-size: 21px;
    border-radius: 8px;
    background-color: #EEE;
    color: #999;
	transition:all ease 300ms;
}
.bool input[type="radio"] + label:hover {
    color: #000;
    background-color: #DDD;
    border: 1px solid #CCC;
}
.bool input[type="radio"]:checked + label {
    background-color: #4787C6;
    color: #fff;
    border: 1px solid #000;
}
.surveyBG {
	height:345px;
	width:100%;
	background-size:cover;
	background-position:center center;
	opacity:0.3;
    border-radius: 8px;
	transition:all ease 300ms;
}
.question:hover .surveyBG {
	opacity:0.7;
}
.question.currentQ .surveyBG {
	opacity:1;
}
.chooseOption {
	
}
.surveytabs {
    height: 48px;
    width: 150px;
    background-color: #DDD;
    background: linear-gradient(0deg, #999, 16%, #DDD);
    color: #000;
    line-height: 50px;
    float: left;
    position: relative;
    z-index: 1;
    text-align: center;
    border-radius: 10px 10px 0 0;
    margin: 2px;
    box-shadow: -2px 10px 17px rgb(0 0 0 / 70%);
    cursor: pointer;
    transition: all ease 300ms;
    border-left: 1px solid #BBB;
    border-right: 1px solid #DDD;
    border-top: 1px solid #DDD;
    border-bottom: none;
}
.surveytabs:hover {
    background-color: #FFF;
    background: #FFF;
	background: linear-gradient(0deg, #DDD, 16%, #FFF);
}
.surveytabs.currentsurvey {
    background-color: #EEE;
	background: #EEE;
    z-index: 2;
	color:#4787C6;
}
.acceptedSurveys, .surveyquestions {
    position: relative;
    top: -2px;
    z-index: 9;
    height: calc(100% - 52px);
    background: #EEE;
	overflow-x: hidden;
	overflow-y: auto;
	display:none;	
	clear:both;
}
.surveyquestions {
	padding:50px;
}
.divBox {
	color:#666;
	background-color:#EEE;
	border-radius:30px;
	padding:30px;
	box-shadow: 0 15px 15px rgba(0,0,0,0.3);
	margin-bottom:60px;
	text-align:center;
}

.divBox .mx-auto {
	padding:0;
	position:relative;
}
.divBox .mx-auto img {
	position:relative;
	margin:0 auto;
}
.instructionOuter  {
	height:100px;
	z-index:999;
    position: sticky;
	top:57px;
}
.instructions:not(.sideMenu .instructions) {
    padding: 20px 20px 20px 70px;
    background-color: #0043a7;
    box-shadow: 0 15px 15px rgba(0,0,0,0.3);
    border-radius: 5px;
    margin-bottom: 100px;
    color: #FFF;
	width:100%;
	right:0;
	overflow:hidden;
	white-space: normal;
	transition: width 1s ease-out, padding-right 1s ease-out, border-radius 1s ease-out;
	text-align:left;
	min-height: 68px;
}

.instructions:not(.sideMenu .instructions):before {
    background-color: #FFF;
    box-shadow: 0 15px 15px rgba(0,0,0,0.3);
    border-radius: 30px;
    width: 50px;
    height: 50px;
    content: 'i';
    font-style: italic;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    display: block;
    font-size: 39px;
    font-weight: bold;
    color: #0043a7;
    text-align: center;
    line-height: 50px;
    position: absolute;
    left: 10px;
    top: 9px;
	transition: all 1s ease-out;
	white-space:normal;
}
.instructions:not(.sideMenu .instructions):after {
    border-radius: 30px;
    width: 24px;
    height: 24px;
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    top: 7px;
    transition: opacity 1s ease-out;
    opacity: 0;
    background-color: #FFF;
    animation: spin 1s infinite linear;
    transform-origin: 35px 28px;
    z-index: 0;
}
.instructions.hiding:after {
	opacity:1;
}
.instructions.hiding {
    width: 0px;
    padding-right: 0;
    border-radius: 40px;
	transition: width 1s ease-in, padding-right 1s ease-in, border-radius 1s ease-in;
}
.instructions.hiding:before {
    transform: rotate(360deg);
    transition: all 1s ease-in;
    z-index: 2;
    box-shadow: none;
}
.votePerson {
	display:none;
}

.votePerson + label {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    position: relative;
    margin: 0 auto 10px auto;
}

.votePerson + label img, .taliPic img {
	display:block;
	width:80px;
	height:80px;
	border-radius:100%;
	object-fit:cover;
	transition: all 300ms ease;
	border:2px solid var(--rcol);
	filter:saturate(0.2);
}
.taliPic {
	position:relative;
}
.taliPic img {
	width:50px;
	height:50px;
	filter:saturate(0.9);
}

.votePerson + label:hover img, .votePerson:checked + label img, .taliPic:hover img {
	transform:scale(1.3) translateY(-20px);
    box-shadow: 0 15px 15px rgba(0,0,0,0.6);
	z-index:9;
	filter:saturate(1);
}

.votePerson + label:after, .taliPic:after {
    content: attr(alt);
    position: absolute;
    left: 50%;
    margin-left: -85px;
    background-color: var(--rcol);
    color: #FFF;
    padding: 10%;
    display: block;
    top: 60px;
    width: 170px;
    opacity: 0;
    z-index: 99;
    white-space: nowrap;
    border-radius: 10px;
    box-shadow: -7px 5px 15px rgba(0,0,0,0.4);
    transition: opacity 300ms ease;
    text-align: center;
	pointer-events:none;
}
 .taliPic:after {
    top: 0;
    left: 44px;
    margin-left: 0;
}
.votePerson + label:hover:after, .votePerson:checked + label:after, .taliPic:hover:after {
	opacity:1;
}
.instructions.voteQuestion {
	background-color:#093;
	padding-right: 190px;
}

.instructions.voteQuestion:before {
	color:#093;
	content:'?';
}

.instructions .voteAnswer, .instructions .voteCancel {
    position: absolute;
    background-color: #FFF;
    color: #093;
    right: 10px;
    width: 80px;
    text-align: center;
    padding: 10px;
    top: 10px;
    border-radius: 15px;
	cursor:pointer;
	transition:all 1000ms ease;
	opacity:0;
}
.instructions .voteAnswer {
	right:100px;
}

.instructions .voteAnswer:hover, .instructions .voteCancel:hover {
    box-shadow: -7px 5px 15px rgba(0,0,0,0.4);	
	background-color: #DBFFCA;
}

.instructions.voteQuestion .voteAnswer, .instructions.voteQuestion .voteCancel {
	opacity:1;
	transition:all 400ms ease;
}
.barGraph {
	position:relative;
}
.barGraphBar {
	height:20px;
	border-radius:5px;
	background-color:var(--rcol);
	margin-top: 15px;
	color:#FFF;
	text-align:right;	
    line-height: 20px;
    padding-right: 5px;
}
.addStockHere {
	padding:15px;
	border-radius:15px;
	border:2px dotted #AAA;
	margin: 30px 0;
	position:relative;
}
.addStockHere:empty:after {
	content:attr(alt);
	width:100%;
	padding:20px 0;
	text-align:center;
	display:block;
}
.selectStockProductButton, .selectedStockCheck {	
    position: relative;
    z-index: 999999999999999999999999999999999;
}
.selectStockProduct {
    display: none;
    width: 80%;
    height: 250px;
    position: absolute;
    z-index: 99999999;
    background: linear-gradient(#EEE, #FAFAFA);
    box-shadow: 0 0 15px rgba(0,0,0,0.9), 0 0 0 2000px rgba(0,0,0,0.7);
    border-radius: 6px;
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: -250px;
    translate: 0 -50px;
    padding: 0 15px;
    border-bottom: 5px solid #FAFAFA;
    border-top: 5px solid #EEE;
    left: 10%;
}
.changeNewStock {
	cursor:pointer;
}
.addStockForm {
    display: none;
    position: absolute;
    background: linear-gradient(#314963, #6b8ea3);
    box-shadow: 0 0 15px rgba(0,0,0,0.9);
    border-radius: 6px;
    z-index: 99999999999999;
    padding: 10px;
    margin-top: -450px;
    border-bottom: 5px solid #6b8ea3;
    border-top: 5px solid #314963;
}
.addStockForm input::placeholder {
	color:rgba(0,0,0,0.5);
}
.addStockForm h4 {
	color:#FFF;
}
.addStockForm input[type="text"],.addStockForm input[type="number"], .addStockForm select {
	margin-top:5px;
	border-color: #3f5c8f;
}

.addStockForm input[type="text"]:first-opt-type {
	margin-top:0;
}
.closeThis {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    border: 2px solid #FFF;
    background-color: #000;
    color: #FFF;
    font-weight: bold;
    text-align: center;
    line-height: 12px;
    cursor: pointer;
    box-shadow: 0 0 10px #000;
    border-radius: 20px;
}
.closeThis:hover {
	background-color:#900;
	animation: wiggle 1000ms forwards ease;
}
.copyPeople {
	display:none;
}
.removeStockitem {
    float: right;
}
.button.saveAddStock {
	background-color: var(--rcol);
}
.gotobar {
    position: sticky;
    margin-top: -69px;
    top: -7px;
    width: 100%;
    padding: 0;
    transition: box-shadow 300ms ease;
    z-index: 99999;
}
.secondTextFull img {
	max-width: 100%;
}
.otherCountry {
	display:none;
	margin-top:15px;
}
.locationdropdown optgroup {
	color:var(--rcol);
}
.locationdropdown optgroup option {
	color:#333;
}
.instructionOuter .instructions.violation {
    background-color: #b10003;
    font-size: 18px;
    white-space: unset;
    padding-top: 8px;
}

.instructionOuter .instructions.violation:before{	
    color: #b10003;	
    content: '!';
}
.showhideDealerBrochures {
    display: none;
    height: 65px;
    width: 100%;
    white-space: nowrap;
	    font-size: 13px;
}
.showhideDealerBrochures select.half, .showhideDealerBrochures select.half:nth-of-type(odd) {
	margin:15px 15px 15px 0;
}
.showhideDealerBrochures input[type="submit"] {
	margin:15px 0 0 0;
}
.selectDealerPerson {
	position:absolute;
	left: 12px;
	display:none;
}

.thedealermap {
	display:none;
	position:fixed;
	top:10%;
	left:10%;
	width:80%;
	height:80%;
	background-color:#FFF;
	border:10px solid #FFF;
	box-shadow:0 0 0 1000px rgba(0,0,0,0.7);
	z-index:99999999999999999999999999999;
	text-align:center;
}
.thedealermap img {
	max-height:100%;
	max-width:100%;
}
.inmap {
    height: 100%;
    width: fit-content;
    margin: auto;
	position:relative;
	cursor: crosshair;
}
.mapcloser {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 60px;
    height: 60px;
    cursor: pointer;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
    z-index: 9999999999999999999999999;
}
.mapcloser:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    background-color: #FFF;
    transform: rotate(-45deg);
    right: 10px;
    width: 60px;
    height: 5px;
    transition: all 300ms ease;
	border-radius:5px;
}
.mapcloser:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    background-color: #FFF;
    transform: rotate(45deg);
    right: 10px;
    width: 60px;
    height: 5px;
    transition: all 300ms ease;
	border-radius:5px;
}
.mapcloser:hover:after, .mapcloser:hover:before {
    background-color: #900;
}
.editDealer {
    position: absolute;
    right: -36px;
    top: -38px;
    background-image: url(../images/editIcon.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    cursor: pointer;
    transition: opacity 300ms ease;
    opacity: 1;
    filter: brightness(6) drop-shadow(-2px 2px 3px #000);
}
.editDealer:hover {
	opacity:0.7;
}
.eachContact {
    border: 1px solid #AAA;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    background-color: #F5F5F5;
    box-shadow: 0 0 10px rgba(0,0,0,0.7);
}
.sideMenu .eachContact  .formInput {
	min-height:60px;
}
.dealerLogos {
    position: relative;
    width: 100px;
    height: 100px;
    object-fit: cover;
    object-position: center;
    float: left;
    background-color: #FFF;
    border-radius: 17px;
    padding: 5px;
    box-shadow: -5px 5px 10px #000;
}

.dealerinside {
	width: calc(100% - 100px);
	float:left;
	padding-left: 35px;
}

.col-md-6.col-sm-12.dealer.sortItem.inactiveProduct.enabledelete {
	opacity:0.5;
	padding: 15px;
}

.col-md-6.col-sm-12.dealer.sortItem.enabledelete .del.delproduct{
	top: unset;
    bottom: -16px;
    left: -16px;
    z-index: 99999999999;
}
.r {
    position: absolute;
    z-index: 9;
    color: var(--rcol);
    top: 36px;
    font-size: 16px;
    left: 5px;
    font-weight: bold;
}
.driverRequest{
    background: linear-gradient(#FFF, #DFDFDF);
}

.driverRequest, .driverRequest h3, .uniformRequest, .clothitems, .listedItem {
	border:1px solid #999;
	box-shadow:-1px 1px 0 #FFF, inset -1px 1px 0 #FFF;
	padding:15px;
	border-radius:10px;
	margin:20px 0;
	position:relative;
	transition:box-shadow 300ms ease;
	
}
.sideMenu .allRequests div.button.half.recallDrvReq, .sideMenu .allRequests div.button.half.issueDrvReq + div.button.half, div.button.half:nth-of-type(2)   {
    float: right;
}
.del.delcareer {
    position: absolute;
    top: 5px;
    right: 5px;
	opacity: 0;
	pointer-events:none;
	transition:opacity 300ms ease;
}
.del.delcareer.showdel {
	opacity: 1;
	pointer-events:all;
}
.driverRequest:hover, .uniformRequest:hover, .clothitems:hover, .listedItem:hover {
    background: linear-gradient(#FFF, #FFF);	
	box-shadow:-1px 1px 1px #FFF, inset -1px 1px 1px #FFF, 1px -1px 1px rgba(0,0,0,0.1), 0px 0px 20px rgba(0,0,0,0.7);
}
.driverRequest h3 {
	padding-top:10px;
	background-color:rgba(255,255,255,0.7);
}
.driverRequest  .taliPic,.uniformRequest .taliPic {
	position:absolute;
	top:-5px;
	left:-5px;
	z-index: 2;
}
.driverRequest h5, .uniformRequest h5 {
    padding: 0 0 8px 40px;
    margin-top: -10px;
}

.driverRequest.zreqrequested, .reqType {
	color:var(--rcol);
	animation: backgroundColourRainbow infinite 10s linear;
	border: 1px solid #CCC;
}
.sideMenu .button.actionAccept {
	background-color: #063;
}
.sideMenu .button.actionAccept:hover {
	background-color: #041;
}
.driverRequest.zreqrequested h5 {
    color: rgba(0,0,0,0.8);
}

.driverRequest.zreqrequested .taliPic img, .driverRequest.zreqrequested g5 {
	animation: bordercolourRainbow infinite 10s linear; 
}
.driverRequest.zreqrequested:after {
    width: 41px;
    height: 30px;
    transform: perspective(600px) rotate3d(0, 1, 0, 0deg);
    background-image: url(../images/envelopes.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
    position: absolute;
    top: -10px;
    right: -9px;
    content: '';
    display: block;
    filter: drop-shadow(-4px 6px 3px rgba(0,0,0,0.4));
	animation: spin3d  2000ms infinite linear;	
}
.driverRequest.zreqaccepted {
	color:#000;
}
.driverRequest.zreqissued {
	color:#000;
}
.sideMenu .driverRequest:hover .button.removeDrvReq {
	background:#F4D0D0;
	color:#900;
}

.sideMenu .driverRequest .button.removeDrvReq:hover {
	background:#D00000;
	color:#FFF;
}
.sideMenu .driverRequest:hover .button.issueDrvReq, .sideMenu .driverRequest:hover .button.acceptDrvReq {
	background: #B7E0B6;
	color:#060;
}

.sideMenu .driverRequest .button.issueDrvReq:hover, .sideMenu .driverRequest .button.acceptDrvReq:hover {
	background:#3C0;
	color:#FFF;
}
.sideMenu .driverRequest:hover .button.recallDrvReq {
	background:#AFD6F5;
	color:#06A;
}
.sideMenu .driverRequest .button.recallDrvReq:hover {
	background:var(--rcol);
	color:#FFF;
}
/*1 = current, 4 = next, 3 = Can't do, 2 = done*/
.sideMenu .driverRequest.driverDone1 .taliPic img, .sideMenu .driverRequest.driverDone1 .taliPic:hover img{
    box-shadow: 0 0 24px var(--rcol);
    transform: scale(1.2);
}

.sideMenu .driverRequest.driverDone4 .taliPic img, .sideMenu .driverRequest.driverDone4 .taliPic:hover img{
    box-shadow: 0 0 24px #0DF;
    transform: scale(1.2);
}

.sideMenu .driverRequest.driverDone2{
	color:#090;
	border-color:#090;
	background:#DFF2DF;
}

.sideMenu .driverRequest.driverDone2 h5, .sideMenu .driverRequest.driverDone2 .taliPic img {
	color:#090;
	border-color:#090;
}
.sideMenu .driverRequest.driverDone3, .sideMenu .driverRequest.driverDone3 .taliPic img {
	color:#900;
	border-color:#E44;
	background:#F2DFDF;
}
.sideMenu .driverRequest.driverDone3 h5 {
	color:#900;
	border-color:#E44;
}
.sideMenu .driverRequest > em {
	font-size:14px;
	color:rgba(0,0,0,0.5);
	display: block;
}

.sideMenu .driverRequest:hover > em u {
	color:#000;
}
.sideMenu .driverRequest h6 {
	    margin: 10px 0 10px 0;
}
.RequestHistory small {
	font-size:9;
	color:#AAA;
}
.driverRefresh, .driverRefresh:active {
    display: inline-block;
	padding:15px;
    background-color: #AAA;
	color:#FFF;
    margin: 0 15px 0 2px;
    border-radius: 15px;
    box-shadow: inset -2px 2px 5px rgba(0,0,0,0.7), -2px 2px 2px #FFF;
    transition: all ease 300ms;
	cursor:pointer;
}

.driverRefresh:hover {
	color:#666;
    background-color: #ECECEC;
    box-shadow: inset 2px -2px 3px rgba(0,0,0,0.4), inset -3px 2px 4px #FFF, -4px 6px 9px rgba(0,0,0,0.2);
}
.driverRefresh:active {
	color:#FFF;
    background-color: #BAA;
    box-shadow: inset -2px 2px 5px rgba(0,0,0,0.7), -2px 2px 2px #FFF;
}
.detailImgs {
	width:60%;
	height:auto;
	margin-bottom:30px;
	cursor:pointer;
}
.referenceNumber {
    position: relative;
    font-size: 12px;
    color: #666;
    padding: 5px;
    display: inline-block;
    background-color: #FFF;
    border-radius: 5px;
    box-shadow: -2px 2px 5px rgba(0,0,0,0.5);
	margin:30px 0;
}
.referenceNumber:before {
	color:#AAA;
	content: 'Ref. Number: ';
}
.smallClothes {
    display: inline-block;
    height: 84px;
    width: 69px;
    object-fit: contain;
    background-color: #FFF;
    margin: 0 6px -28px -48px;
    translate: 0 -36px;
    mix-blend-mode: multiply;
}
.smallClothes + small {
    padding-top: 17px;
    display: inline-block;
    /*color: var(--rcol);*/
    height: 84px;
}
.uniformRequest.unread {
    background-color: aliceblue;
}
.uniformRequest .sex {
	top:0;
	right:0;
}
.relcont {
	position:relative;
}
.contR {
	position:absolute;
	left:8px;
	top:6px;
}
input[type="number"].clothesPayment {
	padding-left:20px;
}
.requestdate {
    font-size: 12px;
    color: #666;
    position: relative;
    transform: translate(42px,-8px);
    display: block;
}
.showhidealt {
    display: block;
    border: 2px dashed var(--lcol);
    width: calc(100% + 4px);
    padding: 12px;
    cursor: pointer;
    position: relative;
    transition: all ease 300ms;
    border-radius: 5px;
    z-index: 9;
    margin-top: -11px;
    margin-bottom: 6px;
	background-color: #EEE;
}
.formInput:hover .showhidealt {
    border: 2px dashed var(--rcol);
}
.formInput.showAlt .showhidealt, .formInput.showAlt:hover .showhidealt {
	border-bottom: 0px solid #FFF;
}
.showhidealt:hover {
	background-color:#CCC;
}
.showhidealt:after {
    content: '';
    position: absolute;
    display: block;
    transform: rotate(-45deg);
    transition: all ease 300ms;
    left: 50%;
    margin-left: -8px;
    border-bottom: 2px solid #000;
    border-left: 2px solid #000;
    height: 12px;
    width: 12px;
    top: 4px;
}
.formInput.showAlt .showhidealt:after {
	transform:rotate(135deg);
	top: 9px;
}
.removeAltUniformImage {
	width:25px;
	height:25px;
	position:absolute;
	background-image:url(../images/delbutton.png);
	background-size:contain;
	top:5px;
	right:5px;
	cursor:pointer;
	z-index: 19;
	transition:all ease 300ms;
	filter:drop-shadow(-2px 6px 3px rgba(0,0,0,0.4));
}
.removeAltUniformImage:hover {
	
	transform:scale(1.4);
	filter:brightness(0.9) drop-shadow(-2px 6px 3px rgba(0,0,0,0.4));
}
.sizebox {
    margin: 15px 0 0 0;
    border: 1px solid #999;
    padding: 5px 5px 3px 5px;
    border-radius: 5px;
    background-color: rgba(var(--rgblcol), 0.52);
	position: relative;
}
.sideMenu .sizebox input[type="checkbox"] {
    width: 15px;
    height: 15px;
    padding: 0;
    position: relative;
    top: unset;
    left: unset;
    pointer-events: all;
    margin: 0 0 0 5px;
}
.sideMenu .sizebox input[type="checkbox"] + label, .sizebox input[type="checkbox"]:valid + label {
    width: auto;
    padding: 0 5px;
    color: #333;
    position: relative;
    top: unset;
    left: unset;
    font-size: 12px;
    transition: all ease 300ms;
    pointer-events: all;
    font-weight: normal;
    margin: 0 9px 0 -9px;
}
.permalabel {
    position: absolute;
    top: -23px;
    left: 2px;
    font-size: 13px;
	width: 100%;
    color: var(--dcol);
    transition: all 300ms ease;
    opacity: 1 !important;
}
.sideMenu .formInputOther.sizesOther {
	min-height:0;
	height:auto;
}
.uniformRequest h3 {
    text-shadow: 2px -2px 3px #DDD, -1px 1px 1px rgba(255,255,255,0.4);
    color: var(--rcol);
    text-align: center;
    padding: 16px 0 0 0;
}
.sideMenu .button.actionComplete {
	background-color: var(--rcol);
}
#editClothes.settingDropdown {
	background-color: #AAA;
}
.clothitems {
	background: none;
	margin-top: 50px;
	background-color: rgba(255,255,255,0.5);
	transition: all 300ms ease;
}

.clothitems.clothitemfirst {
	margin-top: 0px;
}
.clothitems:hover {
	background: none;
	background-color: #FFF;
}
.sideMenu #editClothes .keywords{ 
	border-radius:5px;
	border: 1px solid #999;
	background-color: rgba(var(--rgblcol), 0.52);
}

.sideMenu #editClothes input[type="submit"]{ 
	width:100%;
}
.addnewitem  {
    background-color: #42911a;
    text-align: center;
    padding: 10px;
    color: #FFF;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 300ms ease;
    margin: 25px 0;
    font-size: 35px;
    line-height: 8px;
    height: 36px;
}
.newClothesItem, .newClothesItem:hover {
	display:none;
	box-shadow: 0 0 65px #007cff;
	background-color:#FFF;
}
.addnewitem:hover {
	background-color:#080;
}
.jobs img {
	max-width:100% !important;
}
h4.jobtitles {
    margin: 0;
	padding: 20px 0;
	cursor:pointer;
}
.listedItem input[type="submit"]{
	width:100%;
}
.applicantImg {
	max-width:100%;
}
.OrderBy {
	display:inline-block;
	width:calc(100% - 40px);
}
input[type="checkbox"]#direction {
	display:none;
}
input[type="checkbox"]#direction + label {
    display: inline-block;
    height: 35px;
    width: 33px;
    background-color: #FFF;
    translate: 0 13px;
    border: 1px solid #999;
    border-radius: 5px;
    text-align: center;
    font-size: 30px;
    line-height: 26px;
    cursor: pointer;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.72) 0%,rgba(var(--rgblcol), 0.52) 100%);
    color: var(--rcol);
    font-weight: bold;
}
label[for="OrderBy"] {
	    translate: 0 8px;
}

input[type="checkbox"]#direction + label:hover {
    border: 1px solid var(--rcol);	
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%,var(--vlcol2) 100%);
}

input[type="checkbox"]#direction:checked + label {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.72) 0%,rgba(var(--rgblcol), 0.52) 100%);
	transform:rotate(180deg);
}


input[type="checkbox"]#direction:checked + label:hover {
    background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%,var(--vlcol2) 100%);
}
.applicants em {
	font-size:10px;
}
.scrollComments {
	max-height:400px;
	overflow-y:auto;
	overflow-x:hidden;
}
.delapplication {
	position:absolute;
	top:3px;
	right:3px;	
    width: 30px;
    height: 30px;
}
#applicationFilter {
}
.clothesLink {
	position:absolute;
	height:15px;
	width:15px;
	background-image:url(../images/link.png);
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	cursor:pointer;
	top:0;
	right:0;
}
.clothesLink:hover {
	animation:wiggle infinite 2000ms ease;
}
.compImages {
	position:relative;
}
.compImage {
    width: 100%;
    translate: 0 -75px;
    border-radius: 5px;
}
.compImage2 {
    position: absolute;
    width: 50%;
    left: 25%;
    object-fit: contain;
    bottom: 0;
}
h2.headerh2 {
    position: absolute;
    top: 313px;
    left: 0;
    text-align: center;
    color: #FFF;
    font-size: clamp(1.5rem, 1.5vw, 2rem);
    text-shadow: 0 0 20px #000, 0 0 20px #000, 0 0 20px #000, 0 0 15px #000, 0 0 10px #000;
    border-bottom: none;
}
.sliderLeftLabel {
	width:50px;
	display:inline-block;
	translate: 0 -9px;
}

.sliderLeftLabel + .slideScale {
	width:calc(100% - 50px);
	display:inline-block;
}
.RGB {
    padding: 5px;
    width: 100%;
    border-radius: 5px;
    box-shadow:0 0 5px rgba(0,0,0,0.9), 0 0 39px rgba(0,0,0,0.7);
    background: linear-gradient(#f1f1f1, #DDD);
    position: absolute;
    bottom: 55px;
    right: 50%;
    margin-right: -50%;
    display: none;
    z-index: 9;
}
.showonscroll {
	transition:transform ease 500ms, opacity ease 1000ms;
}
.hidebeforescroll {
	opacity:0;
	pointer-events:none;
	transform:translate(250px,100px) !important;
}
.hideTextarea .emojibutton {
	top:-20px;
	right:0;
}
.hideTextarea .emojibutton + .emojiList{
    bottom: unset;
    top: 0;
	z-index:999999999;
}
.winner {
    text-align: center;
    text-shadow: none;
}
h3.winner {
}
h2.winner {
    font-size: 70px;
    font-family: 'Impact';
	animation: colourRainbow2 linear 1000ms infinite;
	text-shadow:0 0 15px #000;
}
h4.winner, span.winner {
    animation: colourRainbow2 linear 1000ms infinite;
    text-shadow: 0 0 15px #000;
    filter: drop-shadow(1px 2px 2px black);
    border-bottom: none;
    translate: 0 -34px;
    font-size: 35px;
}
.compContact span:not(.winner, .reqstar) {
    text-align: center;
    display: block;
    margin-top: -33px;
    font-weight: bold;
}
.compContact span.winner {
    font-size: 22px;
}
.headerlogo {
    position: absolute;
    top: 108px;
    height: 364px;
    left: 50%;
    margin-left: -50vw;
    width: calc(100vw - 6px);
    object-fit: contain;
    object-position: center;
    backdrop-filter: blur(4px);
    background-color: rgba(255, 255, 255, 0.8);
}
.dealerSidePanel {
	background-color:#EEE;
	border-radius:5px;
}
.dealerLogo {
	width:100%;
}
.sideMenu div.button:not(.commissioning, .preview, .preview2, .previewPI).bluebutton {
	background-color:var(--rcol);
}
.sideMenu div.button:not(.commissioning, .preview, .preview2, .previewPI).bluebutton:hover {
	background-color:var(--dcol);
}
.dealerCategories {
	margin:20px 0 0 0;
	padding:30px;
	background-color:#EEE;
	border-radius:10px;
	display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
	
}
.dealerCategories h5, .dealerCategories h6 {
	grid-column: span 3;
}
.dealerProduct {
	display:inline-block;
	margin-bottom: 20px ;
	position:relative;
	height: 186px;
}
.dealerProduct a span {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    background-color: rgba(255, 255, 255, 0.7);
    width: 100%;
    text-align: center;
    border-radius: 10px;
    box-shadow: -6px 6px 12px rgba(0, 0, 0, 0.2);
}
.dealerProduct img {
	mix-blend-mode: multiply;
	width:100%;
	height:100%;
	object-fit: contain;
	transition:all ease 300ms;
}

.dealerProduct:hover img {
	transform:scale(1.2);
}
.compContact {
	display:none;
    position: fixed;
    z-index: 999999999999;
    background-color: #FFF;
    top: 50%;
    left: 50%;
    margin-left: -12.5%;
    margin-top: -12.5%;
    min-height: 50%;	
    max-height: 87.5%;
    width: 25%;
    padding: 30px 45px 30px 30px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.7), 0 0 50px rgba(0,0,0,0.4), 0 0 0 30000px rgba(0,0,0,0.4);
	background-image:url(../images/easterfooter.jpg?v=2);
	background-repeat:no-repeat;
	background-position:0 101%;
	background-size:100% auto;
}

.compContact input[type="submit"], .cancelComp {
    box-shadow: 0 0 30px rgba(255,255,255,1), 0 0 20px rgba(255,255,255,1), 0 0 5px rgba(255,255,255,1);
    padding: 6px;
    border-radius: 5px;
}
.bunny {
	display:none;
    position: fixed;	
    z-index: 999999999999;
	width:100px;
	top:calc(100% - 140px);
	cursor:pointer;
	margin-top: 0;
	transition: left ease 2000ms,  top ease 2000ms, width ease 2000ms;
}

.bunny:after {
    content: attr(alt);
    position: absolute;
    opacity: 1;
    font-size: 2em;
    top: 23%;
    left: 69%;
    text-align: center;
    display: block;
    width: 50px;
    font-family: "Impact";
    color: #ffe200;
    text-shadow: 0 0 26px #000, 0 0 12px #000, 0 0 1px #FC6;
	font-size: 1px;
	opacity:0.1;
}

@keyframes fontincrease {
  0% { font-size: 0px; opacity:0.1;}
  70% { font-size: 1px; opacity:0.1;}
  85% { font-size: 24px; opacity:1;}
  100% { font-size: 48px;opacity:1;}
}

.bunny.caught:after {
	animation-delay:2000ms;
	animation: fontincrease 6000ms forwards linear;
}
.bunny.caught {
    width: 420px !important;
    top: 5% !important;
    left: calc(50% - 210px) !important;
    transform: scale(1, 1) !important;
    filter: drop-shadow(0px 0px 17px black);
}
.bunny video {
    position: relative;	
	width:100%;
}
.confetti {
	position: fixed;
	width: 10px;
	height: 10px;
	background-color: #f00;
	z-index:99999999999999999999999;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
	pointer-events:none;
	animation: fall forwards 5000ms ease;
}
.keywordForm {
	position: relative;
}
.delKeyword {
	position: absolute;
	right: -10px;
    top: 7px;
}
.showkeywords {
	cursor:pointer;
}
.allKeywords {
    display: none;
    background-color: #EEE;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #444;
    max-height: 375px;
    overflow-x: hidden;
    overflow-y: auto;
	position:relative;
}
.newkeywordForm {
	padding:10px;
	background-color:#EEE;
	border-radius:10px;
    border: 1px solid #444;
	margin-bottom:30px;
	position:relative;
}
.newkeywordForm input[type="text"]{
	display:inline-block;
	margin-right:10px;
	width:80%;
}

.newkeywordForm input[type="submit"]{
	display:inline-block;
	width:calc(20% - 10px);
	    translate: 0 -1px;
}
.keywordForm input[type="checkbox"].toggle + label {
	position: absolute;
	right: 10px;
	top:22px;
}
.keywordForm.inactivekey {
	opacity:0.5;
}
.expoform {
    background-color: rgba(0, 0, 0, 0.5);
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index: 99999999999999999;
}

.expoformPage {
    position: fixed;
    height: 80%;
    top: 10%;
    width: 80%;
    left: 10%;
    display: block;
    z-index: 9;	
    box-shadow: 0 0 15px #000, 0 0 25px #000, 0 0 30px #000, inset -8px 8px 15px rgba(255,255,255,0.4), inset 5px -5px 12px rgba(0,0,0,0.6);
    padding: 50px;
    border-radius: 20px;	
    transition: 0.6s;
    transform-style: preserve-3d;
	transform: rotateY(-90deg);
	pointer-events:none;
	opacity:0;
	background-size:contain;
	background-position:bottom;
	background-repeat:no-repeat;
	padding-bottom: 0 !important;

	overflow-x: hidden;
	overflow-y: auto;
}
.expoformPage input.textshow, .expoformPage select {
    height: 115px;
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 3vw;
    font-weight: normal;
    text-align: center;
    color: #666;
    border-radius: 10px;
    margin-top: 8vw;
    box-shadow: 5px -4px 15px rgba(0, 0, 0, 0.5), -5px 4px 15px rgba(220, 255, 235, 0.7), inset -7px 7px 15px rgba(0, 0, 0, 0.3);
}
.expoformPage select {
    box-shadow:-5px 4px 15px rgba(0, 0, 0, 0.5), inset 2px -3px 9px rgba(0, 0, 0, 0.3);
}
.backButton, .nextButton, .expoformPage input[type="submit"] {
    height: 0;
    width: 10%;
    padding: 0.5% 0 8% 0;
    line-height: 300%;
    font-size: 2vw;
    top: 35px;
    position: absolute;
    background-color: transparent;
    border: 1px solid #FFF;
}

.expoformPage label {
    font-size: 4vw;
    width: 72%;
    position: absolute;
    left: 14%;
    margin-top: 1%;
    line-height: 1;
}
.expoformPage select{
	font-size: 1em;
}
/* Flip animation container */
.flip-container {
    perspective: 1000px;
}

.flipped.expoformPage {
	transform: rotateY(0deg);
	pointer-events:all;
	opacity:1;
}
.flipOut.expoformPage {
	transform: rotateY(90deg);
	pointer-events:none;
	opacity:0;
}
.backButton {
    left: 40px;
    top: -77px;
    border: 1px solid #666;
    border-radius: 5px;
    padding: 14px;
    line-height: 14px;
    white-space: nowrap;
    height: 48px;
    font-size: 24px;
    color: #AAA !important;
    background-color: #FFF;
}
.backButton:hover, .backButton:active {
    color:  #FFF !important;
    background-color:#AAA !important;
    text-decoration: none !important;
}
.nextButton, .expoformPage input[type="submit"] {
    right: 40px;
}
.expoformPage input[type="submit"]:not(.disabled) {
	background-color:#FFF;
	color:#030;
}
.consultantSelect {
	display:none;
}
.consultantSelect + label {
	display:inline-block;
	cursor:pointer;
	width: 100px;
	height:100px;
	margin:10px;
	position:static;
    transition: all 400ms ease;
}
.consultantSelect + label img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 100%;
    border: 2px solid #FFF;
    background-color: #FFF;
}
.consultantSelect + label span {
    opacity: 0;
    background-color: #69A;
    position: absolute;
    width: 160px;
    margin: -25px 0 0 -30px;
    padding: 5px;
    display: block;
    text-align: center;
    font-size: 18px;
    transition: all 400ms ease;
    box-shadow: -4px 5px 5px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
	z-index:9999999;
}

.consultantSelect + label:hover {
    translate:0px -10px;
}
.consultantSelect.unselectedConsultant + label {
	transform:scale(0.6);
	filter:saturate(0.3);
}

.consultantSelect + label:hover span, .consultantSelect:checked + label span {
    opacity: 1;
}
.consultantsDiv {
    clear: both;
    margin-top: 195px;
    text-align: center;
}

.consultantSelect:checked + label img {
	box-shadow: 0 0 25px #FFF;
}
input.shakeThis, select.shakeThis {
    font-weight: bold;
   animation: wobble 2000ms forwards ease;
}
.invalidEmail {
    color: #F00;
    background-color: #FFF;
    text-align: center;
    padding: 14px;
    border-radius: 16px;
    margin-top: 5px;
    filter: drop-shadow(2px 4px 6px black);
    position: relative;	
   animation: wobble 2000ms forwards ease;
}
.invalidEmail:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    top: -16px;
    right: 30px;
    border-bottom: 17px solid #FFF;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    position: absolute;
    transform: skewX(24deg);
}
.button.startForm {
	animation:rainbowbutton 10s ease infinite;
}

.button.startForm:hover {
	color:#FFF;
	animation:rainbowbutton2 10s ease infinite;
}
.spinToWin {
	display:none;
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:9999999999999999999999999999999999999999999999999999999999;
	background-color:rgba(0,0,0,0.4);
	background-image:url(../images/spinPodium.webp?v=2);
	background-size: auto 100%;
	background-position:center center;
	background-repeat:no-repeat;
}
.spinWheel {
    background-image: url(../images/spinWheel.webp?v=2);
    position: absolute;
    width: 63vw;
    height: 59vh;
    top: 50%;
    left: 50%;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: -31.5vw;
    margin-top: -31vh;	
    transform-origin: center;
    transition: transform 10s cubic-bezier(0.42, 0, 0.58, 1);
}
.spinTicker {
	background-image:url(../images/spinTicker.webp);
    position: absolute;
    width: 4vw;
    height: 7.6vh;
    top: 50%;
    left: 50%;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: -2.1vw;
    margin-top: -32vh;
}
.spinButton {
	background-image:url(../images/spinButton.webp);
    position: absolute;
    width: 20.52vw;
    height: 23.8vh;
    top: 50%;
    left: 50%;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: -10.4vw;
    margin-top: -15.5vh;
	cursor:pointer;
	transition:transform 300ms ease;
	filter: drop-shadow(-7px 9px 6px rgba(0,0,0,0.4));
}
.spinButton:hover {
	transform:scale(1.1);
}

.spinButton:active {
	transform:scale(1);
}
.showperc {
    width: 0px;
    height: 0px;
    line-height: 482px;
    text-align: center;
    font-size: 5em;
    position: fixed;
    background-image: url(../images/percentOff.webp?v=4);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center center;
    left: 50%;
    top: 50%;
    opacity: 0;
    z-index: 99999999999999999999999999999999999999999999999999999999999;
    font-family: "Impact";
    color: #FFF;
    text-shadow: 0 10px 5px rgba(0, 0, 0, 0.4);
	transform:scale(0) translate(-50%, -50%);
	transition:all 500ms ease;
}
.showperc.active {
    opacity: 1;
	transform:scale(1) translate(-50%, -50%);
    width: 465px;
    height: 476px;
}
.changetothankyou{
    text-align: center;
    font-family: 'Montserrat';
}
.dropdownchoose {
    overflow: hidden;
    height: 50px;
    line-height: 17px;
    width: 300px;
    padding:0;
    display: inline-block;
    margin: 0;
    cursor: pointer;
    position: relative;
    z-index: 9;
    translate: 0 18px;
	transition:all 300ms ease;
}


@property --botcol {
  syntax: '<color>';
  initial-value: #FFF;
  inherits: false;
}
.dropdownchoose div {
    height: 50px;
    width: auto;
    display: block;
    margin: 0;
    border-radius: 5px;
    border: 1px solid var(--rcol);
    position: absolute;
    z-index: 9;
    background-color: #FFF;
    background: linear-gradient(#FFF, 75%, var(--botcol));
	transition:all 300ms ease, --botcol 300ms ease;
	max-width:100%;
}

.dropdownchoose:hover div {	
    background-color: #FAFAFA;	
	--botcol : #CCC;
}
.dropdownchoose div:after {
    height: 0;
    width: 0;
    display: block;
    border-top: 7px solid var(--rcol);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    position: absolute;
    z-index: 99;
    transition: all 300ms ease;
    top: 21px;
    right: 12px;
    content: '';
	pointer-events:none;
}

.dropdownchoose.opened div:after {
	opacity:0;
}
.dropdownchoose a {
	pointer-events:none;
    padding: 15px 32px 15px 15px;
	display: block;
    height: 50px;	
	transition:all 300ms ease;
	text-decoration:none;
}

.dropdownchoose span {
    position: absolute;
    top: -21px;
    right: -20px;
    cursor: pointer;
    background-color: #FFF;
    color: #900;
    border-radius: 20px;
    line-height: 13px;
    font-size: 24px;
    text-align: center;
    transform: rotate(45deg);
    height: 20px;
    width: 20px;
    border: 1px solid;
	transition:all 300ms ease;
}
.dropdownchoose span:hover {
    color: #FFF;
    background-color: #900;
}
.dropdownchoose.opened {
    overflow: visible;
}
.dropdownchoose.opened div {
    height: auto;
	box-shadow: 4px 4px 15px rgba(0,0,0,0.4);
}

.dropdownchoose.opened a {
	pointer-events:all;	
}
.dropdownchoose.opened a:hover {
	background-color: var(--rcol);
	color:#FFF;
	text-decoration:none;
}
.dropdownchoose.opened a.selected {
	pointer-events:none;
	color:#666;
}
.dropdownchoose div.nowSelected {
    pointer-events: none;
    position: absolute;
    top: 0;
    background-color: #FFF;
    width: 100%;
    left: 0;
    border-radius: 5px;
    white-space: nowrap;
    z-index: 999;
    border: none;
    height: 100%;
    padding: 15px;
    color: var(--rcol);
}

.dropdownchoose div.nowSelected:after {
    height: 20px;
    width: 20px;
    display: block;
    border: 3px solid transparent;
    border-top: 3px solid var(--rcol);
    border-left: 3px solid var(--rcol);
    position: absolute;
    z-index: 99;
    transition: all 300ms ease;
    top: 15px;
    right: 12px;
    content: '';
	pointer-events:none;
	border-radius: 20px;
    animation: spin linear infinite 1000ms;
}
.dealerSearchSettings {
}
.dealerSearchSettingsInput {
	margin-bottom:5px;
}
.dealerSearchResults {
	margin-top:5px;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
	border:1px solid #999;
	padding:5px;
	border-radius:5px;
	box-shadow: -3px 3px 5px rgba(0,0,0,0.2),inset  -3px 3px 5px rgba(255,255,255,0.8);
	min-height: 55px;
}
.dealerAdCanvas #thisToImage {
	width:500px;
	height:500px;
	overflow: hidden;
	position: relative;
}
.DealerAdCompanyName {
    position: absolute;
    bottom: 70px;
    color: #FFF;
    text-shadow: 0 0 16px rgba(50, 40, 0, 0.4);
    font-family: "impact";
    left: 8px;
	font-size:20px;
}
.dealerAdCanvas .dealerAdLogo {
    height: 70px;
    width: 100px;
    position: absolute;
    bottom: 25px;
    right: 2px;
    text-align: center;
}
.dealerAdCanvas .dealerAdLogo img {
    height: auto;
    width: auto;
	position:relative;
	margin:0 auto;
}
.putAdHere {
}
.downloadDealerAdButton {
	clear:both;
	width:100%;
}
.dealerAdCanvas .imgcontainer {
	 width:500px; 
	 height:500px; 
	 position:relative;
 }
.dealerAdvertImg {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:-1;
}

.dealerSearchResults span {
    text-align: center;
    display: block;
    margin-top: 10px;
}
.dealerSearchResults .spinner {
    position: relative;
    margin: 0;
    translate: -50% 0;
}
.DealerSresult {
	border-bottom:1px solid #CCC;
	paddin-bottom:7px;
}
.sideMenu .button:not(.commissioning, .preview, .preview2, .previewPI).makeDealer {
    height: 30px;
    width: 133px;
    display: block;
    line-height: 12px;
}
.sideMenu .button:not(.commissioning, .preview, .preview2, .previewPI).makeDealer.made {
	background-color:#900;
}
.chooseDealer {
	display:none;
	background-color:#FFF;
	border:1px solid #999;
	border-radius:5px;
	padding:15px;
	margin-bottom: 10px;
}
.dealerChooser {
	padding: 0;
	margin: 0;
}
.marketingIcons {
  list-style: none;
  padding: 0;
  display: flex; /* Enable flexbox layout */
  flex-wrap: wrap; /* Allow items to wrap on multiple lines */
  --item-index: 0;
}

.marketingIcons li {
	display:block;
	position:relative;
	width:15%;
	--item-width: 15%;
	padding: 0 0 15% 0; /* Remove padding */
	margin: 0.8%;
	cursor:pointer;
	
}
.marketingIcons li:after {
	display:block;
  content: '';
  background-image: url("../images/marketing-icons.png");
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position-x: calc(var(--item-width) * var(--item-index) + calc(1.6666% * var(--item-index) * 3));
  pointer-events:none;
  transition:all 300ms ease;
  border-radius: 12px;
}

.marketingIcons:hover li:not(:hover,  .selected):after {
	filter: saturate(0.2);
}

.marketingIcons li:hover:after {
	filter: saturate(1.2);
}


.marketingIcons li.selected {
	
}

.marketingIcons li.selected:after {
	filter: saturate(2);
	outline: 2px solid #FFF;
	box-shadow: 0 0 15px rgba(0,0,0,0.3);
}

.margetingDropdown {
    display: none;
    position: absolute;
    background-color: #EEE;
	background: linear-gradient(45deg, #DDD, #EEE);
    z-index: 9999999999999;
    width: 100vw;
    max-width: 280px;
    filter:drop-shadow(-3px 3px 5px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
    top: calc(100% - 4px);
    left: -8px;
    border-radius: 14px;
    padding: 5px 0;
    --pos-left: 5px;
	box-shadow: 0 0 0 50000px rgba(0, 0, 0, 0.1);
	transition: box-shadow ease 300ms;
}
.margetingDropdown input[type="radio"]{
	display:none;
}

.margetingDropdown input[type="radio"] + label {
    display: block;
    padding: 10px;
    width: calc(100% - 10px);
    border-bottom: 1px solid #DDD;
    border-top: 1px solid #FFF;
    margin: 0 0 0 5px;
	transition:all 300ms ease;
}

.margetingDropdown input[type="radio"]:checked + label {
	color:#FFF;
	background-color:#4787C6;
	border-radius: 10px;
	border-radius: 10px;
}

.margetingDropdown input[type="radio"]:first-child + label {
    border-top: none;
}
.margetingDropdown input[type="radio"]:last-child + label {
    border-bottom: none;
}

.margetingDropdown:before {
    display: block;
    content: '';
    position: absolute;
    top: -15px;
    left: var(--pos-left);
    border-bottom: 20px solid #EEE;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    z-index: -1;
}
.Whatitis {
    transform: perspective(600px) rotate3d(0, 1, 0, 0deg);
    font-weight: bold;
    margin: 30px;
    text-align: center;
    color: #0a8cff;
    animation: shine2 infinite ease 3000ms;
}
.questiontag textarea, .questiontag select:not(.altExtra), .questiontag input:not([type="checkbox"], [type="radio"][type="submit"], .cartOptionCheck), .newKeys{
    box-shadow: -3px 3px 4px #FFF, -3px 3px 6px #FFF, 2px -2px 3px rgba(0, 0, 0, 0.2), -4px 4px 20px rgba(0, 0, 0, 0.2);
}
.MarketingDesk {
	display:flex;
	gap: 15px;
}
.settingssearchbox {
	height: 96px;
    border-radius: 10px;
    border: 1px solid #999;
    background-color: #FFF;
    padding: 15px 5px 0 5px;
    margin-top: 10px;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.7));
}
.sideMenu input[type="text"].seachTermInput {
    width: calc(100% - 100px);
    display: inline-block;
}
.sideMenu .button:not(.commissioning, .preview, .preview2, .previewPI).settingssearchgo {
    width: 95px;
    translate: 0 -2px;
}
.sideMenu .formInput.settingssearchbox small {
    margin: -9px 0 0 4px;
    display: inline;
    width: auto;
    background-color: #FFF;
    border: 1px solid #999;
    padding: 0 4px;
    height: 21px;
    line-height: 18px;
    border-radius: 5px;
}
.leftSideMenu {
    background-color: #FFF;
    position: relative;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 0 25px rgba(0,0,0,0.5);
}
.foodmenuInner {
    top: 60px;
    position: sticky;
}
.foodSubmenu {
    text-align: center;
    cursor: pointer;
    padding: 10px;
    position: relative;
}
.foodSubmenu img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: filter 500ms ease, transform 300ms ease, opacity 300ms ease;
    z-index: 1;
}

.foodSubmenu span {
    position: absolute;
    top: 50%;
    margin-top: -5px;
    color: #FFF;
    text-shadow: 0 0 10px #000, 0 0 3px #000;
    text-align: center;
    display: block;
    left: 0;
    width: 100%;
    font-weight: bold;
}

.leftSideMenu:hover img:not(.foodSubmenu:hover img) {
    filter: saturate(0.4);
    opacity: 0.6;
}

.foodSubmenu:hover img {
    transform: scale(1.3) rotate(-10deg);
    filter: drop-shadow(-10px 10px 10px rgba(0,0,0,0.4)) saturate(1);
    z-index: 9;
}
.putFoodHere {
    padding-left: 70px;
}
.foodGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.fooditems {
    background-color: #FFF;
    position: relative;
    padding: 15px;
    border-radius: 10px;
    height: 500px;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);   
    filter:saturate(0.7);
    transition: box-shadow 300ms ease, color 300ms ease, filter 300ms ease, height 300ms ease, width 300ms ease, opacity 300ms ease;
    
}

.fooditems:hover {
    box-shadow: 0 0 25px rgba(0,0,0,0.5);
    color: var(--rcol); 
    filter:saturate(1);
}

.fooditems.disabled, .fooditems.disabled:hover { 
    filter:saturate(1);
}
.fooditems.disabled *:not(.onlyavailable), .fooditems.disabled:hover *:not(.onlyavailable) {
    filter: saturate(0);
    opacity: 0.6;
}
.onlyavailable {
    position: absolute;
    color: #A00;
    text-align: center;
    top: 70px;
    width: 100%;
    z-index: 99;
    font-weight: bold;
    font-size: 1.5em;
    white-space: break-spaces;
    left: 0;
    line-height: 1;
}

.fooditems img {
    width: 100%;
    height: 256px;
    object-fit: contain;
    object-position: center center;
}
.foodprice {
    text-align: right;
    position: absolute;
    right: -7px;
    top: -7px;
    font-family: 'Impact';
    font-size: 1.5em;
    display: block;
    padding: 6px;
    background: var(--rcol);
    color: #FFF;
    border-radius: 5px;
}
.foodname {
    text-align: center;
    width: 100%;
    display: block;
    font-size: 1.2em;   
    font-family: 'Impact';
}
.orderfood {
    position: absolute;
    bottom: 15px;
    width: calc(100% - 30px);
    height: 40px;
    line-height: 40px;
    background-color: #AAA;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
    color: #FFF;
    transition: background-color 300ms ease;
}

.orderfood:hover {
    background-color:#777;
}
.foodDay {
    font-size: 9px;
    display: inline-block;
    margin-right: 2px;
    background-color: #DDD;
    padding: 0px 5px;
    border-radius: 5px;
}
.foodDay:hover{
    background-color: #444;
    color: #FFF;
}
.hideunavailable {
    position: absolute;
    left: 72px;
    top: -60px;
    height: 40px;
    width: 150px;
    border-radius: 5px;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    z-index: 9;
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 5px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;text-align: center;
    line-height: 40px;
    transition: background-color ease 100ms, color ease 100ms;
}

.showAvailable.hideunavailable {
    background-color: #666;
    color: #FFF;    
}
.showAvailable.hideunavailable:hover, .hideunavailable:hover {
    background-color: var(--rcol);
    color: #FFF;    
}
.putFoodHere .sortby {
    right: 13px;
    
}
.fooditems .numberModal {
    width: 100%;
    opacity: 0;
    transition: opacity 300ms ease;
}

.fooditems:hover .numberModal {
    opacity: 1;
}
.fooditems .formInput .upArrow {
    top: 30px;
    right: unset;
    left: 0;
}
.fooditems .formInput .downArrow {
    top: 30px;
    right: 0;
}
.fooditems .result {
    position: absolute;
    top: 50%;
    left:50%;
    translate: -50% 0;
    
}
.fooditems input[type="number"].marketingsize {
    -moz-appearance: textfield;
    width: 60%;
    margin-left: 20%;
    border: none;
    background-color: transparent;
    text-align: center;
        height: 62px;
}

.fooditems input[type="number"].marketingsize:focus {
    outline:none;
}

.fooditems.hideitems {
    opacity: 0.1;
}
.optionsButton {
    width: 30px;
    height: 30px;
    background-image: url(../images/options.png);
    background-position: center;
    background-size: contain;
    position: absolute;
    background-repeat: no-repeat;
    bottom: 185px;
    right: 15px;
    cursor: pointer;
    transition: filter 300ms ease, opacity 300ms ease;
    z-index: 9999;
}
.optionsButton:hover {
    filter: brightness(1.2);
    opacity: 0.7;
    transform: scale(1,-1);
}
.fooditems .options {
    position: absolute;
    width: calc(100% - 30px);
    height: 260px;
    background-color: #FFF;
    z-index: 999;
    bottom: 225px;
    left: 15px;
    display: none;
    border-radius: 5px;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.7);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px;
}

.foodVariant {
    display: block;
    cursor: pointer;
}
.foodVariant:hover  {
    font-weight: bold;
}

.foodVariant input {
    margin: 0 10px 0 0;
}
.shopHome {
    text-align: center;
    background-color: #FFF;
    position: relative;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);    
}
.shopHome h2 {
    font-weight: bold;
    font-size: 3em;
}
.shopHome strong {
    font-size: 2em;
    color: #900;
}

.shopHome em {
    color: #090;
}

.shopsettings {
    background-image: url("../images/cog.webp");
    width: 50px;
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 auto;
    position: relative;
    filter:drop-shadow(0 0 5px rgba(0,0,0,0.4));
    cursor: pointer;
    top: 0;
}

.shopuser {
    background-image: url("../images/usericon.webp");
    width: 50px;
    height: 50px;
    background-size: contain;
    left:calc(25% - 25px);
    background-repeat: no-repeat;
    position: absolute;
    filter:drop-shadow(0 0 5px rgba(0,0,0,0.4));
    cursor: pointer;
    top: 0;
}

.POSbutton {
    background-image: url("../images/POS.webp");
    width: 50px;
    height: 50px;
    background-size: contain;
    right:calc(25% - 25px);
    position: absolute;
    filter:drop-shadow(0 0 5px rgba(0,0,0,0.4));
    cursor: pointer;
    background-repeat: no-repeat;
    top: 0;
}

.shopsets {
    position: relative;
    margin: 50px 0;
}
.shopsettings:hover {
    animation: spin linear infinite 3000ms;
}
.shopuser:hover, .POSbutton:hover {
    animation: bop linear infinite 1000ms;
}
div.viewFoodCart {
    height: 65px;
    background-color: rgba(255, 255, 255, 0.8);
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    z-index: 99999999999;
    padding-top: 1px;
    backdrop-filter: blur(8px);
    text-align: center;    box-shadow: 0 0 35px rgba(0, 0, 0, 0.2);
    transition: opacity 300ms ease,  height 300ms ease;
}
div.viewFoodCart.showing {
    height: 100vh;
    background-color: rgba(205, 205, 205, 0.8);
    top: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
div.viewFoodCart .foodnewline {
    clear: both;
    line-height: 1;
    transform: scale(0.7);
    display: block;
    
}
div.viewFoodCart .foodnewline .button {
    text-align: center;
    margin: -6px 0;
    width: 165px;
}
.hiddenOrderBar {
    opacity: 0;
    pointer-events: none;
}
div.button.clearFoodCart {
    background-color: #AD0002;
}
div.button.cancelfoodorder {
    background-color: #AD0002;
    position: absolute;
    right: 15px;
    bottom: 13px;
    width: 59px !important;
    text-align: center;
    white-space: nowrap;
    padding: 15px 0;
    height: 54px;
}
.orderoptions {
    margin: 15px 0;
    border: 1px solid #999;
}
.orderoptions td {
    position: relative;
    padding: 20px;
}
.orderoptions td  .markpaid {
    bottom: 8px;
    left: 12px;
}
.orderoptions td  .markpaid + label {
    bottom: 0;
    left: 40px;
}
.POS h1 {
    width: 100%;
    text-align: center;
    color: #999;
    margin-top: 25vh;
    font-style: italic;
    border: none;
}
.orderfood.disabled {
    background-color: #EEE;
}
div.button.cancelfoodorder:before, div.button.cancelfoodorder:after {
    content: '';
    position: absolute;
    left:5px;
    top: 26px;
    display: block;
    width: 50px;
    height: 2px;
    background-color: #FFF;
    transform: rotate(45deg);   
    
}
div.button.cancelfoodorder:after {
    transform: rotate(-45deg);    
}
div.button.clearFoodCart:hover, div.button.cancelfoodorder:hover {
    background-color: #7C000F;
}
.closeFoodCart, .closePOS {
    position: sticky;
    top: 0;
    left: 100vw;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 999;
    background-color: rgb(255 255 255 / 70%);
    border-radius: 10px;
    transform: translate(30px, -30px);
}
.closeFoodCart {
    transform: translate(0, 0);
    
}
textarea.specialNotes {
   min-height: 50px;
}
div.specialNotes {
    border: 1px solid #000;
    padding: 5px;
    color: #000;
    border-radius: 10px;
    font-size: 20px;
    font-weight: bold;
    background-color: var(--lcol);
    margin: 13px 0;
}
.closeFoodCart:before, .closeFoodCart:after, .closePOS:after, .closePOS:before {
    position: absolute;
    content: '';
    display: block;
    height: 4px;
    width: 100%;
    background-color: #900;
    border-radius: 2px;
    transform: rotate(45deg);  
    top: 18px;
    left: 0;
}
.closeFoodCart:after, .closePOS:after {
    transform: rotate(-45deg);  
}

.closeFoodCart:hover:before, .closeFoodCart:hover:after, .closePOS:hover:after, .closePOS:hover:before  {
    background-color: #F00;
}
.foodcartPiece {
    background-color: #FFF;
    border-radius: 10px;
    padding: 10px;
    min-height: 100%;
    width: 100%;
    margin: 0;
    padding-bottom: 25px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
}
.foodCartitem {
    min-height: 115px;
    position: relative;
}
.foodCartitem img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    float: left;    
}
.foodCartitem > div {
   padding-left: 135px;   
}
.foodCartitem h4{
    white-space: nowrap;
    overflow: hidden;
}
.foodCartitem h4 span {
    position: absolute;
    text-align: right;
    right: 0;
    background-color: #FFF;
    padding-left: 15px;
}
.foodCartitem:not(:last-child){
    border-bottom: 1px solid var(--rcol);
    padding-bottom: 25px;
}

.foodcartPiece .button.half {
    text-align: center;
    height: 45px;
    line-height: 13px;
}
.foodCartitem .numberModal {
    position: absolute;
    left: 135px;
    width: 100px;
    top: 18px;
    text-align: center;
}
.foodCartitem .numberModal input[type="number"].marketingsize {
    text-align: center;
    font-size: 20px !important;
    border: none;
    position: absolute;
    left: 21px;
    background-color: transparent;
    height: 50px;
    top: 5px;
    width: 64px;
    overflow: visible !important;
}
.foodCartitem .numberModal.formInput .upArrow {
    top: 17px;
    left: 0;
    height: 30px;
}
.foodCartitem .numberModal.formInput .downArrow {    
    bottom: unset;
    top: 17px;
    height: 30px;
}

.delFoodItem {
    position: absolute;
    right: 0;
    top: 31px;
    width: 40px;
    height: 40px;
}
.whoDrop {    
    position: relative;
    width: 100%;
    height: 50px;
    z-index: 9;
    cursor: pointer;
    margin: 15px 0;
}
.whoDrop .showhide {
    display: none;
    position: absolute;
    box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.4);
    background-color: #FFF;
    translate: 0 -3px;
    width: calc(100% - 10px);
    left: 5px;
    border-radius: 6px;
    overflow-x: hidden;
    overflow-y: auto;
    height: 245px;
    padding: 10px;
}
.whoDrop .showhide strong {
    font-weight: bolder;
    display: block;
    color: #FFF;
    margin: 10px 0;
    background-color: #DDD;
    background: linear-gradient(#DDD, #CCC);
    padding: 5px;
    border-radius: 5px;
    text-shadow: 0 0 2px #000, 0 0 7px #000;
}
.whoDrop:before {
    content: attr(data-who);
    display: block;
    position: relative;
    height: 30px;
    margin: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    padding: 2px;
    text-align: right;
    background-color: #EEE;
    background: linear-gradient(0deg, #EEE, #FFF);
    pointer-events: none;
    font-weight: bold;
    top: 6px;
    left: 0;
}

.whoDrop:hover:before {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    background: linear-gradient(0deg, #DDD, #FFF);
    pointer-events: none;
}
.whoDrop:after {
    content: "Order for:";
    display: block;
    position: relative;
    height: 30px;
    margin: 5px;
    padding: 2px;
    text-align: left;
    pointer-events: none;
    top: -29px;
    z-index: 9;
}
.whoDrop input[type="radio"] {
    display: none;
}
.whoDrop input[type="radio"] + label {
    position: relative;
    clear: both;
    width: 100%;
}
.whoDrop input[type="radio"]:checked + label {
    font-weight: bold;
    color: var(--rcol);
    background-color: #DEFF;
    border-radius: 11px;
}
.whoDrop input[type="radio"] + label img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    display: inline;
    margin: 0 10px 0 0;
    filter: saturate(0.4);
    border-radius: 100%;
}
.whoDrop input[type="radio"]:checked + label img, .whoDrop input[type="radio"] + label:hover img {
    box-shadow: 0 0 26px var(--rcol), 0 0 7px #000;
    filter: saturate(1);
}
.POS, .staffOwe {
    position: fixed;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    backdrop-filter:blur(2px);
    z-index: 9999999999999999999999999999;
    display: none;
    padding: 50px;    
    overflow-x: hidden;
    overflow-y: auto;
}
.shopHomeButton {
    position: absolute;
    bottom: -80px;
    width: 100%;
    left: 0;
    background-color: #999;
    margin: 0;
    text-align: center;
}
.foodcards {
    position: relative;
    display: grid;
    gap:30px; 
    grid-template-columns: repeat(3, 1fr);
}
.foodCard {
    background-color: #FFF;
    border-radius: 8px;
    padding: 10px 20px 125px 20px;
    text-align: left;
    position: relative;
}
.foodCard h4 span{
    float: right;
    color: var(--rcol);
}
.foodCard h6 {
    margin: 6px 0;
    padding-bottom: 10px;
    text-align: right;
    padding-right: 20px;
    position: relative;
    color: var(--rcol);
}
.foodCard h6:after {
    width: 100%;
    left: 0;
}
.foodCard h6 img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    display: inline;
    margin: 0 10px 0 0;
    border-radius: 100%;
    box-shadow: 0 0 26px var(--rcol), 0 0 7px #000;
    position: absolute;
    left: -37px;
    z-index: 9;
    top: -37px;
}
.completefoodorder {
    width: calc(100% - 125px) !important;
    text-align: center;
    position: absolute;
    bottom: 13px;    
    padding: 15px 0;
    white-space: nowrap;
    margin-left: 0;
}

.acceptfoodorder {
    width: 100%;
    text-align: center;
    background-color: #FFF;
    color: var(--rcol);
}
.unnaccepted{
    filter: saturate(0.4);
    background-color:#888;
}
.unnaccepted .button.completefoodorder, .unnaccepted img, .unnaccepted h4, .unnaccepted h6{
    filter: brightness(0.7);
}
.unnaccepted h4, .unnaccepted h6{
    color: #000;
}
.whoOwePerson {
    color:#FFF;
    border-radius: 15px;
    transition: background-color 300ms ease, box-shadow 300ms ease;
    position: relative;
}
.whoOwePerson:hover, .whoOwePerson.MakingPayment {
    color:#DEF;
    background-color: #000;
    box-shadow:  0 0 11px #0FF, 0 0 35px #00F;
}
.whoOwePerson img {
    width: 65px;
    height: 65px;
    object-fit:cover;
    margin: 15px;
    border-radius: 10%;
    filter:saturate(0.7);    
}
.whoOwePerson:hover img {
    filter:saturate(1);    
}
strong.divis {
    font-weight: bolder;
    display: block;
    color: #FFF;
    margin: 10px 0;
    background-color: #DDD;
    background: linear-gradient(#4d8cb1, #3a556d);
    padding: 5px;
    border-radius: 5px;
    text-shadow: 0 0 2px #000, 0 0 7px #000;
}
.whoOwePerson .currentOwed {
    float: right;
    color: #ADF;
    font-weight: bold;
    font-size: 1.5em;
    margin: 33px 15px 0 0;  
}
.whoOwePerson .makePayment {
    opacity: 0;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.7);
    pointer-events: none;
    position: absolute;
    top: -80px;
    right: 24px;
    width: 40%;
    transition: opacity 400ms ease;
    transition-delay: 0ms;
    padding: 15px;
    border-radius: 12px;
    min-width: 300px;
    backdrop-filter: blur(2px);
}

.whoOwePerson .makePayment .R {
    color: #333;
    position: absolute;
    bottom: 29px;
    left: 23px;
    font-size: 1.5em;
}
.whoOwePerson.MakingPayment .makePayment, .whoOwePerson:hover .makePayment {
    pointer-events: all;
    opacity: 1;
    box-shadow: 0 0 11px #0FF, 0 0 35px #00F;
    transition-delay: 500ms;
}
.whoOwePerson .makePayment input {
    margin: 0;
    background: #FFF;
    background-color: #FFF;
    margin: 10px 5px 0 0;
    padding: 25px 0px 25px 35px;
    color: #333;
    font-size: 1.5em;
    width: calc(100% - 50px);
}
.goPay {
    width: 45px;
    margin: 0;
    background-color: #3472ff;
    background: linear-gradient(#4d8cb1, #3a556d);
    height: 52px;
    position: absolute;
    right: 10px;
    top: 48px;
    border-radius: 5px;
    cursor: pointer;
}
.goPay:hover,.goPay:active {
    background-color: #009;
}
.goPay:after {
    content: '';
    display: block;
    transform: rotate(45deg);
    border-right: 4px solid #FFF;
    border-top: 4px solid #FFF;
    position: absolute;
    right: 16px;
    top: 16px;
    height: 20px;
    width: 20px;
}
.searchStaffowed {
    position: sticky;
    top: -40px;
    height: auto;
    width: 100%;
    z-index: 999;
    background-color: var(--rcol);
    border: 1px solid #FFF;
    border-radius: 22px;
    padding-left: 11px;
    box-shadow: 0 0 20px 20px #000;
}
.searchStaffowed input {
    border:1px solid #FFF;
    background-color: #000;
    border-radius: 10px;
    width: calc(100% - 100px);
    display: inline-block;
    color: #FFF;
    height: 52px;
}
.searchStaffowed input:focus {
    color: #000;
}
.searchStaffowed div.button {
    display: inline-block;
}



.searchStaffdropdown {
    position: absolute;
    top: -33px;
    height: auto;
    width: calc(100% - 10px);
    margin-left: 5px;
    background-color: #FFF;
    border-radius: 22px 22px 0 0;
    padding-left: 11px;
    box-shadow: 0 -3px 17px rgba(0, 0, 0, 0.4);
    display: none;
    z-index: 99;
}
.searchStaffdropdown input {
    background-color: #EEE;
    border-radius: 10px;
    width: calc(100% - 100px);
    display: inline-block;
    color: #333;
    height: 52px;
}
.searchStaffdropdown input:focus {
    color: #000;
}
.searchStaffdropdown div.button {
    display: inline-block;
}
.expiredOrder {
    position: absolute;
    color: #FFF;
    background-color: #F03;
    text-align: center;
    padding: 5px;
    left: -37px;
    top: 46px;
    transform: rotate(-45deg);
    pointer-events: none;
   z-index: 9;
}

.expiredOrder:before, .expiredOrder:after {
    position: absolute;
    content: '';
    top: 0;
    border-bottom: 34px solid #F03;
}
.expiredOrder:before {
    border-left: 34px solid transparent;
    left: -33px;
}
.expiredOrder:after {
    border-right: 34px solid transparent;
    right: -33px;
}
.markpaid {
    position: absolute;
    bottom: 98px;
    width: 22px;
    height: 22px;
}
.markpaid + label {
    position: absolute;
    bottom: 90px;
    left: 50px;
}
.navyOrderButton {
    background: linear-gradient(#319cd7, #373a99);
    padding: 10px;
    position: relative;
    z-index: 9;
    border-radius: 10px;
    width: 62px;
    margin: 20px;
    color: #FFF;
}
.navyOrders {
    margin-top: 30px;
    display: grid;
    gap:15px;
    grid-template-columns: repeat(3, 1fr);
}
.otherOrder {
    background-color: #0f2439;
    padding: 0 15px 40px 15px;
    border-radius: 12px;
    color: #FFF;
    position: relative;
}
.otherOrder h4 {  
    #85cbff
}
.otherOrder h4 em {
    float: right;
    font-size: 12px;    
}
.otherOrder span {
    position: absolute;
    bottom: 2px;
    background: linear-gradient(#001329, #001439);
    width: 100%;
    left: 0;
    height: 38px;
    border-radius: 0 0 13px 13px;
    line-height: 38px;
    text-align: center;
    font-size: 1.2em;
}
.navymarkPaid {
    position: absolute;
    inset: 15px;
    background: linear-gradient(rgba(55, 175, 255, 0.4), rgb(0 79 163 / 70%));
    text-align: center;
    padding: 10px;
    border-radius: 11px;
    box-shadow: 0 0 15px #000;
    backdrop-filter: blur(4px);
    display: none;
}
.navymarkPaid .markPaid {
    background: linear-gradient(#7A0,#090);
}
.navymarkPaid .notMarkPaid {
    background: linear-gradient(#A00,#900);
}
.navymarkPaid .markPaid:hover, .navymarkPaid .notMarkPaid:hover, .navyOrderButton:hover {
    filter: brightness(1.1);
}
.navymarkPaid .markPaid:active, .navymarkPaid .notMarkPaid:active, .navyOrderButton:active {
    filter: brightness(0.7);
}

.unavailable {
    cursor: not-allowed;  
}
.unavailable:not(.questiontag, form):after, .unavailable.questiontag:before {
    content: 'You do not have permission to order for someone else';
    display: block;
    position: absolute;
    border-radius: 10px;
    background-color: rgba(255, 255, 200, 0.5);
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.4);
    padding: 10px;
    top: 10px;
    width: 70%;
    left: 10%;
    z-index: 99;
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 300ms ease;
    pointer-events: none;
}
.signatureForm.unavailable:after {
    width: 245px;    
}
.unavailable:hover:after,.unavailable.questiontag:hover:before {
    opacity: 1;
}
.unavailable select {
    pointer-events: none;
}
.avb {
    width: 100%;
    position: relative;
}

.unavailable .whoDrop {
    pointer-events: none;
}
.shopHistory {
    text-align: left;
    position: relative;
    padding: 0 15px;
    border: 1px solid #aaa;
    border-radius: 5px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 500px;
    background-color: #AAA;
}
.shopHistory ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    animation: fadeIn forwards 1000ms ease;
}

.shopHistory ul li {
    padding: 15px;
    margin: 15px 0;
    display: block;
    background-color: #FFF;
    background: linear-gradient(90deg, #DEF 1%, #FFF 8%);
    border-radius: 10px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
    transition: transform 300ms ease, filter 300ms ease;
    overflow: hidden;
    position: relative;
}
.shopHistory ul li.Debit {
    background: linear-gradient(90deg, #FDD 1%, #FFF 8%);
}

.shopHistory ul li.Debit div.turn {
    color: #900;
}
.shopHistory ul li.Credit {
    background: linear-gradient(90deg, #DFD 1%, #FFF 8%);
}
.shopHistory ul li.Credit div.turn {
    color: #090;
}
.shopHistory ul li.liOrdercancelled {
    background: linear-gradient(90deg, #CCC 1%, #FFF 8%);
    text-decoration: line-through;
    opacity: 0.7;
}
.shopHistory ul li.liOrdercancelled  em strong {
    text-decoration: line-through;
}
.shopHistory ul li.liOrdercancelled div.turn {
    color: #333;
}
.shopHistory ul li.liOrderordered {
    background: linear-gradient(90deg, #DFF 1%, #FFF 8%);
}
.shopHistory ul li.liOrderaccepted {
    background: linear-gradient(90deg, #DFE 1%, #FFF 8%);
}
.shopHistory ul li.liOrderaccepted div.turn {
    color: #090;
}

.shopHistory ul li em {
    margin: 0 0 15px 0;
    display: block;
    color: #888;
    border-bottom: 1px solid #EEE;
}
.shopHistory ul li em strong {
    color: #000;
    float: right;
    font-style: normal;
}

.shopHistory ul li span {
    display: inline-block;
    padding: 3px;
    background-color: #DEF;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
}
.shopHistory ul li span:hover {
    background-color: #ACF;
}
.shopHistory ul li span:active {
    filter: brightness(0.8);
}

.shopHistory ul:hover li:not(:hover) {
    transform: scale(0.98);
    filter: brightness(0.9);
}
.shopHistory ul li:hover {
    transform: scale(1.01);
    filter: brightness(1);
}
.shopHistory ul li > div:not(.turn) {
    padding-left: 30px;
}
.shopHistory ul li div.turn {
    text-align: center;
    transform: rotate(-90deg);
    position: absolute;
    left: calc(-50% + 10px);
    top: 50%;
    color: var(--rcol);
    width: 100%;
    translate: 0 -50%;
}
.orderHistoryPerson {
    position: relative;
}
.orderHistoryPerson:after {
    content: '';
    background-image: url(../images/pdf-jpg-word-icons.png);
    position: absolute;
    top: -28px;
    right: 0;
    opacity: 0;
    z-index: 2;
    width: 30px;
    height: 30px;
    display: block;
    background-size: auto 100%;
    background-position: 53% 0;
    transition: opacity 300ms ease;
}
.orderHistoryPerson:hover:after {
    opacity: 1;
}
.paymentToExcel, .showExportDialog {
    background-image: url(../images/pdf-jpg-word-icons.png);
    position: absolute;
    top: 70px;
    right: 15px;
    z-index: 2;
    width: 40px;
    height: 40px;
    display: block;
    background-size: auto 100%;
    background-position: 53% 0;
    filter: brightness(0.4);
    transition: filter 300ms ease;
    cursor: pointer;
}
.paymentToExcel:hover, .showExportDialog:hover {
    filter: brightness(1);
}
.showExportDialog {
   top: -50px; 
}
.exportDriverReportToExcel.showExportDialog {
    top: 90px;
}
.exportDriverReportToExcel.showExportDialog + .ExportDialog {
    top: 127px;
}
.ExportDialog:before {
    content: 'Select from Date';
}
.ExportDialog {
    position: absolute;
    background-color: #FFF;
    border-radius: 15px;
    padding: 15px;
    z-index: 9;
    top: -13px;   
    box-shadow: 0 0 15px #000;
    display: none;
}
#isequipmentcheck {
    display: inline-block;
    width: 50px;
    height: 40px;
    margin: 0;
    translate: -11px 15px;
}
.isequipmentcheck {
    position: absolute;
    display: block;
    opacity: 0;
    left: 10px;
    top: -26px;
    background-color: #FFE;
    border-radius: 5px;
    padding: 5px;
    width: 201px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    filter: drop-shadow(-4px 8px 15px rgba(0, 0, 0, 0.4));
    transition: opacity 300ms ease;
}
.isequipmentcheck:after {
    content: '';
    display: block;
    border-right: 10px solid transparent;
    border-top: 19px solid #FFE;
    top: 34px;
    left: 10px;
    position: absolute;
}
#isequipmentcheck:hover + .isequipmentcheck {
    opacity: 1;
    
}
.shoplist {
    font-family:arial; 
    border:3px solid #000;
    color: #FFF;
}
.shoplist tr th {
    background-color:#035;
    text-align: center;
}
.shoplist tr.mainshopheaders th {
    background-color: #999;
}
.shoplist tr td {
    transition: background-color 300ms ease; color 300ms ease;
}
.shoplist tr:hover td {
    background-color:var(--dcol2);
}

.shoplist tr td input:not([type="checkbox"], [type="file"]) {
    border: none;
    background: transparent;
    width: calc(100% - 1em); /* Adjust 1em if you need more or less space */
    box-sizing: border-box;
    color:#FFF;
}

.shoplist tr td input::placeholder {
    color: rgba(255,255,255,0.2);
}
.shoplist tr td select {
    color: #FFF;
    background: linear-gradient(transparent, rgba(0,0,0,0.2));
    border: 1px solid #666; /* Border color of the select */
    padding: 5px; /* Padding inside the select */
    border-radius: 4px;
}
.shoplist tr td input:focus {
    background: transparent;
    outline: 1px solid #FFF;
}
.shoplist tr td select:focus {
    outline: none; /* Remove default focus outline */
    border-color: #999; /* Change border color on focus */
}
.shoplist tr td select optgroup {
    color: var(--rcol); /* Text color of options */
    background: white; /* Background color of options */
}
.shoplist tr td select option {
    color: black; /* Text color of options */
    background: white; /* Background color of options */
}
.shoplist tr td input[type="checkbox"] {
    display: none;
}
.shoplist tr td input[type="checkbox"]+ label {
    display: inline-block;
    font-size: 20px;
    padding: 0 5px;
    height: 24px;
    color: var(--rcol);
    font-weight: 100;
    width: auto;
    text-align: center;
    opacity: 0.6;
    transition: font-size 300ms ease, color 300ms ease, font-weight 300ms ease, opacity 300ms ease;
}
.shoplist tr td input[type="checkbox"]:checked + label {
    color: #FFF;
    font-weight: bold;
    font-size: 26px;
    opacity: 1;
}
.shoplist tr td input[type="checkbox"] + label:hover {
    transform: scale(1.1);
    text-shadow: 0 0 5px #FFF;
}

.shoplist tr:hover td input[type="checkbox"]:checked + label {
    color: #FFF;
}
label.newshopimg, label.newshopimg img, label.newshopimg input {
    width: 50px;
    height: 50px;
    position: relative;
    object-fit: contain;
    cursor: pointer;
}
label.newshopimg input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    cursor: pointer;
    opacity: 0;
}
.addnewshopitembutton {
    width: 150px;
    border-radius: 5px;
    padding: 3px;
    text-align: center;
    position: absolute;
    left: calc(50% - 75px);
     top: 0;
}
.predict {
    text-align: center;
    position: relative;
}
.predict .col-6 {
    text-align: center;
    position: relative;
}
.predict h3 {
    text-align: center;
}
.predict h1 {
    text-align: center;
    font-family: "Impact";
    font-size: 5rem;
}
.teamImgs {
    overflow: hidden;
    border: 6px solid #D4B137;
    border-radius: 100%;
    width: 300px;
    height: 300px;
    margin: auto;
    position: relative;
    box-shadow: -10px 10px 25px #000;
    
}
.teamImgs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vs {
    position: absolute;
    top: 50%;
    right: -10px;
    font-size: 5rem;
    color: #dfdfdf;
    text-shadow: -4px 5px 0.1em #000, 0px 1px 0.15em #000;
    font-weight: bold;
    font-style: italic;
}
.predict input[type="number"] {
    font-weight: bold;
    font-size: 5rem;
    border-radius: 20px;
    background-color: #FFF;
    text-align: center;
    height: auto;
    width: 175px;
    z-index: 999;
    position: relative;
    padding: 0.11em 0 0.1em 17px;
    color: var(--rcol);
    font-family: "Impact";
    box-shadow: -10px 10px 25px #000;
}
.predict input[type="submit"] {
    width: 26%;
    height: 40px;
    position: absolute;
    left: 36%;
    bottom: 19px;
    border-radius: 40px;
}
.whovoted {
    padding:10px; 
    border:1px solid; 
    border-radius:5px;
    margin-top: 10px;
}
.whovoted:hover {
    background-color: #FFF;
}
.whovoted span {
    float: right;
    text-align: right;
    font-weight: bold;
}
input.sizeStock {
    float: right;
    width: 50px;
    height: 20px;
    text-align: center;
}
.mapPos {
    position: relative;
}
.mapPosMain {
    position: relative;
}
.mapPosMain img.premesis {
    width: 100%;    
}
.officePos {
    display: none;
    position: absolute;
    width: fit-content;
    padding: 0;
    background-color: #FFF;
    border: 8px solid #ffffff;
    border-radius: 5px;
    top: 0;
    z-index: 9;
    box-shadow: -5px 7px 21px #000, 0 0 0 1px #777;
}
.officePos img {
    max-width: 100%;
    max-height: 210px;
    object-fit: contain;
}
.officePoscloser {
    position: absolute;
    top: -10px;
    right: -10px;
    transform: scale(0.5);
}
.posDot{
    position: absolute;
    top: -100000%;
    left: -100000%;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #F00;
    animation: radarBlip infinite 1500ms ease-out;
    pointer-events: none;
    margin: -5px 0 0 -5px;
}
@keyframes radarBlip {
    0% { outline:0px solid rgba(255,0,0,1);}
    50% {outline:30px solid rgba(255,0,0,0);}
    100% {outline:30px solid rgba(255,0,0,0);}
}
.upperSalesIcon,
.lowerSalesIcon,
.upperAdminIcon,
.lowerAdminIcon{
    position: absolute;
    width: 50px;
    height: 50px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    display: none;
    cursor: pointer;
    filter: brightness(0.8);
    transform:scale(1);
    transition: filter 300ms ease, transform 300ms ease;
}

.upperSalesIcon{
    background-image: url("../images/upstairs.webp");
    top: 6%;
    left: 58%;
}
.lowerSalesIcon{
    background-image: url("../images/downstairs.webp");
    top: 6%;
    left: 58%;
    margin-left: 53px;
}
.upperAdminIcon{
    background-image: url("../images/upstairs.webp");
    top: 20%;
    left: 53%;
}
.lowerAdminIcon{
    background-image: url("../images/downstairs.webp");
    top: 20%;
    left: 53%;
    margin-left: 53px;
}

.contents.bigger .upperSalesIcon{
    top: 16%;
    left: 70%;
}
.contents.bigger .lowerSalesIcon{
    top: 16%;
    left: 70%;
}
.contents.bigger .upperAdminIcon{
    top: 32%;
    left: 60%;
}
.contents.bigger .lowerAdminIcon{
    top: 32%;
    left: 60%;
}

.upperSalesIcon:hover,
.lowerSalesIcon:hover,
.upperAdminIcon:hover,
.lowerAdminIcon:hover{
    filter: brightness(1);
    transform:scale(1.1);
}
.extraInfo .mapPosMain {
    cursor: pointer;
    transition: transform 300ms ease;
}
.extraInfo .mapPosMain:hover {
    transform: scale(0.9);
}
.extraInfo .officePos {
   bottom: 0;
    top: unset;
    scale:1.7;
}

.partsHomeImg {
    max-width: 100%;
    position: relative;
    z-index: 2;
}
.partsHome {
    text-align: left;
    background: linear-gradient(transparent, var(--rcol));
    padding: 150px 30px 30px 30px;
    border-radius: 10px;
    position: relative;
    z-index: 1;
    margin: -135px 0 0 0;
}
.partsHome a {
    color: #FFF;
    cursor: default;
}
.partsHome a:hover {
    text-decoration: none;
}
.partsHome a img {
    cursor: pointer;
    transition: transform ease 300ms;
    float: left;
    height: 120px;
    margin: -25px 0 0 -26px;
}
.partsHome a img:hover {
    transform: rotate(5deg) scale(1.1);
}
.aftersalesList {
    margin-top: 3px;
    font-weight: bold;
    font-size: 18px;
    position: relative;
}
.aftersalesList img {
    width: 100%;
    border-radius: 10px;
}
.partsarticle div {
    position: relative;
    z-index: 2;
}
.partsarticle img.homeFleet {
    width: 100vw;
    position: absolute;
    left: 50%;
    margin: 0 0 -100px -50vw;
    bottom: 0;
    z-index: 1;
    opacity: 0.2;
}
.partsHeadings{
    color: #FFF;
    text-shadow: 0 0 15px var(--rcol), 0 0 10px var(--rcol), 0 0 5px var(--rcol);
    background: rgba(var(--rgbcol), 0.7);
    border-radius: 10px;
    margin: 0.5em 0;
    padding: 10px;
}
.showpplMap {
    cursor: pointer;
    height: 30px;
    margin-left: 14px;
}
.searchResult .mapPosMain {
    width: 500px;  
    display: none;
    cursor: pointer;
}
.putRandHere:not(:empty) {
    border: 1px solid #333;
    border-radius: 10px;
    background-color: var(--vlcol);
    padding: 10px;
    text-align: center;
    margin: 15px 0;
    font-size: 18px;
}
.showAllTuckshopHistory {
    text-align: center;
    color: #FFF;
    cursor: pointer;
    padding: 15px;
    text-align: center;
    border:1px solid #FFF;
    border-radius: 10px;
    margin-bottom: 15px;transition:
        background-color ease 300ms;
}

.showAllTuckshopHistory:hover {
    background-color: #DDD;
    color: #333;
}
.shopHistory .spinner {
    position: relative;
    margin: 30px 0;
    border-top: 4px #FFF solid;
}
.reportDownload {
    width: 100%;
    overflow: hidden;
    text-align: center;
    display: block;
    padding-top: 11px;
}
.downloadquestiontag.questiontag {
    width: 0;
    padding: 0;
    border: none;
    position: absolute;
    z-index: 9;
    transition: width 300ms ease;
}

.downloadquestiontag.questiontag .staywide {
    width: 475px;
    white-space: nowrap;   
    
}
.downloadquestiontag.questiontag:after {
    cursor: pointer;
}

.downloadquestiontag.questiontag.show {
    width: 525px;
    padding: 20px;
    border: 1px solid #AAA;    
}

.closethistag {
    position: absolute;
    top: 1px;
    right: 7px;
    cursor: pointer;
    display: none;
}
.downloadquestiontag.questiontag.show .closethistag {
    display: block;
}
.reportentries, .todoentries {
    position: relative;
    border: 1px solid #AAA;
    border-radius: 10px;
    padding: 0 20px 20px 20px;
    background: linear-gradient(var(--lcol) 0%, #FAFAFA 23%);
}
.reportentries h4, .todoentries h4 {
    color: #FFF;
    text-shadow: 0 0 7px #03A;
}
.reportentries h4 input[type="text"].datepicker, .todoentries h4 input[type="text"].datepicker {
    color: #FFF;
    border: none;
    outline: none !important;
    width: auto;
    background-color: transparent;
    text-shadow: 0 0 7px #03A;
}
.reportentries h4 input[type="text"].datepicker:hover, .todoentries h4 input[type="text"].datepicker:hover {
    text-shadow: 0 0 0px #03A;
}
.reportItem, .todoItem {
    position: relative;
    
}
.reportItem input[type="checkbox"], .todoItem input[type="checkbox"]{
    margin-left: 5px;
    
}
.reportItem input[type="checkbox"] + label, .todoItem input[type="checkbox"] + label {
    display: inline-block;
    width: calc(100% - 45px);
    padding: 5px;
    border-radius: 8px;    
    cursor: text;
}

.reportItem:hover input[type="checkbox"] + label, .todoItem:hover input[type="checkbox"] + label {
    background-color: #DDD;
}
.reportItem input[type="checkbox"] + label:focus, .todoItem input[type="checkbox"] + label:focus {
    background-color: #FFF !important;
}
.reportItem input[type="checkbox"]:checked + label {
    text-decoration: line-through;
}
.todoItem input[type="checkbox"]:not(.cross):checked + label {
    text-decoration: line-through;
    padding-left: 31px;
}

.todoItem input[type="checkbox"].cross:checked {
    opacity: 0;
}
.todoItem input[type="checkbox"].cross:checked +label {
    position: relative;
}


.todoItem input[type="checkbox"].cross + label {
    text-decoration: none; /* No line-through for incomplete */
    color: red; /* Optional: to visually indicate the cross state */
}
.todoItem input[type="checkbox"].cross:checked + label::before {
    content: "✗";
    font-weight: bold;
    color: #FFF;
    display: block;
    line-height: 12px;
    text-align: left;
    position: absolute;
    left: -18px;
    top: 8px;
    height: 16px;
    width: 15px;
    border-radius: 3px;
    background-color: #900;
    font-size: 13px;
    text-align: center;
    padding: 1px;
    pointer-events: none;
}
.todoItem input[type="checkbox"] + label::after {
    content: attr(data-date);
    pointer-events: none;
    font-style: italic;
    background-color: #CFC;
    margin-left: 8px;
    padding: 0 5px 0 3px;
    border-radius: 5px;
    color: #333;
}
.todoItem input[type="checkbox"] + label.todoDatePassed:after  {
    background-color: #C00;
    color: #FFF;
}
.todoItem input[type="checkbox"] + label.todoDateToday:after  {
    background-color: #FFE35A;
    color: #333;
}
.newEntry {
    border-top: 1px solid #999;
    position: relative;
    margin-top: 30px;
    padding-top: 20px;
}
.newEntry input[type="text"]{
    border-top: 1px solid #999;
}
.showops {
    opacity: 0;
    background-color: #EEE; 
    text-align: center;
    line-height: 10px;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    position: absolute;
    top: 7px;
    right: 7px;
    cursor: pointer;
}

.reportItem:hover .showops, .todoItem:hover .showops {
    opacity: 1;
}
.showops:hover  {
    background-color: #fff;
}
.opts {
    display: none;
    position: absolute;
    top: 30px;
    right: -5px;
    padding: 10px;
    background-color: #FFF;
    border-radius: 10px;
    filter: drop-shadow(-4px 4px 3px rgba(0, 0, 0, 0.2)) drop-shadow(0px 0px 1px #AAA);
    z-index: 999;
}
.opts:before {
    content: '';
    position: absolute;
    top: -12px;
    right: 17px;
    border-bottom: 12px solid #FFF;
    border-right: 7px solid transparent;
    border-left: 3px solid transparent;
    display: block;
}
.opts div {
    padding: 3px;
    cursor: pointer;
    border-radius: 5px;
}
.opts div:hover {
    background-color: var(--lcol);
    color: #FFF;
}
.clickblocker {
    height: 100%;
    position: absolute;
    width: 500px;
    left: 100%;
}
.feedb, .des {
    display: none;
    border: 1px solid #AAA;
    border-radius: 10px;
    padding: 20px;
    position: relative;   
    margin: 0 0 15px 28px; 
    cursor: text;
    color: #000;
}
.des {
    border: none;
    background-color: #DDD;
    box-shadow: inset -5px 5px 12px rgba(0, 0, 0, 0.4);
    margin: 0 0 15px 28px;
    text-shadow: 0 0 5px #FFF;
}
.feedb {
    background-color: #FFF;
}
.des:before, .feedb:before {
    content: '';
    border-left: 1px solid #999;
    border-bottom: 1px solid #999;
    width: 20px;
    height: 40px;
    position: absolute;
    display: block;
    left: -28px;
    top: -6px;
}
.feedb:before{
    height: 80px;
    top: -45px;
    left: -29px;
}
#newEntry {
    min-height: 35px;
    overflow: hidden;
    resize: none;
    display: inline-block;
    width: calc(100% - 50px);
}
.newEntry  button {
    position: absolute;
    top: 20px;
    right: 0;
    width: 40px;
}

.newEntry input.datepicker {
    width: 190px;
    display: inline-block;
    float: left;
    margin-right: 10px;
}
#newTodoEntry {
    min-height: 35px;
    overflow: hidden;
    resize: none;
    display: inline-block;
    width: calc(100% - 250px);
}
.des:empty:after, .feedb:empty:after {
    content:'Description for this item';
    position: absolute;
    pointer-events: none;
    color: #999;
    text-shadow: -1px 1px 1px #FFF;
}
.feedb:empty:after {
    content:'Feedback';
}
.reportItem .handle, .todoItem .handle  {
    position: relative;
    width: 15px;
    height: 14px;
    border-top: 2px solid #999;
    border-bottom: 2px solid #999;
    cursor: grab;
    display: inline-block;
}
.reportItem .handle:after, .todoItem .handle:after {
    display: block;
    content: '';
    position: absolute;
    top: 4px;
    left: 0;
    width: 15px;
    height: 2px;
    border-top: 2px solid #999;
}
.reportItem .handle:active, .todoItem .handle:active {
    cursor: grabbing;
}
select.changeReportPerson, select.changeToDoPerson {
    display: inline-block;
    width: auto;
    background: none;
    border: none;
    color: #FFF;
    text-shadow: 0 0 7px #03A;
    font-weight: bold;
    padding: 0;
}
select.changeReportPerson:hover, select.changeToDoPerson:hover {
    background-color: none;
    border-color: none;
    color: #FFF;
    text-shadow: 0 0 0px #03A;
}
select.changeReportPerson:focus, select.changeToDoPerson:focus {
    background-color: #FFF;
    border-color: none;
    color: #333;
    text-shadow: 0 0 0px #03A;
    outline: none;
}

.actionNotice {
    position: fixed;
    z-index: 999999999999999999999999999999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(3px);
    color: #DEF;
    text-shadow: 0 0 25px #09F, 0 0 15px #09F, 0 0 5px #EFF;
    font-size: 4em;
    text-align: center;
    padding-top: 40vh;
    display: none;
}
.catSortItem {
    padding:5px !important;
    border-radius: 13px;;
    
}
.catSortItem:hover .uploadBrochure {
     box-shadow: 0 0 12px rgba(0, 0, 0, 0.7);
    
}
.uploadBrochure {
    display: block;
    background-color: #FFF;
    margin: 10px 0 0 0;
    border-radius: 8px;
    overflow: hidden;
    padding: 11px;
    position: relative;
}

.uploadBrochure:before {
    content: '';
    display: block;
    position: absolute;
    top: -25px;
    left: 25%;
    width: 50%;
    height: 25px;
    background-color: #FFF;
    
}
.uploadBrochure input[type="submit"]{
    width: calc(100% - 45px);
}
.file-preview {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.file-preview img {
    max-width: 100px;
    max-height: 100px;
    margin-right: 10px;
}
.file-preview .file-info {
    display: block;
    text-align: center;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
}
.brochureInput {
    display: none;
}
.file-upload-label {
    cursor: pointer;
    color: var(--rcol);
    font-size: 33px;
    display: inline-block;
    translate: 0 6px;
}
.file-upload-label:hover {
    color: var(--dcol);
}
.file-upload-label i {
    margin-right: 8px; /* Adds spacing between icon and text */
}
.file-preview .file-info .fas {
    margin-right: 8px;
    font-size: 18px;
}
.savePoints {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}
td[data-point] {
    position: relative;
}
.pointsTable span[contenteditable] {
    padding: 3px 5px;
    width: calc(100% - 15px);
    display: block;
    cursor: text;
    text-align: center;
}
.pointsTable span[contenteditable]:focus, .pointsTable span[contenteditable]:hover {
    background-color: #FFF;
}
.pointUp , .pointDown {
    position: absolute;
    width: 11px;
    border-bottom: 11px solid #CCC;
    border-left:5px solid transparent;
    border-right:5px solid transparent;  
    right: 5px;
    cursor: pointer;
}

.pointUp:hover , .pointDown:hover {
    border-bottom: 11px solid #999;
}

.pointUp {
    top: 5px;    
}
.pointDown {
    bottom: 5px;
    transform: rotate(180deg);    
}
.pointsTable {
    border:none;
    border-color: #999;
}
.pointsTable td{
    height: 46px;
}
.pointTotal, .allPointsTotal {
    font-weight: bold;
}
.pts {
    color: #CCC;
    font-style: italic;
    cursor: not-allowed
}
.silentSave {
    width: calc(100% - 10px);
    padding: 8px;
    margin: 0 0 0 6px;
    text-align: center;
}
.AdvItm {
    border: 1px solid #999;
    border-radius: 5px;
    padding: 4px;
    width: 100%;
    margin-top: 5px;
    height: 37px;
    transition: height 300ms ease;
    overflow: clip;
    position: relative;
}
.AdvItm.show {
    height: auto;
    transition: height 300ms ease;
}

.AdvItm h5 {
    cursor:pointer;
}
.AdvItm h5:hover {
    color: var(--rcol);
}
.AdvItm .del {
    position: absolute;
    right: 19px;
    top: 60px;
    transition: top 300ms ease;
}
.AdvItm.show  .del {
    top: 10px;
    
}
.contactQR {
    width:100%;
}
.Reportbuttons {    
    position: relative;
    padding-left: 30px;
}
.Reportbuttons > div {
    height: 40px;
    line-height: 40px;
    display: inline-block;
    width: 50%;
    max-width: 250px;  
    cursor: pointer;
    text-align: center;
    position: relative;
    text-align: center;
    background-color: #EEE;
    border: 1px solid #999;
    z-index: 1;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    transition: all 300ms ease;
}
.Reportbuttons > div.currentReport {
    background-color: var(--lcol);
    z-index: 9;
    box-shadow: 0 10px 0 0px var(--lcol), 0 0 5px 3px rgba(0, 0, 0, 0.3);
}

.Reportbuttons > div:hover{ 
    color: #000;
    box-shadow:inset 0 -17px 9px #EEE,  inset 0 14px 21px #FFF;
}
.Reportbuttons > div:hover.currentReport { 
    
    box-shadow:0 10px 0 0px var(--lcol), 0 0 5px 3px rgba(0, 0, 0, 0.3), inset 0 -17px 9px var(--lcol),  inset 0 14px 21px #FFF;
}
.hideTodo {
    cursor: pointer;
    width: 26px;
    height: 15px;
    border-radius: 50%;
    position: absolute;
    background-color: #FFF;
    border: 1px solid #999;
    display: none;
    overflow: hidden;
    transform-origin: center;
    z-index: 9;
    left: 44px;
    top: 10px;
}
.hideTodo:hover {
    transform-origin: center;
    animation: blinking 6s infinite ease;
    /*animation-delay: 1s;*/
}
@keyframes blinking {
  0% {
    transform: scale(1, 1);
  }
  5% {
    transform: scale(1, 0.1); /* Scales along the rotated "vertical" */
  }
  10% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}
.hideTodo:before {
    position: absolute;
    top: 2px;
    left: 7px;
    width: 10px;
    height: 10px;
    border-radius: 6px;
    display: block;
    content: '';
    border: 1px solid #999;
    background-color: #888;
}
.hideTodo:after {
    position: absolute;
    top: 6px;
    left: 11px;
    width: 2px;
    height: 2px;
    border-radius: 6px;
    display: block;
    content: '';
    background-color: #000;
}
.hideTodo:hover:after, .hideTodo:hover:before {
    animation: leftRight 6s infinite ease;    
    /*animation-delay: 1s;*/
}

@keyframes leftRight {
    
  0% { transform: scale(1, 1); translate: 0 0;}
  5% { transform: scale(1, 2); }
  10% { transform: scale(1, 1); }
  25% { translate: -5px 0;}  
  50% {  translate: 5px 0;}
  75% { translate: 0 0;}  
  100% { transform: scale(1, 1);}
}

.links-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.link-card {
  width: 300px;
  padding: 20px;
  background-color: var(--dcol);
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin: 20px auto;
    box-shadow: 0 0 15px #000;
}

.link-card h2 {
    color: var(--rcol);
    font-weight: bold;
    margin-bottom: 20px;
}
.link-card img, .link-card i {
    height: 57px;
    background-color: #261f17;
    object-fit: contain;
    margin: -50px auto 10px auto;
    border-radius: 10px;
    padding: 8px;
    border: 2px solid var(--dcol);
    box-shadow: 0 0 15px #000;
}
 .link-card i {
    font-size: 41px;
    translate: 0 -20px;
    margin-bottom: 0;
    padding-top: 6px;
}
.prod-grid.row {
    margin-right: 0px;
    margin-left: 0px;
    justify-content: center;
    row-gap: 100px;
}
.prod-card {
    /*background-color: var(--dcol);*/
    border-radius: 10px;
    text-align: center;
    padding: 15px;
    transition: background-color 500ms ease;
    position: relative;
}
.prod-card em {
    margin: 30px 0 10px 0;
    color: rgba(var(--rgbcol), 0.4);
    display: block;
    font-size: 1.6em;
    position: absolute;
    z-index: 2;
    bottom: 58px;
    width: 100%;
}

.prod-card em {
}
.prod-card h4 {
    margin-top: 0;
    position: absolute;
    bottom: 15px;
}
.prod-card a {
    position: relative;
    z-index: 2;
    border-radius: 10px;
    border: 2px solid var(--rcol);
    display: block;
    width: 100%;
    height: 100%;
    padding-bottom: 69px;
}
.prod-card .button {
    position: absolute;
    bottom: -33px;
    left: 50%;
    translate: -50% 0;
    transition: box-shadow 500ms ease;
}
.prod-card:hover .button {
    box-shadow: 0 1px 10px 5px #423527;
}
.prod-card:after {
    content: '';
    display: block;
    background: url(../images/bottom_grunge.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom left;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 100%;
    position: absolute;
    z-index: 1;
}
.prod-card:hover {
    box-shadow: 0 0 15px #000;
    background-color: var(--dcol);
    box-shadow: inset 0 0 110px var(--dcol2);
}
.prod-card:hover:after {
    opacity: 0.2;
}
.prod-card img.product-image {
    object-fit: contain;
    aspect-ratio: 1 / 1;
    width: 100%;
    padding: 5px;
}
.prod-card img.cat-image {
    border-radius: 7px 7px 0 0;
}
.productSummery {
    
}
.productSummery h2 {
    font-size: 5rem;
    font-family: "IMPACT";
    color: var(--rcol);
}
.productSummery em {
    display: block;
    border-bottom: 2px solid var(--rcol);
    font-size: 1.5em;
    padding-bottom: 10px;
}
.proSummery {
    line-height: 1.2;
    margin: 36px 0;
}
.simple-pagination {
    display: block;
    width: 100%;
    overflow: hidden;
    clear: both;
}
div.paginateDiv.simple-pagination li.active span {
    color: #FFF !important;
    background-color: var(--rcol) !important;
    background: var(--rcol) !important;
}
div.paginateDiv.simple-pagination li span {
    border: none;
}
.twenty5 {
    position: absolute;
    right: 10px;
    width: 130px;
    height: 100px;
    background-image: url(../images/25th.webp);
    background-repeat: no-repeat;
    background-size: contain;
    top: 150px;
    z-index: 9;
    
    will-change: transform;
    animation: scrollEffect linear;
    animation-timeline: scroll(root); /* Scroll-driven animation */
}

@keyframes scrollEffect {
    from {
        transform: translateY(0px);
    }
    to {
        transform: translateY(1500px); /* Moves down as you scroll */
    }
}
.blueBox {
    border-radius: 10px;
    padding: 100px 0;
    font-size: 1.5rem;
    line-height: 1;
}
.blueBox h2 {
    font-size: 2.5em;
    line-height: 0.7;
    color: var(--rcol);
    font-weight: bold;
}
.blueBox .button, .blueBox button {
    translate: 0 42px;
}
.blueBox h2 small {
    font-size: 0.8em;
    line-height: 1.4;
    font-weight: normal;
}
.button.subButton  {
    background-color: var(--gcol);
    margin-left: 10px;
    padding-left: 30px;
    padding-right: 30px;
    
}
.shortcutIcons {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap onto new lines */
    justify-content: center; /* Centers items when fewer per row */
    gap: 10px;
    margin: 100px 0;
}

.shortcutIcons a {
    display: block;
    border: 1px solid var(--rcol);
    flex: 1 1 261px;
    max-width: 25%;
    min-width: 223px;
    padding: 10px 0;
    aspect-ratio: 1 / 1;
    text-align: center;
    color: var(--gcol);
    font-weight: bold;
    font-size: 1.4em;
    line-height: 1;
    position: relative;
    border-radius: 10px;
    background-color:#fff;
    transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease;
}

.shortcutIcons a img {
    width: 80%;
    height: 50%;
    object-fit: contain;
    clear: both;
    display: block;
    text-align: center;
    object-position: center;
    position: relative;
    margin: 15px auto;
    transition: filter 100ms ease;
    filter: saturate(0);
}
.shortcutIcons a span {
    color: var(--gcol);
    font-size: 13px;
    font-weight: normal;
    position: absolute;
    bottom: 10px;
    display: block;
    width: 100%;
    text-align: center;
    padding-right: 15px;
    transition: color 300ms ease;
}
.shortcutIcons a span:before {
    content: '⩔';
    color: var(--rcol);
    margin-right: 10px;
    transition: color 300ms ease;
    position: relative;
    display: inline-block;
}
.shortcutIcons a:hover span:before {
    animation: bop2 infinite 3000ms ease;
}
.shortcutIcons a:hover {
    color: #333;
    background-color: var(--rcol);
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
    border: 1px solid #AAA;
}
.shortcutIcons a:hover img {
    filter: brightness(0.4) saturate(0);
}

.shortcutIcons a:hover span, .shortcutIcons a:hover span:before {
    color: #333;
}
.homeCounter {
    --min-col-size:200px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min-col-size), 100%),1fr));
}
.homeCounter div {
    border-right: 1px solid #EEE;
    text-align: center;
    padding: 50px 0;
    font-size: 1.5rem;
    line-height: 1;
}
.homeCounter div:last-of-type {
    border-right: none;
}
.homeCounter div span {
    font-size: 2em;
    font-family: "Impact";
}
.homeCounter div span:after {
    content: attr(data-after);    
}
.parallaxScroller {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 200px 100px;
    font-size: 3em;
    color: #fff;
    text-align: center;
    margin: 10px 0;
    line-height: 1;
    translate: -50% 0;
    width: 100vw;
    left: 50%;
    position: relative;
}
/*- End of full screen css - code: xyz123*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media (prefers-color-scheme: dark) {
	input[type="text"], input[type="number"], input[type="email"], input[type="password"] {
		color:#000;
	}
}
/*window_sizes
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/


@media (max-width:1566px){
    .gotobar {
        width: 576px;
        margin: auto;
}
}

@media (max-width:1220px){
    .nav-main.scrolled {
        padding-left: 0px;
        left: 253px;
        width: calc(100% - 272px);
    }
    .nav-main.scrolled a.nav-link-main {
        padding: 13px 10px 15px 10px;
    }
    header.scrolled .logo {
        left: 30px;
    }
}
@media (max-width:1200px){
    
    .prodimg {
        width: 100%;
        max-height:400px;
        object-fit:contain;
        cursor:pointer;
        position: relative;
        top: 0;
        left: 0;
    }
	.fullcartitem .fullcartprice {
		position: relative;
		display: block;
		margin: 15px 0;
	}
	.cartitems .deleteCartitem {
    	top: 0;
	}
	.homeArticle h1 {
		font-size: 2rem;
	}
	
	.compContact {
		top: 25%;
		left: 50%;
		margin-left: -25%;
		margin-top: 0%;
		min-height: 50%;	
		max-height: 87.5%;
		width: 50%;
	}
	
    .margetingDropdown{
        --pos-left: 5px;
        position: fixed;
        top: unset;
        margin-top: 140px;
        width: 100%;
        max-width: 100%;
        left: 0px;
        box-shadow: 0 0 0 50000px rgba(0, 0, 0, 0.2);
    }

    .margetingDropdown:before{
        display: none;
    }
    .urgency {
        width: 32%;
    }
}
@media (max-width:991px){	
    
.video-container img.bottom_rce {
    width: 100%;
    height: 85px;
    object-fit: cover;
    object-position: center center;
    
}

    header {
        box-shadow: 0 7px 20px rgba(0, 0, 0, 0.6);
    }
    .nav-toggle, .nav-close {
        display: block;
    }
 .nav-close {
        display: none;
    }
    nav.nav-main,  nav.nav-main.scrolled {
        display: none;
        width: 100%;
        right:0;
        left: unset;
        background-color: rgba(30, 30, 30, 0.8);
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(50, 50, 60, 0.8));
        backdrop-filter: blur(8px);
        height: 100svh;
        top: 0;
        background-position: right;
        overflow-x: hidden;
        overflow-y: auto;
        white-space: normal;
        padding-top: 69px;
        padding-left: 0;
    }
    .nav-div-main {
        display: block;
        text-shadow: 0 0 4px rgba(0, 0, 0, 0.6), 0 0 13px rgba(0, 0, 0, 0.6);
    }
    
a.nav-link-main, a.nav-link-main:not([href]):not([tabindex]) {
        padding: 18px 28px;
}
    nav a.nav-link-main, nav.nav-main.scrolled a.nav-link-main {
        width: calc(100% - 12px);
        height: auto;
        padding: 20px 0 20px 30px;
        display: block;
        color: #FFF;
        margin: 5px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 5px;
        box-shadow: 0 0 7px rgba(0, 0, 0, 0.7);
    }
    /*.nav-div-main .dropdown {
        display: none !important;
    }*/
    
    .nav-div-main .dropdown {
        display: none;
        opacity: 1;
        position: relative;
        top: 0 !important;
        pointer-events: all;
        width: calc(100% - 26px);
        border-radius: 5px;
    }
    .nav-link-main[data-target="contact"]:hover {
        color: var(--rcol);
    }
    a.nav-link-main.selected:after {
        left: -5px;
        top: 22px;
        width: 40px;
        height: 7px;
        transform: rotate(90deg);
    }
    .nav.nav-main.scrolled a.nav-link-main:hover {
        color: var(--rcol);
        mix-blend-mode: hard-light;
    }
    a.nav-link-main.selected:hover:after {
        opacity: 1;
        mix-blend-mode: screen;
    }
    nav a.nav-link-main[data-target="contact"] {
        background-color:transparent;
        float:none;
        top:unset;
        right:unset;
        color: #FFF;
    }
    nav a.nav-link-main[data-target="contact"]:hover {
        background-color:var(--rcol);
        color: #000;
    }
    .nav-link h2 {
        top: unset;
        bottom: -18px;
    } 
    nav .nav-image {
        height: calc(100% - 20px);
        ox-shadow: 0 0 6px var(--rcol);
        border: 2px solid var(--rcol);
        opacity: 1;
    }
    
    .gotobar {
        width: 576px;
        margin: auto;
        top: 58px;
        background-color: rgb(38,31,23);
        border-radius: 10px;
        backdrop-filter: blur(2px);
        z-index: 9;
    }
    #content.container {
        padding: 15px;
    }
    .showcase {
        background-position: 100% 0;
        background-size: auto 100%;
        margin-top: 100px;
    }
    .showcasetext {  
    }
    .showcaselist {  
        transform: rotateX(357deg) rotateY(18deg) rotateZ(358deg) translateX(-60px) scale(0.9, 1);
        width: calc(90% + 135px);
        top: -127px;
    }    
    .showcaseItem {    
        width: 17vw;
    }
    
    .navyOrders {
        grid-template-columns: repeat(2, 1fr);
    }
    .foodcards {
        grid-template-columns: repeat(2, 1fr);
    }
    .foodGrid {
        grid-template-columns: repeat(2, 1fr);
    }
	.specialscontainer span {		
		font-size: 30px;
    } 
	.footlogo {
		width:200px;
	}
	.enquireForm {
		width: 100%;
		margin-left: 0;
		position: relative;
	}
	a.navskip {
		display:none;
	}
	.menubutton {
		display:block;
	}
	
	.menu {
		display: none;
		position: fixed;
		right: 0;
		background-color: #333;
		z-index: 999;
		top: 109px;
		width: 100%;
		max-width: 400px;
		overflow-y: auto;
		height:-webkit-fill-available
	}
	.menu a.menuitem {
		display:block;
		height:50px;
		color:#FFF !important;
		text-shadow:-1px 1px 2px #000;
	}
	.menu a.menuitem:hover {
		background-color:#222;
		color:var(--rcol) !important;
	}
	.menu a.menuitem.drop:after {
		bottom: 22px;
		left: unset;
		right:15px;
	}
	.menu .dropdown {
		position:relative;
	}
	
	a.nav-link-main + .dropdown a {
        width: 100%;
    }
	/*a.menuitem:hover + .dropdown, .dropdown:hover  {
		opacity:0;
		pointer-events: none;
		z-index:-2;
		height: 0vh;
	}*/
	.menu a.menuitem + .dropdown.clicked, a.menuitem:hover + .dropdown.clicked, .dropdown.clicked:hover  {
		opacity:1;
		pointer-events: all;
		z-index:9999;
		height: auto;
	}
	.hidesmall {
		display:none;
	}
	.showsmall {
		display:block;		
		height: auto;
		overflow-x: visible;
		overflow-y: visible;
		padding-bottom: 100px;
	}
	.menuright.hovmenu {
		display: block;
		border-top: 1px solid var(--rcol);
		padding-top: 27px;
		    height: auto;
	}
	.menuright a {
		display: block;
		margin: 10px;
		float:none;
		width:100%;
	}
	.menuright h5 {
		font-size: 2em;
		position: relative;
		z-index: 1;
		opacity: 1;
		pointer-events:all;
		text-align:center;
		line-height:1;
	}
	
	.menuright h5 a {
		color:#FFF;
		background-color:rgba(var(--rgbcol),0.6);
		padding: 15px;
		line-height: 53%;
	}
	
	
	.menu a.menuitem:focus:before {
    display: none;
	}
	
	.footerright {
		text-align:center;
	}
	.socialicons {
    transform:translate(0, 0);
	}	
	
	.galimg {
		width: 47%;
	}
	.vcard img.galimg {
		width: 100%;
		height:200px;
	}
	
	.vcard a.social {
		margin: 16px 0 0 0;
	}
	
	.galleryVideo, .galimgs {
		width:50%;
	}
	.noticeCard {
		width: 47%;
	}
	.addons .addon span {
		max-width: 50%;
		overflow: hidden;
		display: inline-block;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.altExtra {
		translate: 0 0;
	}
	.questiontag:hover {
		transform: translate(0, 0);
	}
	
	.allbdays {
		right: 9px;
		bottom: 63px;
	}
	
	.homeArticle {
		width:100% !important;
		padding-bottom:100% !important;
		position:relative !important;
		margin:20px 0 !important; 
	}
	.footnav a span {
		font-size: 1.5em;
	}
	.birthdays {
		top:	10%;
        min-height: 80%;
		overflow-y: auto;
		overflow-x: hidden;
        width: 90%;
        left: 5%;
	}
}

@media (max-width:889px){
	.stationeryPdfButton[data-icon="icon-remove-sign"] {	
		right: calc(100% - 50px);
		border-radius:0 10px 10px 0;
		top: 0;
	}
}
@media (max-width:768px){
    .gotobar {position: relative;
        top: 0;
        width: 100%;
        background-color: transparent;
    }
    
.contactDetails .contactItm.sendwhatsapp {
    padding-bottom: 15px;
}
    
    .showcase {
        background-position: center top;
        background-size: 100% auto;
    }
    .showcasetext {
        position: absolute;
        bottom: -11px;
        width: calc(90% - 18px);
        left: 15px;
        backdrop-filter: unset;
    }
   
    .showcaselist {  
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) scale(1);
        width: calc(100% - 10px);
        left: 0;
        top: -150px;
            height: 75px;
    }    
    .showcaseItem {
        width: 15vw;
        margin: 0 1vw;
        filter: blur(px) brightness(0.8);
        transform: scale(1);
    }
        .showcaseItem.current, .showcaseItem:hover {
        transform: scale(1.35);
    }
    .video-container .slide.current img {
        object-position: var(--object-position);
    }
    .footcols {
        margin-bottom: 50px;
    }
    .logoFormer {
        width: 350px;
        margin: 100px 0 0 -175px;
    }
   
    .extraInfo .officePos {
        scale:1;
    }
    .teamImgs {
        width: 200px;
        height: 200px;
        box-shadow: -10px 10px 25px #000;
    }
    .predict input[type="number"] {
        font-size: 3rem;
        border-radius: 10px;
        width: 175px;
        margin-top: 50px;
        padding: 0.11em 0 0.1em 5px;
    }
    .predict input[type="submit"] {
        width: 40%;
        left: 30%;
        bottom: -84px;
    }
    .predict input[type="number"] {
    font-weight: bold;
    font-size: 5rem;
    border-radius: 20px;
    background-color: #FFF;
    text-align: center;
    height: auto;
    width: 175px;
    z-index: 999;
    position: relative;
    padding: 0.11em 0 0.1em 17px;
    color: var(--rcol);
    font-family: "Impact";
    box-shadow: -10px 10px 25px #000;
}
    .closeFoodCart, .closePOS {
        transform: translate(0px, 0px);
    }
    div.button.cancelfoodorder, .completefoodorder {
        margin-left: 0;
    }
    .shopHomeButton {
    top: -80px;
        bottom: unset;
    }
    .POS, .staffOwe {
        padding: 20px;
    }
    .foodmenubutton {
		display:block;
	}
    .fooditems .numberModal {
        opacity: 1;
    }
    .foodmenuInner {
        display: none;
    }
    .putFoodHere {
    padding-left: 15px;
}
    .foodSubmenu {
        display: inline-block;
        width: 40%;
        margin: 5%;
    }
    .leftSideMenu {
        margin-bottom: 85px;
    }
    .hideunavailable {
        left: 15px;
    }
       

    .foodGrid {
      grid-template-columns: repeat(2, 1fr);
        gap:20px;
    }

.marketingIcons li {
    display: block;
    position: relative;
    width: 30%;
    --item-width: 15%;
    padding: 0 0 30% 0;
    margin: 1.6%;
    cursor: pointer;
}
	
	.compContact {
		top: 18%;
		left: 50%;
		margin-left: -37%;
		margin-top: -8%;
		min-height: 67%;
		max-height: 106.5%;
		width: 75%;
	}
	.urgency input[type="radio"] + label {
		font-size: 12px;		
    	padding: 15px 0;
	}
	.ITissue {
		height: auto;
		font-size: 23px;
		text-align: center;
		padding: 13px 30px;
		line-height: 36px;
	}
	.itform input[type="submit"] {
    bottom: -36px;
	}
	.footnav a span {
		font-size: 1em;
	}
	.homeArticle h1 {
		font-size: 1.5rem;
	}
.event h1 {
		margin-bottom: 4px;
		padding: 0 0 6px 16px;
		border-bottom: 3px solid #EEE;
		font-size: 20px;
		height: 56px;
		position: relative;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.event h1 small {
		float: none;
    	margin-top: 6px;
	}
	.event strong {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
    	display: inline-block;
	}
	.eventImage {
		height: 337px;
	}
	.eventImage:before {
   		bottom: 142px;
	}
	.eventImage:after {
    	bottom: 129px;
	}
	.evenContent {
		padding: 0px 12px;
		margin-left: -1px;
	}
	.event {
		margin: 84px 0;
		background-color: #FEFEFE;
		border: 2px solid #FFF;
		border-radius: 6px;
		box-shadow: 0 0 54px rgba(0,0,0,0.7);
	}
	.evenContent span {
		width: 100%;
		margin-left: -1px;
		 height: 230px;
	}
	.fullcartitem{
		padding-left: 0;
	}
	.specTable .fullcartitem img {
		position: relative;
		width: 100%;
		margin: 15px;
	}
	
	.fullcartitem span {
		display: block;
	}
	.fullcartitem .fullcartprice {
    text-align: center;
    display: block;
    width: 100%;
    margin: 15px 0;
    position: relative;
    font-size: 23px;
    font-weight: bold;
    padding: 5px;
    background-color: #AAA;
    color: #FFF;
    border-radius: 20px;
}
	.magname img {
		display:block;
	}
	
	.cart.cartScrolled {
		margin-right:47px;
	}
	
	a.magname:after {	
		display:block;
		display: -webkit-box;
	}
	 .filterContainer{
		overflow: visible;
		padding: 0 19px;
		margin-bottom: 69px;
	}
	.filterSide {
		width: 100%;
		box-shadow: 0 0 15px rgb(0 0 0 / 50%);
		position: relative;
	}
	.showHideFilters + div.unhiddenFilters {
		display:none;
	}
	.showHideFilters:after {
		border-bottom: none;
		border-top: 8px solid #999;
	}
	.sortby {
		right: 17px;
	}
	.sortbyText {
		right: 170px;
	}
	.offset-half {
		margin-left:0;
	}
	.vcard img.galimg {
		width: 100%;
		height:400px;
		margin-left:0;
	}
	.signup {
		text-align:center;
	}
	input[type="text"]#signup {
		margin: 20px 0 0 0;
		clear: both;
		width: 100%;
		border-radius: 5px;
	}
	.signupButton {
		line-height: 35px;
		width: 100%;
		margin: 8px 0 0 0;
		border-radius: 5px;
	}
	footer .footermenu {
		position:relative;
		margin-bottom: 30px;
		text-align:center;
	}
    .footerright {
        padding: 0;
        margin: 0;
    }
    footer .footerright small {
        white-space: normal;
    }
	footer .footermenu .footitems a, footer .footermenu .footitems a:hover {
		border-left: none;
		margin: 0px;
        padding-left: 0;
	}
	footer .footermenu .footitems {
		margin-bottom: 30px;
	}
	footer a.social {
		margin:0 auto;
	}
	footer a.social:first-of-type {
		margin-top:30px;
	}
	.breadcrumbs {
		font-size: 11px;
	}
	/*.equiptype {
		display:none;
	}*/
	.specTable tr td {
    padding: 5px;
	text-align:center;
	}
	.galimg {
		width: 47%;
		height:200px;
		border:10px solid #FFF;
		border-bottom:40px solid #FFF; 
	}
	.filter .formInput {
		width: 46%;
	}
	
	.deleteaccount.button {
		position: relative;
		right: unset;
		bottom: unset;
		width:100%;
		margin-top:100px;
		text-align:center;
	}
	.deleteaccount.button:before {
		content:'';
		width:100%;
		height:1px;
		border-top:1px solid #999;
		position:absolute;
		left:0;
		top:-50px;
		display:block;
	}
	.editUserSubmit {
		position:absolute;
		right:10px;
	}
	.cartOptions {
		width: 100%;
		/*top: 234px;*/
	}
	.fullcartitem span  {
		height: 24px;
		overflow: hidden;
		text-overflow: ellipsis;
	}
 	.addCustom {
		bottom: -124px;
		right: 228px;
		left: unset;
	}
	.unlockcart {
		bottom: -26px;
		left: -103px;
	}
	div.button.commissioning {
		left: -147px;
		min-width: 0px;
		width: 130px;
		padding: 9px;
		font-size: 13px;
	}
	.Custom {
		margin-top: -81px;
		width: calc(100% - 35px);
	}
	.addCustom.closeCustom {
		bottom: 88px;
		right: -6px;
	}
	.cartOptionsBox {
	    padding: 10px;
		text-align: left;
	}
    .commissioningDiv {
		left: -72px;
		z-index: 999999999999;
		box-shadow: 0 0 38px rgba(0,0,0,0.5);
	}	
	.preview, .preview2, .previewPI {
		float: left;
		margin: 21px 0 0 -15px;
		text-align: center;
	}
	.cartForm input[type="submit"]{
		float: right;
		margin: 21px 0 0 0;
		width: 49%;
	}
	.cartForm  .captchaSpin{
		width: 100%;
		clear: both;
		margin-left: -15px;
		height: 31px;
	}
	
	.individualarticle {
		    padding-bottom: 0;
	}
	.individualarticle .like {
		position: relative;
		margin-top: 0px;
	}
	.dontshowad {
		right: 60px;
	}
	.advert .closephp {
		top: 2px;
		right: 15px;
	}
	.galimg, div.galimgs .galimg, div.galimg, div.galitems .paginate div.galimg.paginateRow {
		width: 98%;
		margin: 2% 0;
		height: 398px;
	}

	.galimg .galttl {
		bottom: 56px;
	}
	
	.expoformPage input.textshow, .expoformPage select {
        height: 70px;
        font-size: 3vw;
        margin-top: 10px;
        width: calc(100% + 50px);
        margin-left: -25px;
        font-weight: normal;
    }
	.backButton, .nextButton, .expoformPage input[type="submit"] {
        height: 125px;
        width: 100%;
        padding: 0.5% 0 8% 0;
        line-height: 125px;
        font-size: 6vw;
        top: unset;
        left: 0;
        right: 0;
        position: relative;
        margin: 20px 0;
    }
	
	.backButton {
        height: 65px;
        width: 100%;
        padding: 0.5% 0 8% 0;
        line-height: 60px;
        font-size: 6vw;
        top: unset;
        left: 0;
        right: 0;
        position: relative;
        margin: 20px 0 0 0;
    }
	 .expoformPage label:not(.consultantSelect + label) {
        font-size: 7vw;
        width: 100%;
        position: relative;
        left: 0%;
        margin-top: -10px;
        line-height: 1;
    }
	
	.expoformPage.alwaysoverflow {
		overflow-x: hidden;
		overflow-y: auto;
	}
	.consultantsDiv {
		margin-top:0;
	}
	
	
	.consultantSelect + label  span, .consultantSelect + label:hover span, .consultantSelect:checked + label span, .consultantSelect.unselectedConsultant + label:hover  span {
		opacity: 1;
	}
	.consultantSelect.unselectedConsultant + label  span {
		opacity: 0;
	}
	.spinToWin {
    	background-size: 100% auto;
	}

	.spinTicker {
		margin-top: -19vh;
	}
	.spinButton {
    margin-top: -14.5vh;
	}
     .pricebanner {
        top: 100px;
        left: -182px;
    }

.blueBox h2 {
    font-size: 2em;
}
	@media (max-height:575px){
		div.backButton, div.nextButton, div.expoformPage input[type="submit"] {
			width: 40%;
			margin: 20px 5%;			
			height: 65px;
			line-height: 60px;
		}		
		.spinToWin {
			background-size: auto 100%;
		}
		.spinTicker {
			margin-top: -32vh;
		}		
		.spinButton {
			margin-top: -15.5vh;
		}
	}
}
@media (max-width:575px){
    header .logo {
        left:10px;
        max-width: calc(100% - 100px);
    }
    header .logo img {
        left:10px;
        width: 100%;
        max-height: 56px;
        object-fit: contain;
    }
    .contactDetails .contactItm {
    line-height: 1.3;
}
    .contactItm strong {
        width: auto;
        margin-right: 5px;
    }
    .showcaselist .inner {
        white-space: normal;
    }
    .showcaseItem {
        width: 20vw;
        margin: 10px 1vw;
    }
    .teamImgs {
        width: 150px;
        height: 150px;
    }
    .predict input[type="number"] {
        font-size: 3rem;
        border-radius: 7px;
        width: 150px;
        padding: 0.11em 0 0.1em 0;
    }
    .predict input[type="submit"] {
        width: 40%;
        left: 30%;
        bottom: -84px;
    }
    .searchStaffowed {
        top: 0;
        width: calc(100% - 40px);
    }
    .POS, .staffOwe {
        padding: 5px;
    }
    .staffOwe .container {
        padding: 5px;
    }
    .whoOwePerson img {
        margin: 10px;
    }
    .whoOwePerson .currentOwed {
        position: absolute;
        margin: 0;
        right: 8px;
        top: 30px;
        font-size: 1em;
    }
    .navyOrders {
        grid-template-columns: repeat(1, 1fr);
    }
    	
    .foodcards {
        grid-template-columns: repeat(1, 1fr);
    }
    .leftSideMenu {
        margin: 20px 20px 85px 20px;
    }
    .foodGrid {
      grid-template-columns: repeat(1, 1fr);
        gap: 50px;
        
    }
    .productlist {
        height: 500px;    
    }
    
    .fooditems {
        width: calc(100% - 50px);
        margin-left: 20px;
    }
    
    .productlist:hover .featuredspecs {
        transform: none;
    }
    .productlist:hover img {
        opacity:1;
        filter: none;
    }
    
	.MarketingDesk {
		flex-direction: column; /* Stack elements vertically */
	}
	
	.numberModal:not(.foodCartitem .numberModal) {
		width:100% !important;
		order: 2; /* Move child2 to the bottom element in the column */
	}
	.formInput .upArrow, .formInput .downArrow {
		width:  40px;
	}
	form .formInput input[type="number"].marketingsize {
		width: calc(100% - 55px);
	}
      .foodCartitem .formInput .upArrow,.foodCartitem .formInput .downArrow {
        width: 25px;
    }
	.urgency input[type="radio"] + label {
		padding: 15px 15px;
		position: relative;
		margin-top: 20px;
	}
	.main {
    	width: 100vw;
	}
	.dealerLogos {
		width: 100%;
		height: 200px;
	}
	.dealerinside {
		width:100%;
		float: none;
		padding-left: 15px;
		clear:both;
	}
.dealerProduct .info:after {
	left:25vw;
    top: var(--info-top, 0) !important;
	width: 50vw;
	position:fixed;
	transition:opacity 300ms ease;
}
	.comment {
		margin: 15px 15px 45px -60px;
		padding-left: 60px;
	}
	.commentImage {
    	left: -9px;
	}
	.areply .commentImage {
    	left: -60px;
	}
	.newComment {
		left: -10px;
	}
	.newCommentImg {
    	left: -100px;
	}
	 
	.votePerson + label img {
		filter:saturate(1);
	}
	div.advert.row {
		max-width: calc(100vw - 24px) !important;
		min-width: calc(100vw - 24px) !important;
		width: calc(100vw - 24px) !important;
		margin-left: calc(-50vw + 10px) !important;
	}
	.advert .allAds .adimg[aria-visibility="show"] {
		height: calc(100% - 5px);
		width: 100%;
	}
    .specialscontainer span {		
		font-size: 20px;
    }  
	
	.footnav a span {
		font-size: 0.9em;
		bottom: 0;
	}
	.homeArticle span {
    line-height: 13px;
	}
	
	.commentSection {
		border-top: 1px solid #EEE;
		width: calc(100% - 60px);
		margin-left: 52px;
	}
	.commentDate {
		position: relative;
		right: unset;
		left: 0;
		text-align: left;
		top: -2px;
	}
	.individualarticle .sharers {
    	position: relative;
		margin-top: 20px;
	}
	.editQuotePanel .container .quoteeditor {
		padding: 0;
		width: 100%;
	}
	.removemrginsmall.row {
		margin: 0;
		display:block;
	}
	#addnewcustom .minus {
		display: none;
	}
	.qtyQuote {
		width: 44px !important;
	}
	.fitFill {
		right: 80px;
		top: 10px;
		right: 130px;
	}
	.downloadImage {
		top: 9px;
		right: 74px;
	}
	.chat.chatting {
		width: 90%;
		right: 5%;
        z-index: 999999999;
	}
	.chat form {
    	width: calc(100% - 30px);
	}
	.chat form textarea {
		position:absolute;
		bottom:50px;
		transition: all 300ms ease;
	}
	.chat.chatting form textarea {
		position:relative;
		bottom:0px;
	}
	
		
	.galleryVideo, .galimgs {
		width:100%;
	}
	
	 .search {
        height: 95px;
        width: 100%;
        background: linear-gradient(90deg, transparent 0, rgb(0 0 0 / 34%) 10%);
        backdrop-filter: blur(4px);
         border-bottom: 5px solid #FFF;
    }
	.search input[type="text"] {
        width: calc(100% - 100px);
        left: 50px;
    }
	.search input[type="submit"] {
    	right: 9px;
	}
	
	 
	.hideSearch {
        top: 12px;
        right: unset;
        left: 7px;
    }
	.search div {
        font-size: 13px;
        left: 55px;
        right: unset;
        bottom: 6px;
    }

	.curveTop {
		bottom:0;
	}
	
	.vcard img.galimg {
		width: 100%;
		margin: 5% 0;
		height:400px;
	}
	.enlarger .content {
		top: 1%;
		left: 1%;
		width: 98%;
		height: 98%;
	}
	.enlarger .content img {
		object-fit: contain;
	}
	
	.noticeCard {
		width: 100%;
		margin: 0 0 30px 0;
	}

    .chat form .captchaSpin {
        right: -20px;
        left: unset;
        bottom: -45px;
        color: #FFF;
    }
}