@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/montserrat.woff2") format("woff2"), url("montserrat.ttf") format("truetype"); }

@font-face { font-family: "Sofia Sans Extra Condensed"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/sofiasansextracondensed.woff2") format("woff2"), url("sofiasansextracondensed.ttf") format("truetype"); }

:root, [data-mdb-theme=light] { --mdb-font-sans-serif: "Montserrat", system-ui, -apple-system, sans-serif, "Segoe UI", "Helvetica Neue", Arial; --mdb-font-condensed: "Sofia Sans Extra Condensed", system-ui, -apple-system, sans-serif, "Segoe UI", "Helvetica Neue", Arial; --mdb-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); --mdb-body-font-family: var(--mdb-font-sans-serif); --mdb-body-color: rgb(32, 33, 36); --mdb-body-color-rgb: 32, 33, 36; --mdb-body-bg: #fff; --mdb-body-bg-rgb: 255, 255, 255; --mdb-emphasis-color: #000; --mdb-emphasis-color-rgb: 0, 0, 0; --mdb-secondary-color: rgba(79, 79, 79, 0.75); --mdb-secondary-color-rgb: 79, 79, 79; --mdb-secondary-bg: #eeeeee; --mdb-secondary-bg-rgb: 238, 238, 238; --mdb-highlight-color: #4f4f4f; --mdb-highlight-bg: #fff9c4; --mdb-border-width: 1px; --mdb-border-style: solid; --mdb-border-color: #bdbdbd; --mdb-border-color-translucent: rgba(0, 0, 0, 0.175); --mdb-border-radius: 0.25rem; --mdb-border-radius-sm: 0.25rem; --mdb-border-radius-lg: 0.5rem; --mdb-border-radius-pill: 50rem; --mdb-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); --mdb-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --mdb-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175); --mdb-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075); --mdb-focus-ring-width: 0.25rem; --mdb-focus-ring-opacity: 0.25; --mdb-focus-ring-color: rgba(59, 113, 202, 0.25); }

/* CUSTOM STYLESHEET */
.p, .main-content, .main-content p { font-size: 16px; line-height: 1.6; color: #565656; font-weight: 450; }
    .p, .main-content p { text-align: justify; }

@media (max-width: 767.98px) {
    .p, .main-content p { font-size: 14px; }
}

.p.text-muted { color: #464646 !important; padding: 0px 3% 0px 3%; line-height: 1.35 }

.h9, .h8, .h7, .h6, .h5, .h4, .h3, .h2, .h1 { letter-spacing: -0.04em; text-transform: unset; color: #4e4e4e; font-family: var(--mdb-font-condensed); line-height: 1 !important; margin: 0px; }

.h1 { font-size: 50px; font-size: Clamp(40px, Calc(40px + (60 * ((100vw - 320px) / 1180))), 100px) !important; padding-top: 85px; letter-spacing: -0.04em; font-weight: 800; }

@media (max-width: 991.98px) {
    .h1 { padding-top: 65px; }
}

.h2 { font-size: 40px; font-size: Clamp(32px, Calc(32px + (53 * ((100vw - 320px) / 1180))), 85px) !important; font-weight: 700 !important; }

.h3 { font-size: 34px; font-size: Clamp(29px, Calc(29px + (47 * ((100vw - 320px) / 1180))), 76px) !important; font-weight: 700 !important; }

.h4 { font-size: 30px; font-size: Clamp(27px, Calc(27px + (43 * ((100vw - 320px) / 1180))), 70px) !important; font-weight: 600 !important; }

.h5 { font-size: 27px; font-size: Clamp(25px, Calc(25px + (39 * ((100vw - 320px) / 1180))), 64px) !important; font-weight: 600 !important; }

.h6 { font-size: 24px; font-size: Clamp(24px, Calc(24px + (32 * ((100vw - 320px) / 1180))), 56px) !important; font-weight: 500 !important; }

.h7 { font-size: 22px; font-size: Clamp(22px, Calc(22px + (28 * ((100vw - 320px) / 1180))), 50px) !important; font-weight: 500 !important; }
.h8 { line-height: 30px; font-size: 24px; letter-spacing: -0.02em; }
.h9 { line-height: 30px; font-size: 28px; font-weight: 300 !important; letter-spacing: -0.03em; }
.email { line-height: 30px; font-size: 22px !important; }
.phone { line-height: 30px; font-size: 18px !important; }

@media (max-width: 575.98px) {
    .h8 { font-size: 24px !important; }
    .h9 { font-size: 28px !important; }
    .email { font-size: 24px !important; }
    .phone { font-size: 18px !important; }
}

.lead, .light { font-weight: 300 !important }

.fs-1 { font-size: clamp(1.1rem, 0.25vw + 1.1rem, 1.3rem) !important }
.fs-1s { font-size: clamp(1.8rem, 0.25vw + 1.8rem, 2rem) !important }
.fs-2 { font-size: clamp(1.2rem, 0.25vw + 1.2rem, 1.4rem) !important }
.fs-2s { font-size: clamp(2rem, 0.25vw + 2rem, 2.2rem) !important }
.fs-3 { font-size: clamp(1.3rem, 0.25vw + 1.3rem, 1.5rem) !important }
.fs-3s { font-size: clamp(2.2rem, 0.25vw + 2.2rem, 2.4rem) !important }
.fs-4 { font-size: clamp(1.4rem, 0.25vw + 1.4rem, 1.6rem) !important }
.fs-4s { font-size: clamp(2.4rem, 0.25vw + 2.4rem, 2.6rem) !important }
.fs-5 { font-size: clamp(1.5rem, 0.25vw + 1.5rem, 1.7rem) !important }
.fs-5s { font-size: clamp(2.6rem, 0.25vw + 2.6rem, 2.8rem) !important }
.fs-6 { font-size: clamp(1.6rem, 0.25vw + 1.6rem, 1.8rem) !important }
.fs-6s { font-size: clamp(2.8rem, 0.25vw + 2.8rem, 3rem) !important }
.container.specs h2 { font-size: Clamp(20px, Calc(20px + (16 * ((100vw - 320px) / 1180))), 36px) !important; font-weight: 700; margin: 30px 0px 5px; line-height: 1.2; letter-spacing: -0.05em; color: rgb(80 79 79); }
#contact-info { scroll-margin-top: 0px !important; scroll-padding-top: 0px !important; }
.w100 { font-weight: 100 !important }

.w200 { font-weight: 200 !important }

.w300 { font-weight: 300 !important }

.w400 { font-weight: 400 !important }

.w500 { font-weight: 500 !important }

.w600 { font-weight: 600 !important }

.w700 { font-weight: 700 !important }

.w800 { font-weight: 800 !important }

.w900 { font-weight: 900 !important }

/* COLORFUL LINE DIVIDER */
.colorful-div { display: block; padding: 0px; height: 1px; width: 100%; background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); margin: 0px }

.colorful-border { display: block; height: 2px; width: 60%; background-image: linear-gradient(to right, #00beff45,#a7aaff7a,#f78eff87); margin: 5px auto; border-top: 1px solid #bbbbbb42 }

/* FONT COLORS */
.fm { font-family: var(--mdb-font-sans-serif) }

.fs { font-family: var(--mdb-font-condensed) }

.glow-pink { text-shadow: -2px 1px 3px #ff6de6, -1px -1px 4px #6a7d88; font-weight: 300 }

.Highlight { color: #DE1F1F; }

div.bb { display: inline-block }

    div.bb::before { content: "\21DC"; /* content: "\2910";*/ font-size: 2.25em; font-style: normal; line-height: 1; display: inline-block; transform: translate(0px, 4px); margin-right: 5px; text-shadow: 3px 0px 3px #ffd53a }

.tile-1 { background: url("/images/new/tile1.webp") repeat; }

.tile-2 { background: url("/images/new/tile2.webp") repeat; }

.tile-3 { background: url("/images/new/tile3.webp") repeat; }

.tile-4 { background: url("/images/new/tile4.webp") repeat; }

.tile-5 { background: url("/images/new/tile5.webp") repeat; }

.tile-6 { background: url("/images/new/tile6.webp") repeat; }

.tile-7 { background: url("/images/new/tile7.webp") repeat; }

.tile-8 { background: url("/images/new/tile8.webp") repeat; }

.tile-9 { background: url("/images/new/tile9.webp") repeat; }

.air-compressor-clients { background-position-y: -170px; background-image: url('/images/new/air-compressor-parts-manufacturers-and-types.webp'); display: inline-block; width: 280px; height: 43px; margin: 20px 0px; }
.scroll-to-top-image { background-position-y: -126px; display: block; background-position-x: -1021px; background-image: url('/images/new/air-compressor-parts-manufacturers-and-types.webp'); width: 35px; height: 40px; }

/* CUSTOM ORDERED LIST STYLE */

/* STYLE 2 */
div.ribbon-cards { padding: 0rem; min-height: 100vh; display: grid; place-items: center }

ul.ribbon-cards { width: min(100%, 60rem); overflow: hidden; margin-inline: auto; padding-inline: clamp(1rem, 5vw, 5rem); list-style: none; perspective: calc(100vw); display: grid; row-gap: 8px }

    ul.ribbon-cards li.ribbon-card { position: relative; padding-block: 1rem; padding-inline: 0.5rem; background-color: var(--ribbon-bg-color); background-image: linear-gradient(to right, rgb(0 0 0 / .15), transparent); transform-style: preserve-3d; color: var(--color); display: grid; grid-template: "icon" "title" "content"; row-gap: 0.5rem; column-gap: 0.5rem }

        ul.ribbon-cards li.ribbon-card::before, ul.ribbon-cards li.ribbon-card::after { --side-rotate: 60deg; content: ""; position: absolute; top: 0; height: 100%; width: 100%; transform-origin: calc(50% - (50% * var(--ry))) 50%; transform: rotateY(calc(var(--side-rotate) * var(--ry))); background-color: inherit; background-image: linear-gradient(calc(90deg * var(--ry)), rgb(0 0 0 / .25), rgb(0 0 0 / .5)) }

        ul.ribbon-cards li.ribbon-card::before { --ry: -1; right: 100% }

        ul.ribbon-cards li.ribbon-card::after { --ry: 1; left: 100% }

        ul.ribbon-cards li.ribbon-card .icon { grid-area: icon; display: grid; place-items: center }

            ul.ribbon-cards li.ribbon-card .icon i { font-size: 2rem }

        ul.ribbon-cards li.ribbon-card .title { grid-area: title; font-size: 1.25rem; font-weight: 700; text-align: center }

        ul.ribbon-cards li.ribbon-card .content { grid-area: content }

@media (min-width: 30rem) {
    ul.ribbon-cards li.ribbon-card { grid-template: "icon title" "icon content"; text-align: left }

        ul.ribbon-cards li.ribbon-card .title { text-align: left }
}

/* STYLE 4 NUMBERS ONLY */
:root { --bg1: linear-gradient(180deg, var(--bg-color-12-top) 0rem, rgb(255 255 255) 20rem); --blue: #588fc3; --green: #62c383; --purple: #9b59b6; --gold: #f1c40f; --red: #e74c3c; --orange: #e67e22; --pink: #d40084; --shadow1: 0 2px 4px #00000026, 0 3px 6px #0000001f; --shadow2: 0 2px 6px #00000044, 0 4px 7px #00000022 }

ul.seo-large-number-list { font-size: var(--font-size); display: flex; flex-wrap: wrap; justify-content: center }

    ul.seo-large-number-list > li { position: relative; width: 100%; border-radius: 0.5em; padding: 0.5em; z-index: 1; transition: all 0.2s; list-style: none }

    ul.seo-large-number-list li .numberWrap { position: absolute }

    ul.seo-large-number-list li .sub-content { padding: 0em 3em 1em 11em; position: relative }

    ul.seo-large-number-list li .number { font-family: var(--mdb-font-condensed); font-size: 14em; font-weight: 900; width: 0.8em; text-align: center; line-height: 0.9; text-shadow: -7px -5px 1px #e0e0e0 }

        ul.seo-large-number-list li .number.fontColor1, .fontColor1 { color: var(--blue) }

        ul.seo-large-number-list li .number.fontColor2, .fontColor2 { color: var(--green) }

        ul.seo-large-number-list li .number.fontColor3, .fontColor3 { color: var(--purple) }

        ul.seo-large-number-list li .number.fontColor4, .fontColor4 { color: var(--pink) }

        ul.seo-large-number-list li .number.fontColor5, .fontColor5 { color: var(--red) }

        ul.seo-large-number-list li .number.fontColor6, .fontColor6 { color: var(--orange) }

    ul.seo-large-number-list li .coverWrap { transform: rotate(130deg); position: absolute; width: 18em; height: 15em; left: -3em; top: -1em }

        ul.seo-large-number-list li .coverWrap .numberCover { position: absolute; background: #ffffffed; width: 18em; height: 6em; border-radius: 50% 50% 0 0; border-bottom: 3px solid #f5f8f7; transition: all 0.4s }

            ul.seo-large-number-list li .coverWrap .numberCover::before { position: absolute; content: ""; bottom: 5px; left: 4em; right: 4em; top: 5em; box-shadow: 0 0 30px 17px #48668577; border-radius: 100px / 10px; z-index: -1 }

            ul.seo-large-number-list li .coverWrap .numberCover::after { position: absolute; bottom: 0; content: ""; left: -10%; width: 120%; height: 150%; background: radial-gradient(at bottom, #48668533, transparent, transparent); z-index: 1 }

    ul.seo-large-number-list > li > .content { margin: 3em 3em 1em 14em; position: relative; min-height: 9em }

        ul.seo-large-number-list > li > .content > h3 { font-size: 2.4em; font-family: var(--mdb-font-sans-serif); font-weight: 600; letter-spacing: -1pt }

/* STYLE 3 */
.olcards, .olcards * { margin: 0; padding: 0; box-sizing: border-box }

.olcards { list-style: none; counter-reset: cardCount; display: flex; flex-direction: column; --cardsGap: 1rem; gap: var(--cardsGap); padding-bottom: 0; padding-inline-start: 0px }

    .olcards li { counter-increment: cardCount; display: flex }

        .olcards li::before { content: counter(cardCount, upper-roman)"."; min-width: 1em; color: #bbbbbb; font-size: 1.4em; font-weight: 300; font-family: var(--mdb-font-sans-serif); z-index: 1; display: flex; justify-content: right; align-items: center; height: 1em }

        .olcards li .content { --inlinePadding: 0em; --boxPadding: 0em; display: grid; padding: 0em 0em 0em 1.5em; grid-template-areas: "icon title" "icon text"; gap: 0em; position: relative; line-height: 1.3 }

        .olcards li .icon { grid-area: icon; align-self: center; font-size: 2em }

        .olcards li .content .title { grid-area: title; font-size: 1.25em; font-weight: 700; line-height: 1.3 }

        .olcards li .content .text { grid-area: text; line-height: 1.3; font-size: 1em }

/* STYLE 5 RIBBONS */
ul.seo-ribbons, ul.seo-ribbons > * { margin: 0; padding: 0; box-sizing: border-box }

ul.seo-ribbons { --outset: clamp(14px, 2vw, 24px); width: 95%; margin-inline: auto; padding-top: calc(var(--outset) * 3); padding-inline: var(--outset); padding-bottom: calc((var(--outset) * 1.5) + 40px); display: grid; gap: calc(var(--outset) * 1); list-style: none; position: relative }

    ul.seo-ribbons::before { content: ""; inset-inline: var(--outset); bottom: var(--outset); top: 0; background: #efefef; border: 1px solid #d2d2d2; position: absolute; z-index: 0; box-shadow: inset 0 0 13px 0px rgb(0 0 0 / .55), 0px 0px 6px 0px #000000; border-radius: calc(var(--outset) / 2) }

    ul.seo-ribbons .title { display: grid; align-items: center; text-align: center; font-size: 2rem; font-weight: 700; min-height: calc(var(--outset) * 2.5); margin-bottom: calc(var(--outset) * -1); padding-inline: var(--outset); padding-top: 1rem; padding-bottom: 0.5rem }

    ul.seo-ribbons li { position: relative; padding: calc(var(--outset) / 6) calc(var(--outset) / 2); color: white; background-color: var(--bg-color, grey); box-shadow: 0 3px 7px 2px rgb(0 0 0 / 84%); --gradSides: rgb(255 255 255 / 0.25); background-image: linear-gradient(90deg, var(--gradSides), transparent calc(var(--outset) * 0.5) calc(100% - var(--outset) * 0.5), var(--gradSides)); min-height: 4rem; /* margin-top: 2em; */ }

        ul.seo-ribbons li p { color: white !important; font-size: 1em; font-weight: 500; }

@media (max-width: 480px) {
    ul.seo-ribbons li p { font-size: 15px; font-weight: 450; }
}

ul.seo-ribbons li::before, ul.seo-ribbons li::after { content: ""; position: absolute; width: var(--outset); height: calc(100% + var(--outset) * 2); bottom: 0; background-color: inherit; border-radius: var(--brTL, 0) var(--brTR, 0) var(--brBR, 0) var(--brBL, 0); --circleY: var(--outset); --circleColor: rgb(0 0 0 / .5); background-image: radial-gradient(circle at var(--circleX) var(--circleY), var(--circleColor) var(--outset), transparent calc(var(--outset) + 0px)), linear-gradient(var(--gradDir), var(--gradSides), transparent calc(var(--outset) * 0.25) calc(100% - var(--outset) * 0.75), rgb(0 0 0 / 0.25)) }

ul.seo-ribbons li::before { right: 100%; --brTL: var(--outset); --brBL: var(--outset); --circleX: 100%; --gradDir: -90deg; --clip-posX: 100% }

ul.seo-ribbons li::after { left: 100%; --brTR: var(--outset); --brBR: var(--outset); --circleX: 0%; --gradDir: 90deg; --clip-posX: 0 }

ul.seo-ribbons li:not(:first-of-type)::before, ul.seo-ribbons li:not(:first-of-type)::after { mask-image: radial-gradient(circle at var(--clip-posX) 0%, rgb(0 0 0 / 0) calc(var(--outset) - 1px), rgba(0 0 0 / 1) var(--outset)) }

/* STYLE 6 Circle Numbered Cards */
ol.circle-num-cards { list-style: none; counter-reset: list; padding: 0 }

    ol.circle-num-cards > li { --stop: calc(100% / var(--length) * var(--i)); --l: 52%; --l2: 84%; --h: calc((var(--i) - 1) * (360 / var(--length))); --c1: hsl(var(--h), 51%, var(--l)); --c2: hsl(var(--h), 51%, var(--l2)); position: relative; counter-increment: list; margin: 2rem auto; padding: 1.5rem 0.5rem; box-shadow: 0.1rem 0.1rem 1rem rgba(0, 0, 0, 0.5); border-radius: 0.25rem; overflow: hidden; background-color: white }

        ol.circle-num-cards > li::before { content: ""; display: block; width: 100%; height: 1rem; position: absolute; top: 0; left: 0; background: linear-gradient(to right, var(--c1) var(--stop), var(--c2) var(--stop)) }

    ol.circle-num-cards h2 { display: flex; align-items: baseline; margin-block-start: 0; margin-block-end: 0; margin: 1rem 0; letter-spacing: -1.5px; font-weight: 500 }

        ol.circle-num-cards h2::before { display: flex; justify-content: center; align-items: center; flex: 0 0 auto; margin-right: 0.25em; width: 1.25em; height: 1.25em; content: counter(list); font-family: var(--mdb-font-sans-serif); font-weight: 800; padding: 0.5rem; border-radius: 50%; background-color: var(--c1); color: white }

    ol.circle-num-cards p { padding: 0 5px 10px 10px; margin: 0 }

ol.sub-list { list-style: none; counter-reset: steps; padding: 0 0 0 5px }

    ol.sub-list h3 { display: block; align-items: baseline; margin: 1.5rem 0; letter-spacing: -0.25px; font-weight: 600; border-bottom: solid 1px var(--c1) }

    ol.sub-list > li { counter-increment: full-list }

    ol .sub-list h3::before { content: "No. " counter(full-list); font-family: var(--mdb-font-condensed); font-weight: 900; padding: 0em; border-radius: 0 0 100% 0; background-color: #ffffff00; opacity: 0.65; color: var(--c1); font-size: 1.25em; display: block; border-bottom: solid 5px #eee; height: 1.1em }

/* STYLE 7 Horizontal Cards with icon and number */
.ol-cards-services, .ol-cards-services * { margin: 0; padding: 0; box-sizing: border-box }

.ol-cards-services { --flapWidth: 2rem; --flapHeigth: 1rem; --iconSize: 2rem; --numberSize: 3rem; --colGapSize: 2rem; max-width: 1000px; margin-inline: auto; display: grid; gap: 2rem; padding-inline-start: var(--flapWidth); color: #222; counter-reset: ol-cards-services-count; list-style: none }

    .ol-cards-services > li { display: grid; grid-template-areas: "icon title" "icon descr"; column-gap: 10px; align-items: center; padding: 0.5rem 0.5rem 0.5rem 0; border-radius: 1rem; background-image: linear-gradient(to bottom right, #e9eaec, #ffffff); counter-increment: ol-cards-services-count; filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.25)); box-shadow: inset 2px 2px 2px white, inset -1px -1px 1px rgba(0, 0, 0, 0.25) }

        .ol-cards-services > li > .icon { grid-area: icon; background: var(--accent-color); width: calc(var(--flapWidth) + var(--iconSize)); border-radius: 0 8px 8px 0; margin-inline-start: calc(-1 * var(--flapWidth)); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); position: relative; display: grid; place-items: center; line-height: 1.25 }

            .ol-cards-services > li > .icon::before { content: ""; position: absolute; width: var(--flapWidth); height: calc(100% + calc(var(--flapHeigth) * 2)); left: 0; top: calc(var(--flapHeigth) * -1); clip-path: polygon(0 var(--flapHeigth), 100% 0, 100% 100%, 0 calc(100% - var(--flapHeigth))); background-color: var(--accent-color); background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)); z-index: -1 }

            .ol-cards-services > li > .icon div::before { color: #ffffff; font-size: var(--numberSize); font-weight: 700; font-family: var(--mdb-font-sans-serif); content: counter(ol-cards-services-count) }

        .ol-cards-services > li > .title { grid-area: title }

            .ol-cards-services > li > .title h3 { font-weight: 800 }

                .ol-cards-services > li > .title h3 a { color: var(--accent-color); text-decoration: none }

        .ol-cards-services > li > .descr { grid-area: descr; padding-left: 0.7rem }

@media (max-width: 480px) {
    .ol-cards-services { --numberSize: 1.75rem; --flapWidth: 0.75rem; --flapHeigth: 1.5rem }

        .ol-cards-services > li > .icon { width: 2rem }

        .ol-cards-services p.lead { font-weight: 350 }
}

/* STYLE 8 COLORED SLICES UNORDERED LIST */
ul.colored-slices { padding-inline-start: 30px }

    ul.colored-slices li { list-style: none; margin: 7px 2px; border-radius: 6px; background-image: linear-gradient(to bottom, #f0f0f0, #dedddd, #ffffff); border: 1px solid #ddd; padding: 0px 0px }

        ul.colored-slices li p { padding: 0.25rem 1rem; display: inline-block; color: black; border: 0.5px solid var(--clr); border-radius: 2px 16px 16px 2px; background-image: linear-gradient(177deg, #0000001a, var(--clr), var(--clr), var(--clr), #ffffffb8); filter: drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.25)); box-shadow: inset 2px 2px 3px 0px white, inset -1px -1px 2px rgba(0, 0, 0, 0.25); margin-right: 10px }

        ul.colored-slices li div { display: inline-block; padding: 0.25rem 0.75rem }

        ul.colored-slices li ul li { margin: 4px 0px; background-image: none; display: inline-block; border: none }

@media (max-width: 575px) {
    ul.colored-slices li div { display: block }
}

ul.colored-slices-2 { padding-inline-start: 0px; text-align: center; }

    ul.colored-slices-2 li { list-style: none; margin: 0px; }

        ul.colored-slices-2 li h4 { display: flex; align-items: center; justify-content: center; padding: 0px; margin: 30px 0 10px 0; color: #444; background: white; z-index: 1; position: relative; }

            ul.colored-slices-2 li h4::after, ul.colored-slices-2 li h4::before { content: ""; flex-grow: 1; height: 1px; background-color: #cdcdcd; display: inline-flex; min-width: 5%; }

            ul.colored-slices-2 li h4::before { margin-right: 5px; }

            ul.colored-slices-2 li h4::after { margin-left: 5px; }

        ul.colored-slices-2 li p { padding: 0.15rem 1rem; display: inline-block; background-color: var(--clr); border-radius: 5px; border: 1px solid #212121; color: white !important; }

    ul.colored-slices-2.inline li { display: inline-block !important; margin: 4px }

        ul.colored-slices-2.inline li:nth-child(1) { --clr: #50464a; }
        ul.colored-slices-2.inline li:nth-child(2) { --clr: #878787; }
        ul.colored-slices-2.inline li:nth-child(3) { --clr: #c71c7b; }
        ul.colored-slices-2.inline li:nth-child(4) { --clr: #6f4d74; }
        ul.colored-slices-2.inline li:nth-child(5) { --clr: #87548f; }
        ul.colored-slices-2.inline li:nth-child(6) { --clr: #673ea6; }
        ul.colored-slices-2.inline li:nth-child(7) { --clr: #545099; }
        ul.colored-slices-2.inline li:nth-child(8) { --clr: #9f5490; }
        ul.colored-slices-2.inline li:nth-child(9) { --clr: #a24235; }
        ul.colored-slices-2.inline li:nth-child(10) { --clr: #506699; }
        ul.colored-slices-2.inline li:nth-child(11) { --clr: #4887ae; }
        ul.colored-slices-2.inline li:nth-child(12) { --clr: #339e92; }
        ul.colored-slices-2.inline li:nth-child(13) { --clr: #804db5; }
        ul.colored-slices-2.inline li:nth-child(14) { --clr: #588775; }
        ul.colored-slices-2.inline li:nth-child(15) { --clr: #ba0e58; }
        ul.colored-slices-2.inline li:nth-child(16) { --clr: #78a235; }
        ul.colored-slices-2.inline li:nth-child(17) { --clr: #a29a35; }
        ul.colored-slices-2.inline li:nth-child(18) { --clr: #a28235; }
        ul.colored-slices-2.inline li:nth-child(19) { --clr: #3e893c; }
        ul.colored-slices-2.inline li:nth-child(20) { --clr: #a26435; }
        ul.colored-slices-2.inline li:nth-child(21) { --clr: #9b0b0b; }
        ul.colored-slices-2.inline li:nth-child(22) { --clr: #8d566e; }
        ul.colored-slices-2.inline li:nth-child(23) { --clr: #567b8d; }
        ul.colored-slices-2.inline li:nth-child(24) { --clr: #787275; }
/* Colored Service Blocks */
ul.service-block { padding-inline-start: 0px }

    ul.service-block li { list-style: none }

        ul.service-block li a, .service-block a { margin: 7px 2px; border-radius: 6px; background-image: linear-gradient(to bottom, #f0f0f0, #dedddd, #ffffff); border: 1px solid var(--clr); display: block; text-decoration: none; color: #3b3c3e; }

            ul.service-block li p, .service-block a p, .service-block a h3 { padding: 0.25rem 0.75rem; border: 1px solid #8d8d8d; background-color: var(--clr) }

            .service-block a p, .service-block h3 { text-align: center }

            ul.service-block li div, .service-block a div { display: block; padding: 0.25rem 0.75rem }

            ul.service-block li a:hover, .service-block a:hover { background-image: linear-gradient(180deg, #999, #555,#333,#333); border: 1px solid #000 }

                ul.service-block li a:hover p, .service-block a:hover p, .service-block a:hover h3 { background: none; border-color: transparent; color: #fff }

                ul.service-block li a:hover div, .service-block a:hover div { color: var(--clr); background-image: none }

/* PLAIN ORDERED LISTS 1 OR 2 Liners */
.list-1, .list-2 { counter-reset: items; list-style: none; padding-left: 4rem }

    .list-1 li, .list-2 li { margin-bottom: 5px; position: relative; counter-increment: items; display: block }

        .list-1 li::before, .list-2 li::before { content: counter(items); Position: absolute; Left: -3.25rem; top: 10px; font-size: 2rem; Color: #c5c5c5; Font-weight: 400; text-align: right; width: 3rem; padding-right: 10px; border-right: 3px solid #e5e5e5; display: inline-block }

ul.list-1 > li::before, ul.list-2 > li::before { content: "\00BB"; border: none !important }

ol.list-1 > li::before { top: 0px; line-height: 1.25 }

ul.list-1 > li::before { top: -6px; }

.list-1 li p, .list-2 li p { padding: 0 0 0 5px; margin: 0 0 5px 0 }

/* CATEGORIES AND GRID BORDERS AND  IMAGE SPRITES  */
.custom-outline-text-style-1 { text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; letter-spacing: -4px; color: #d3d3d3; opacity: 0.1; font-size: 150px; font-weight: 900; line-height: 1; }

:root { --border-grid: 1px dotted#7e7b7b; }

.air-compressor-type, .air-compressor-brand, .air-compressor-part { width: 100%; display: flex; flex-direction: column; height: 100%; }

.main-content .air-compressor-brand { padding: 50px 0 0 0; }


.air-compressor-company-name, .air-compressor-type-name, .air-compressor-part-name { flex-grow: 1; display: flex; align-items: center; /* text at bottom for consistency */ justify-content: center; text-align: center; font-family: "Sofia Sans Extra Condensed"; padding: 8px 0 3px 0; font-size: 1.4rem; line-height: 1; font-weight: 600; color: #50455c; border-top: solid 1px #bababa; border-bottom: 5px solid #313131; background: url("/images/tile5.png") repeat; text-transform: uppercase; letter-spacing: -0.3px; width: 100%; }
.main .air-compressor-company-name, .main .air-compressor-type-name, .main .air-compressor-part-name { height: auto; }

.air-compressor-company-name { border-top: solid 1px #afafaf; border-bottom: 0px; padding: 6px 0px 4px; background: url("/images/new/tile2.webp") repeat; }

.air-compressor-parts { display: block; width: 200px; height: 200px; margin: 1px auto 10px; background-image: url('/images/new/air-compressor-parts.webp'); background-repeat: no-repeat; transition: all linear 1s; }

.air-compressor-types { display: block; width: 160px; height: 160px; margin: 0 auto 20px; background-image: url('/images/new/air-compressor-types-and-categories.webp'); background-repeat: no-repeat; transition: all linear 1s; }

.air-compressor-manufacturer { display: block; width: 200px; height: 100px; margin: 0px auto 50px; background-image: url('/images/new/air-compressor-manufacturers.webp'); background-repeat: no-repeat; transition: all linear 1s; }

.main a:hover .air-compressor-parts, .main a:hover .air-compressor-types, .main a:hover .air-compressor-manufacturer { transform: scale(0.75); transition: all cubic-bezier(0.28, 0.67, 0.27, 1.55) 1s; }


.grid-bordered .col { border-right: var(--border-grid); border-bottom: var(--border-grid); }

.grid-bordered a:hover { text-decoration: none; }

    .grid-bordered a:hover .air-compressor-company-name, .grid-bordered a:hover .air-compressor-type-name, .grid-bordered a:hover .air-compressor-part-name { color: white; background: #434343; border-bottom-color: #ffe200; }

@media (max-width: 575.98px) {
    .grid-bordered .col a { border: var(--border-grid); }

    .grid-bordered .col { border: none; }
    .main .air-compressor-brand { padding: 0 }
    .main .air-compressor-manufacturer { margin: 0px auto 10px; }
    .main .air-compressor-types { margin: 0 auto }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .grid-bordered .col:nth-child(1), .grid-bordered .col:nth-child(2) { border-top: var(--border-grid); }

    .grid-bordered .col:nth-child(2n+1) { border-left: var(--border-grid); }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .grid-bordered .col:nth-child(1), .grid-bordered .col:nth-child(2), .grid-bordered .col:nth-child(3) { border-top: var(--border-grid); }

    .grid-bordered .col:nth-child(3n+1) { border-left: var(--border-grid); }
}

@media (min-width: 992px) {
    .grid-bordered .col:nth-child(1), .grid-bordered .col:nth-child(2), .grid-bordered .col:nth-child(3), .grid-bordered .col:nth-child(4) { border-top: var(--border-grid); }

    .grid-bordered .col:nth-child(4n+1) { border-left: var(--border-grid); }
}


/* NAVIGATION */
nav { position: fixed; z-index: 99000; width: 100%; height: 80px; border-bottom: 1px solid #a3a3a3; background: linear-gradient(to bottom, #ffffff, #dadada, #f5f5f5); box-shadow: 0px 2px 8px 1px #0000008f; }
    nav .wrapper { position: relative; padding: 0px 10px; height: 80px; line-height: 40px; margin: auto; display: flex; /* max-width: 1300px; */ align-items: center; justify-content: space-between; }
    nav input { display: none; }
.wrapper .nav-links { width: calc(100% - 160px); display: inline-block; }
.nav-links-row { display: inline-flex; width: 100%; justify-content: center; margin: 0; padding: 0; max-width: 1300px; }

.nav-links li { list-style: none; }
.nav-links-row > li > a { color: #444; text-decoration: none; font-size: 1rem; font-weight: 600; height: 100%; display: block; position: relative; padding: 0px 8px; line-height: 40px; margin: 0 2px; }
.nav-links-row > li.header-extra-info > a { display: inline-block; font-size: 1em; /* font-weight: 600; */ letter-spacing: 0px !important; }
.wrapper .button { color: #fff; font-size: 26px; cursor: pointer; display: none; }
.header-logo-img, .header-logo-img-sm { position: relative; top: 0; width: 160px; height: 80px !important; }
.header-logo-img-sm { height: 60px !important; }



@media screen and (max-width: 991px) {

    .mega-box ul { padding-left: 0; }
    .wrapper .button { display: block; }
    .wrapper .nav-links { position: fixed; height: calc(100vh - 60px); width: calc(100% - 40px); max-width: min(550px, calc(100vw - 40px)); top: 60px; left: -100%; display: block; padding: 10px 0px 50px; line-height: 40px; overflow-y: auto; box-shadow: 0px 15px 15px rgba(0,0,0,0.18); transition: all 0.3s ease; background: #ffffff; }
    .nav-links-row { display: block; list-style: none; }
    .mega-box { display: block; position: relative; opacity: 1; visibility: visible; top: 0px; padding: 0px; background: transparent; }
    .fixed-vertical { position: fixed; top: 100%; left: -100%; display: block; transform: rotate(270deg); transform-origin: left top; background: #353535; color: white; letter-spacing: 1px; color: white; z-index: 9999; height: 40px; width: calc(100vh - 60px); text-align: center; transition: all 0.3s ease; }
    /* custom scroll bar */
    ::-webkit-scrollbar { width: 15px; }
    ::-webkit-scrollbar-track { background: #7f7f7f; }
    ::-webkit-scrollbar-thumb { background: #4a8aa9; }
    .button.menu-btn { color: #333; font-size: 2rem; font-weight: bold }
    #menu-btn:checked ~ .nav-links { left: 0; box-shadow: inset -6px 3px 7px -2px black; }
    #menu-btn:checked ~ .fixed-vertical { left: min(calc(100% - 40px),min(550px, calc(100vw - 40px))); }
    #menu-btn:checked ~ .button.menu-btn { display: none; }
    #close-btn:checked ~ .button.menu-btn { display: block !important; }
    .button.close-btn { line-height: 40px; }
    .nav-links-row > li > a { border-top: 1px solid #eee; border-bottom: 1px solid #eee; font-size: 1rem; }
    .mega-box li .air-compressor-parts,
    .mega-box li .air-compressor-types,
    .mega-box li .air-compressor-manufacturer { display: none; }
    .mega-box .air-compressor-company-name, .mega-box .air-compressor-type-name, .mega-box .air-compressor-part-name, .mega-box .linkss a, .mega-box .linkss div { background: none; font-family: "Montserrat"; font-weight: 400; text-transform: capitalize; display: block; font-size: 1em; text-align: left; line-height: 1.8; color: #2b2b2b; border-top: none; border-bottom: 1px solid #eee; padding: 4px 0px 4px 25px !important; }
    .nav-links-row a:hover { text-decoration: none !important; }
    nav { height: 60px; }
        nav .wrapper { height: 60px; }
}

@media (min-width: 992px) {
    #header .nav-links-row > li > a { letter-spacing: -0.5px; }
        #header .nav-links-row > li > a:before { content: ""; position: absolute; width: auto; height: 3px; top: 50%; left: 15px; right: 15px; margin-top: 15px; transform: translateY(-3px); background: transparent; opacity: 0; }
        #header .nav-links-row > li > a:hover { text-decoration: none; }
    #header .nav-links-row > li:hover > a:before { opacity: 1; background: #444; right: 15px; }
    #header nav ul > li .mega-box { transition: none; border-radius: 0 0 8px 8px; width: 100%; min-width: 100%; left: 0; position: absolute; min-height: min(500px, calc(100vh - 90px)); padding: 10px 0px 20px; border: 1px solid black; border-top: 4px solid #CDDC39; box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.75); margin: 0px 0px; overflow-y: auto; top: -100vh; max-height: calc(100vh - 90px); /* z-index: -3000; */ opacity: 0; visibility: hidden; background: white; }
    #header nav ul > li:hover .mega-box { opacity: 1; visibility: visible; top: 80px; z-index: 100000; }

    .mega-box .air-compressor-parts { width: 60px; height: 60px; margin: 12px auto 0px; background-position-y: -40px; background-image: url('/images/new/air-compressor-parts-manufacturers-and-types.webp') ; }
    .mega-box .air-compressor-types { width: 60px; height: 60px; margin: 12px auto 0px; background-position-y: -100px; background-image: url('/images/new/air-compressor-parts-manufacturers-and-types.webp') ; }
    .mega-box .air-compressor-manufacturer { width: 100px; height: 40px; margin: 12px auto 20px; background-image: url('/images/new/air-compressor-parts-manufacturers-and-types.webp'); }
    .mega-box .air-compressor-company-name, .mega-box .air-compressor-type-name, .mega-box .air-compressor-part-name { background: none; border-top: 1px solid #cccccc00; border-bottom: 2px solid #cddc39; height: calc(100% - 70px); font-weight: 500; text-transform: capitalize; letter-spacing: 0px; font-size: 1.225rem; }
    .mega-box li > a { border: 2px transparent solid; }
        .mega-box li > a:hover { border: 2px #e5e5e5 solid; border-bottom-color: #cddc39; background-color: #fbfbfb !important; }
            .mega-box li > a:hover .air-compressor-company-name, .mega-box li > a:hover .air-compressor-type-name, .mega-box li > a:hover .air-compressor-part-name { color: #000000; }
    .mega-box .linkss li > a, .mega-box .linkss li > div { color: #454545; font-weight: 400; line-height: 1; padding: 4px 3px; display: block; margin: 1px 2px; font-family: 'Sofia Sans Extra Condensed'; font-size: 21px; }
    .mega-box .linkss li > div { font-weight: 900 !important; }
    .mega-box .air-compressor-type, .mega-box .air-compressor-brand, .mega-box .air-compressor-part { min-height: 110px; max-width: 200px; display: block; margin: 0px auto; }
    .mega-box .air-compressor-brand { min-height: 120px; padding: 30px 0 0 0 }

    .mega-box .linkss li:hover > a { color: #0757cf; }
    .nav-links-row a:hover { text-decoration: none !important; }
}

@media screen and (min-width: 1200px) {
    .mega-box .air-compressor-company-name, .mega-box .air-compressor-type-name, .mega-box .air-compressor-part-name { font-size: 1.3rem; font-weight: 400; }
    .content { max-width: 1200px; margin: 0 auto }
}

@media screen and (min-width: 1800px) {
    .nav-links-row { max-width: 800px; margin-top: 40px }
}

@media screen and (max-width: 550px) {
    .adjust-small-1 { font-size: 40px; font-size: Clamp(28px, Calc(28px + (50 * ((100vw - 320px) / 550))), 78px) !important; }
    .adjust-small-2 { font-size: 30px; font-size: Clamp(16px, Calc(16px + (34 * ((100vw - 320px) / 550))), 50px) !important; }
}

.adjust-small-3, .adjust-small-4 { text-shadow: rgb(0, 0, 0) 1px 1px 2px, rgb(0, 0, 0) -1px -1px 2px; }

@media screen and (max-width: 680px) {
    .adjust-small-3 { font-size: 40px; font-size: Clamp(18px, Calc(18px + (42 * ((100vw - 320px) / 680))), 60px) !important; margin-top: 5px !important; font-weight: 900 !important; letter-spacing: 1px !important; word-spacing: 3px; text-shadow: rgb(0, 0, 0) 1px 1px 2px }
    .adjust-small-4 { font-size: 30px; font-size: Clamp(14px, Calc(14px + (26 * ((100vw - 320px) / 680))), 40px) !important; font-weight: 400 !important; letter-spacing: 0.5px !important; text-shadow: rgb(0, 0, 0) 1px 1px 2px }
}



.form-outline { display: grid; }


@media screen and (max-width: 549.8px) {
    .custom-section-svg > svg.scroll-animation { animation: scroll-background-sm 15s ease-in-out 3; }
}

@media screen and (min-width: 550px) {
    .custom-section-svg > svg.scroll-animation { animation: scroll-background 15s ease-in-out 3; }
}


@keyframes scroll-background {
    0% { background-position: 200px center; }
    50% { background-position: 600px center; }
    100% { background-position: 200px center; }
}


@keyframes scroll-background-sm {
    0% { background-position: 200px center; }
    50% { background-position: 400px center; }
    100% { background-position: 200px center; }
}


.card.blog { border-radius: 0px !important; background: transparent; margin: 0 auto; border: none; text-align: center; max-width: 95%; }
    .card.blog .card-body { padding: 0px 0px 20px !important; }
        .card.blog .card-body a { display: inline-block !important; color: #535353 !important; padding: 0px; margin: 0; text-align: center; }
            .card.blog .card-body a.blog-pic img { margin: 0 0 15px 0 !important; border-radius: 4px; box-shadow: -2px 2px 7px 3px #00000080,2px -2px 2px 0px #00000080; padding: 0px; display: inline-block; }
            .card.blog .card-body a.blog-pic:hover img { opacity: 0.75 }
        .card.blog .card-body h4 { max-width: 550px; display: inline-block; }
            .card.blog .card-body h4 a:hover { color: #bf5277 !important; }



.pn { font-size: 14px; }