@font-face {font-family: 'questrialregular';src: url('questrial-regular-webfont.woff2') format('woff2'),url('questrial-regular-webfont.woff') format('woff'),url('questrial-regular-webfont.ttf') format('truetype');}:root {--black1: rgb(34 34 34);--white1: rgb(238 238 238);--greywhite: rgb(224,224,224);--grey4:  rgb(128,128,128);--orange: rgb(255,127,42);--yellowgreen: rgb(201,194,67);--blue: rgb(52,152,219);--green:  rgb(0,176,80);--violet: rgb(128,0,128);--lavender: rgb(204,153,255);--red: rgb(254,139,142);--tangerine: rgb(254,206,12);--JWF-bg1: linear-gradient(to right, rgb(26,42,108) 0%, rgb(178,31,31) 66%, rgb(253,187,45) 100%);--JWF-bg2: linear-gradient(45deg,    rgb(26,42,108) 0%, rgb(178,31,31) 66%, rgb(253,187,45) 100%);--JWF-bg3: linear-gradient(to right, rgb(26,42,108,66%) 0%, rgb(178,31,31,66%) 50%, rgb(253,187,45,66%) 100%);--shadow1: 0px 12px 28px rgba(0, 0, 0, 0.20);--shadow3: 0px 14px 28px rgba(0, 0, 0, 0.25), 0px 10px 10px rgba(0, 0, 0, 0.22);--bkg-color: rgb(255,255,255);--txt-color: var(--black1);--hdr-color: var(--white1);}body {margin: 0px;padding: 0px;font: normal 100%/1.18 questrialregular, Arial, Verdana, Helvetica, Sans-Serif;color: var(--txt-color);background-color: var(--bkg-color);}* { box-sizing: border-box; }h1 { font-size: 2em; margin: .67em 0 }h2 { font-size: 1.5em; margin: .75em 0 }h3 { font-size: 1.17em; margin: .83em 0 }h4 { font-size: 1em; margin: 1.12em 0 }h5 { font-size: .83em; margin: 1.5em 0 }h6 { font-size: .75em; margin: 1.67em 0 }h1, h2, h3, h4, h5, h6 { font-weight: bolder }img {max-width: 100%;height: auto;border:0;}button {padding: 0; margin: 0; border: 0;background-color: transparent; cursor: pointer; text-align: center;}hr { width: 80%; border: none; border-top: 2px solid var(--orange); }p.b4ul { margin-bottom: 0; }.centreT { text-align: center; }.greyT { color: var(--grey4); }.font14 { font-size: 0.875rem; }.width300 { max-width: 300px; }header {position: fixed;margin: 0 auto;top: 0;left: 0;right: 0;display: flex;justify-content: center;align-items: center;width: 100%;max-width: 1200px;color: var(--hdr-color);height: 48px;background-image: var(--JWF-bg1);z-index: 10;}header img.logo {margin: 4px;}header p {font-size: 1.25rem;margin: 0;padding-right: 4px;text-align: center;color: rgb(253,187,45);}nav {flex-grow: 1;}.hamburger {position: absolute;display: none;height: 32px;width: 32px;top: 9px;right: 12px;z-index: 5;appearance: none;}.hamburger span  {display: block;position: absolute;height: 4px;width: 100%;border-radius: 10px;background: var(--txt-color);}.hamburger .line1 {transition: transform 0.2s ease-in-out 0.2s;transform-origin: 0% -100%;top: 3px;}.hamburger .line2a, .hamburger .line2b {transition: transform 0.4s ease-in-out;top: 14px;}.hamburger .line3 {transition: transform 0.2s ease-in-out 0.2s;transform-origin: 0% 200%;bottom: 3px;}[data-hamtoggle='true'] .hamburger .line1,[data-hamtoggle='true'] .hamburger .line3 {transform: scaleY(0);}[data-hamtoggle='true'] .hamburger .line2a {transition-delay: 0.1s;transform: rotate(45deg);}[data-hamtoggle='true'] .hamburger .line2b {transition-delay: 0.1s;transform: rotate(-45deg);}.top-menu {padding:0;display: flex;justify-content: space-around;list-style:none;}.top-menu li a, .top-menu li button {color: var(--hdr-color);font-size: clamp(0.875rem, 0.946vw + 0.52rem , 1.125rem);text-decoration: none;}.top-menu li a:visited {color: var(--hdr-color);}@media(hover: hover) {.top-menu li a:hover:not(.current), .top-menu li button:hover:not(.current) {outline-style: solid;outline-color: var(--white2);outline-width: 3px;outline-offset: 4px;}}.top-menu li a.current {font-style: italic;text-decoration: underline var(--greywhite);}.top-menu li button::after {content: "";display: inline-block;width: 16px;height: 8px;margin-left: 4px;background-color: var(--hdr-color);}.top-menu [data-submenu="hidden"] button::after {clip-path: polygon(0% 0%, 100% 0%, 50% 100%);}.top-menu [data-submenu="visible"] button::after {clip-path: polygon(50% 0%, 100% 100%, 0% 100%);}.top-menu ul {position: absolute;visibility: hidden;transition: visibility 0s linear 0.2s, transform 0.2s linear;transform-origin: 0% 0%;transform: scaleY(0);width: 200px;margin-top: 16px;margin-left: -60px;padding: 0px;list-style: none;background-image: var(--JWF-bg2);border: 1px solid var(--hdr-color);border-radius: 3px;}.top-menu ul li {padding: 8px;}.top-menu ul li a {font-size: 1.125rem;}.top-menu ul li a.font17 {font-size: 1.0625rem;}.top-menu [data-submenu="visible"] ul {visibility: visible;transition: transform 0.2s ease-in-out 0.1s;transform: scaleY(1);}@media only screen and (max-width: 600px) {header p {flex-grow: 1;}.top-menu {position: fixed;background: var(--JWF-bg1);flex-direction: column;inset: 48px 0 0;padding: 40px;margin: 0;align-items: center;justify-content: flex-start;gap: 40px;transform: translate(-100%);opacity: 0;transition: .4s;}.top-menu li a, .top-menu li button {width: 100%;font-size: 1.5rem;}.top-menu li button {padding-left: 16px;}.top-menu [data-submenu="visible"] ul {position: static;margin-top: 0;margin-left: 0px;text-align: center;}.hamburger {display: block;}[data-hamtoggle='true'] .top-menu {transform: translate(0);opacity: 1;}}footer {width: 100%;max-width: 1200px;margin: 0 auto;margin-top: 1rem;padding: 0.25rem;min-height: 40px;background: var(--JWF-bg1);color: var(--hdr-color);}footer.grid-content {margin-top: 1.5rem;}.resptext {width: 100%;max-width: 66ch;margin: 0 auto 16px;font-size: 1.125rem; line-height: 1.4;font-size: clamp(1.0625rem, 0.417vw + 0.979rem , 1.3125rem);line-height: clamp(1.2em, 1.208vw + 1.033rem , 2em);padding: 0 8px;}.resptext h1, .resptext h2 {line-height: normal;}main {width: 100%;max-width: 1200px;margin: 0 auto;font-size: 1.0625rem;}main img, .resptext img { margin: 0 auto; display: block;}main.grid-content {display: grid;grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));grid-gap: 24px;user-select: none;}main.grid-content > div:not(.resptext) {padding: 8px;border: 1px solid var(--greywhite);box-shadow: var(--shadow3);}main.grid-content > div.resptext {grid-column: 1 / -1;margin-bottom: 0;}main.grid-content ul {margin: 0 0 16px;}main.grid-content ul li {line-height: 1.2;}main.grid-content ul li::marker {color: var(--orange);font-size: 1.5em;}main.flex-content {display: flex;flex-direction: column;}main.flex-content > div {box-shadow: var(--shadow3);}main.flex-content aside {margin: 16px auto;max-width: 320px;}main.flex-content aside > div {padding: 1rem;}.flex-left  { width: 30%; order: 1;}.flex-right { width: 70%; order: 2;}.flex-30 { width: 30%;}.flex-70 { width: 70%;}@media only screen and (max-width: 600px) {main.grid-content, main.flex-content {width: calc(100% - 32px);margin: 0 16px;}.flex-left, .flex-right { width: 100%; order: 1;}.flex-30, .flex-70 { width: 100%;}}main.grid-index {display: grid;column-gap: 16px;row-gap: 16px;grid-template-columns: repeat(auto-fill, minmax(270px,1fr));--row-height: 20;--row-gap: 16;}main.grid-index > article {--content-height: 1;grid-auto-rows: calc(var(--row-height) * 1px);--rowspan: calc((var(--content-height) + var(--row-gap)) / (var(--row-height) + var(--row-gap)));grid-row-end: span var(--rowspan);}main.grid-index article {border-radius: 3px;border-style: solid none none;border-width: 8px 0px;border-color: transparent;background-color: rgb(51 51 51 / 80%);color: var(--white1);overflow: hidden;break-inside: avoid;position: relative;}main.grid-index article a { text-decoration: none; display: block; }main.grid-index article a:focus { outline: none; }main.grid-index article a:link, main.grid-index article a:visited { color: var(--white1); }main.grid-index article h3 {margin: .67rem 0 .83rem 4px;}main.grid-index article p { margin: .50em 0; padding: 0 10px;}main.grid-index article span.category { padding: 4px; font-size: 1.5rem; color: var(--white1);}main.grid-index article span.read-more {padding: 4px 0; display: block; width: 100%; font-size: 0.875rem; text-align: center; position: absolute; bottom: 0px;}main.grid-index article div.height24 { height: 24px }main.grid-index article.blue {border-color: var(--blue); }main.grid-index article.blue span {background-color: var(--blue); }main.grid-index article.green {border-color: var(--green); }main.grid-index article.green span {background-color: var(--green); }main.grid-index article.violet {border-color: var(--violet); }main.grid-index article.violet span {background-color: var(--violet); }main.grid-index article.orange {border-color: var(--orange); }main.grid-index article.orange span {background-color: var(--orange); }main.grid-index article.lavender {border-color: var(--lavender); }main.grid-index article.lavender span {background-color: var(--lavender); }main.grid-index article.yellowgreen {border-color: var(--yellowgreen); }main.grid-index article.yellowgreen span {background-color: var(--yellowgreen); }.hero {position: sticky;width: 100%;max-width: 1200px;margin: 0 auto;top: 48px;opacity: 1;z-index: -1;transition: opacity 0.25s linear;}.hero-overlay {position: absolute;width: max-content;top: 32%;left: 50%;translate: -50%;padding: 0.5rem;border-radius: 1rem;text-align: center;color: var(--white1);font-size: clamp(2rem, 1.667vw + 1.667rem , 3rem);transition: opacity 0.5s linear;background-image: var(--JWF-bg3);}.hero-overlay div:not(:first-child) { font-size: 75%;}.contact-me {margin: 16px auto;max-width: 400px;padding: 25px;border-radius: 5px;}.contact-me h2 {text-align: center;margin-bottom: 20px;text-transform: uppercase;letter-spacing: 3px;}.contact-me .input_field {margin-bottom: 10px;}.contact-me input, .contact-me textarea, .contact-me button {padding: 0.5rem;font-family: inherit;font-size: inherit;}.contact-me input, .contact-me textarea {border: 1px solid  var(--greywhite);width: 100%;}.contact-me textarea {resize: none;height: 100px;font-size: 1rem;}.contact-me .subject {opacity: 0;position: absolute;top: 0;left: 0;height: 0;width: 0;z-index: -1;}.contact-me .btn input[type="submit"] {border: 0px;margin-top: 15px;padding: 10px;text-align: center;width: 100%;background: var(--tangerine);text-transform: uppercase;letter-spacing: 5px;font-weight: bold;border-radius: 25px;cursor: pointer;}.contact-me .info_msg {margin-bottom: 20px;padding: 0px;text-align: center;transition: all 0.5s ease;}.contact-me .info_msg.success {padding: 10px;background: var(--green);}.contact-me .info_msg.fail {padding: 10px;background: var(--red);}a[href^="tel:"] {display: block;max-width: 350px;margin: 10px auto;padding: 8px 0px;text-align: center;border-radius: 5px;border: 1px solid var(--greywhite);box-shadow: var(--shadow1);}a[href^="tel:"]:before {content: "\260e";margin-right: 0.5em;}a[href^="tel:"]:link {color:  var(--txt-color);}.readmore { position: relative; }.readmore button.goreadmore {position: absolute;bottom: 10px; right: 10px;width: 48px;height: 36px;padding: 2px;font-size: 0.875rem;line-height: 1.1;text-align: left;border-radius: 4px;background: rgba(254, 206, 12, 0.75);z-index: 5;}.readmore button.goreadmore::after { content: "Read More.."; }.readmore .overlay {position: absolute;top: 0; left: 0px;background: rgba(0,0,0,0.6);width: 100%;transition: .5s ease;opacity:0;color: white;font-size: 1.0rem;padding: 0 8px;text-align: center;}.readmore .overlay.show {opacity: 1;z-index: 10;}.readmore .overlay button.endreadmore {position: absolute;top: 4px; right: 0px;width: 32px;height: 32px;color: var(--white1);font-size: 1.75rem;z-index: 5;}.readmore .overlay button.endreadmore::after { content: "\2715" }.octa {position: absolute;top: 0;width: 48px;aspect-ratio: 1;display: inline-grid;place-content: center;color: white;font-weight: bold;--o: calc(50%*tan(-22.5deg));clip-path: polygon( var(--o) 50%,50% var(--o), calc(100% - var(--o)) 50%, 50% calc(100% - var(--o)) );background-image: linear-gradient(to right, rgb(26, 42, 108) 0%, rgb(178, 31, 31) 50%, rgb(253, 187, 45) 100%);}.newproduct { position: relative; }.socials {display: flex;justify-content: center;align-items: center;gap: 1rem;}.socials img {width: 32px;height: 32px;}
