/* site.css - the site's own styles in one file (2026-10-31): the Orgon and barcode faces,
   everything chStyle2.css held, then the page sections.
   Load order matters and is the old one: this file takes chStyle2.css's place, after nav.css
   and BEFORE foundation.css, so Foundation still wins the ties it won before. Page-module
   files (styleM.css and the grid files) load later, from their own views. */

/* ==========================================================================
   Fonts: Orgon (Fontspring kit) and the EAN-13 barcode face
   ========================================================================== */

@font-face {
    font-family: 'orgonblack';
    src: url('fonts/orgon_black_macroman/Orgon-Bla-webfont.woff2') format('woff2'),
         url('fonts/orgon_black_macroman/Orgon-Bla-webfont.woff') format('woff'),
         url('fonts/orgon_black_macroman/Orgon-Bla-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}
@font-face {
    font-family: 'orgonbold';
    src: url('fonts/orgon_bold_macroman/Orgon-Bol-webfont.woff2') format('woff2'),
         url('fonts/orgon_bold_macroman/Orgon-Bol-webfont.woff') format('woff'),
         url('fonts/orgon_bold_macroman/Orgon-Bol-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}
@font-face {
    font-family: 'orgonextrabold';
    src: url('fonts/orgon_extrabold_macroman/Orgon-XBol-webfont.woff2') format('woff2'),
         url('fonts/orgon_extrabold_macroman/Orgon-XBol-webfont.woff') format('woff'),
         url('fonts/orgon_extrabold_macroman/Orgon-XBol-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}
@font-face {
    font-family: 'orgonextralight';
    src: url('fonts/orgon_extralight_macroman/Orgon-XLig-webfont.woff2') format('woff2'),
         url('fonts/orgon_extralight_macroman/Orgon-XLig-webfont.woff') format('woff'),
         url('fonts/orgon_extralight_macroman/Orgon-XLig-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}
@font-face {
    font-family: 'orgonlight';
    src: url('fonts/orgon_light_macroman/Orgon-Lig-webfont.woff2') format('woff2'),
         url('fonts/orgon_light_macroman/Orgon-Lig-webfont.woff') format('woff'),
         url('fonts/orgon_light_macroman/Orgon-Lig-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}
@font-face {
    font-family: 'orgonmedium';
    src: url('fonts/orgon_medium_macroman/Orgon-Med-webfont.woff2') format('woff2'),
         url('fonts/orgon_medium_macroman/Orgon-Med-webfont.woff') format('woff'),
         url('fonts/orgon_medium_macroman/Orgon-Med-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}
@font-face {
    /* 2026 Fontspring kit - ships woff/woff2 only, no eot/ttf/svg. */
    font-family: 'orgonmediumitalic';
    src: url('fonts/orgon_mediumitalic_macroman/orgon-medita-webfont.woff2') format('woff2'),
         url('fonts/orgon_mediumitalic_macroman/orgon-medita-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}
@font-face {
    font-family: 'orgonregular';
    src: url('fonts/orgon_regular_macroman/Orgon-Reg-webfont.woff2') format('woff2'),
         url('fonts/orgon_regular_macroman/Orgon-Reg-webfont.woff') format('woff'),
         url('fonts/orgon_regular_macroman/Orgon-Reg-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}
@font-face {
    font-family: 'orgonthin';
    src: url('fonts/orgon_thin_macroman/Orgon-Thin-webfont.woff2') format('woff2'),
         url('fonts/orgon_thin_macroman/Orgon-Thin-webfont.woff') format('woff'),
         url('fonts/orgon_thin_macroman/Orgon-Thin-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

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

/* ==========================================================================
   Site: shell, footer, headings, tiles, overviews, products, Catalyst, responsive overrides
   ========================================================================== */

.Site {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.Site2 {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.bodywrapper {
    flex: 1 0 auto;
}

.material-icons {
    vertical-align: middle;
}

/* =========================
   Footer base
   ========================= */

#footer {
    padding-top: 2rem;
    width: 100%;
    background: #282828;
    color: #fff;
    z-index: 25;
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
    font-size: 0.875rem;
}

.footer {
    clear: both;
}

/* =========================
   Footer headings (Follow Us / Support)
   ========================= */

#footer .footer-heading,
#footer .footerNav-heading {
    display: block;
    margin: 0 0 .4rem 0;
    padding: 0;
    font-family: "orgonregular", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 22.4px;
    letter-spacing: 0.56px;
    color: #fff;
}

/* Uppercase for all footer nav/link text in those lists */

#footer .footerNav-heading,
#footer .footer-heading {
    text-transform: uppercase;
}

/* Exception: brand must keep its casing */

#footer .brand-name {
    text-transform: none;
}

/* Spacing under Follow Us only */

#footer h4.footer-heading {
    margin-bottom: 8px;
}

/* =========================
   Follow Us column
   ========================= */

#footer .footer-col--follow {
    margin-top: 0;
    padding-top: 0;
}

/* =========================
   Support / additional info column
   ========================= */

#footer .additionalinfo a {
    color: #999;
    font-family: "orgonlight", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}

#footer .additionalinfo > ul,
#footer .additionalinfo .small-block-grid-2 {
    margin-top: 0;
}

#footer ul.footerNav {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
}

/* =========================
   Social icons
   ========================= */

#footer .footer-social {
    list-style: none;
    margin: 0;
    padding: 2rem 0;
    display: flex;
    gap: 12px;
    align-items: center;
}

#footer .footer-social__link {
    width: 44px;
    height: 44px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

#footer .footer-social__link i {
    font-size: 22px;
    line-height: 1;
    color: #fff;
}

#footer .footer-social__link:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

#footer .footer-social__link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

.reveal-modal-bg {
    position: fixed;
}

.modal-text p {
    font-size: 14px;
    line-height: 15px;
}

/* =========================================================
   PhotoSwipe + mobile safety
   ========================================================= */

/* Prevent horizontal scroll bleed (mobile zoom edge cases) */

html,
body {
    overflow-x: hidden;
}

/* Ensure PhotoSwipe never exceeds viewport width */

.pswp,
.pswp__scroll-wrap,
.pswp__container,
.pswp__item,
.pswp__zoom-wrap,
.pswp__ui {
    max-width: 100vw !important;
}

/* =========================================================
   Product gallery � hero
   ========================================================= */

.product-gallery__hero img {
    width: 100%;
    height: auto;
    display: block;
}

/* =========================================================
   Product gallery � thumbnails
   ========================================================= */

.product-gallery__thumbs {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.product-gallery__thumb {
    position: relative;
    flex: 0 0 auto;

    /* IMPORTANT: do not shrink */
    flex-shrink: 0;

    /* belt + suspenders */
    width: 160px;

    /* lock the slot */
    height: 160px;

    /* lock the slot */
    padding: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border: 0;
    cursor: pointer;
}

.product-gallery__thumb img {
    width: 100%;
    height: 100%;
    display: block;
    -o-object-fit: contain;
       object-fit: contain;

    /* IMPORTANT: no cropping */
}

/* underline indicator */

.product-gallery__thumb::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -18px;
    width: 20%;
    height: 4px;
    background-color: #888;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.product-gallery__thumb.is-active::after {
    opacity: 1;
}

/* =========================================================
   Active thumbnail indicator (underline)
   ========================================================= */

.push {
    height: 76px;
}

.italic {
    font-style: italic;
}

.PN-EAN {
    font-family: "myriad-pro",sans-serif;
    font-weight: 400;
    font-size: 0.7125rem;
    margin-bottom: 20px;
}

.PN,
.EAN {
    float: left;
    padding-right: 10px;
}

.PN-no,
.EAN-no {
    color: #888;
    padding-left: 2px;
}

.PN-EAN_2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.PN_2,
.EAN_2 {
    flex: 0;
    padding: 0 0.6rem;
}

.graphcaption p {
    line-height: 1em;
    font-family: "orgonextralight";
    margin-left: 40px;
}

div#main.container h3 {
    margin-top: 1.8em;
    margin-bottom: 1.6em;
}

ul.small-block-grid-6 {
    line-height: 0.1;
}

ul.small-block-grid-6.logoheader {
    line-height: 1.6;
}

ul.accordion {
    margin-left: 0px;
}

li.accordion-navigation {
    position: relative;
}

li.accordion-navigation a.toggle {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 10px;
    right: 10px;
    background: #888;
}

span.accordion-header-icon::before {
    position: absolute;
    font-family: FontAwesome;
    top: 0;
    left: 0;
    content: "\25AE";
    width: 30px;
    height: 30px;
}

.acc-head-icon::before {
    position: absolute;
    font-family: FontAwesome;
    font-size: 0.8em;
    top: 8px;
    right: 14px;
    content: "\f077";
    color: #282828;
}

.accordion-icon:before {
    position: absolute;
    font-family: FontAwesome;
    font-size: 0.9em;
    top: 12px;
    right: 14px;
    content: "\f067";
    color: #888;
}

.active .accordion-icon:before {
    content: "\f068";
}

.accordion-navigation a:hover .accordion-icon::before {
    color: #000;
}

.external-link::before {
    font-family: FontAwesome;
    font-size: 1.4em;
    content: "\f14c";
    padding-right: 0.4em;
}

.download-link::before {
    font-family: FontAwesome;
    font-size: 1.4em;
    content: "\f019";
    padding-right: 0.4em;
}

p a {
    font-weight: 600;
}

#effect-1 div.horizontalRule {
    clear: both;
    width: 100%;
    background-color: #d1d1d1;
    height: 1px;
    margin-top: 10px;
    margin-bottom: 10px;
}

#effect-1 li.divider {
    height: 1px;
    background: #d1d1d1;
    margin: 10px 0;
}

#main p a:hover {
    text-decoration: underline;
}

#full-width-slider {
    color: #000;
    width: 100% !important;
    bottom: 0px;

    /* height of thumbs (if not required set to 0) */
}

.infoBlockGen3 {
    position: absolute;
    top: 30px;
    left: 30px;
    padding-bottom: 0;
    overflow: hidden;
    padding: 16px 16px 16px 16px;
}

.block-shaded {
    background: rgba(0, 0, 0, 0.20);
}

.infoBlockGen4 {
    position: absolute;
    top: 64%;
    left: 12%;
    padding: 0 3em;
    overflow: hidden;
}

.infoBlockGen4 h2.slogan {
    font-family: "orgonblack", sans-serif;
    font-size: 4.0em;
    line-height: 1.2em;
    color: #fff;
}

.infoBlockGen5 {
    position: absolute;
    top: 20%;
    left: 14%;
    padding-bottom: 0;
    overflow: hidden;
}

div.modelLogo img.catalystModelLogo {
    max-width: 60%;
    filter: drop-shadow(2px 2px 2px #151515);
}

.infoBlockGen3 p {
    color: #fff;
    margin: 0 0;
    padding: 0 0;
    font-size: 1.8em;
    line-height: 1em;
}

.infoBlockGen3 p.blockLight {
    font-family: "proxima-nova",sans-serif;
    font-style: normal;
    font-weight: 100;
    font-size: 1.8em;
    line-height: 1em;
}

.infoBlockGen3 p.blockHeavy {
    font-family: "proxima-nova",sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 2.6em;
    line-height: 1em;
}

.infoBlockGen3 a {
    color: #fff;
    margin: 0px 0 0 0px;
    padding: 3px 20px 2px 20px;
    border: 1px solid #fff;
    line-height: 3em;
    font-family: "proxima-nova",sans-serif;
    font-style: normal;
    font-weight: 100;
    font-size: .7em;
}

.infoBlockGen3 a:hover {
    color: #fff;
}

.externalCaption {
    margin: 10px 0;
    padding: 0 6px;
}

.externalCaption p.blockHeavy {
    font-family: "orgonextrabold", sans-serif;
    font-size: 1.4em;
    line-height: 0.8em;
    margin-bottom: 12px;
}

.externalCaption a {
    color: #fff;
    background: #000;
    margin: 0px 0 0 0px;
    padding: 3px 20px 2px 20px;
    border: 1px solid #000;
    line-height: 3em;
    font-family: "proxima-nova",sans-serif;
    font-style: normal;
    font-weight: 100;
    font-size: .7em;
}

.externalCaption a:hover,
.externalCaption a:active {
    color: #000;
    background: #fff;
}

.tilerow>div {
    padding: 0 0;
    min-height: 360px;
}

.tilerow>div.blackTile {
    background-color: #000;
}

.tilerow > div.blackTile blockquote {
    color: #b3b3b3;
    line-height: 1.4rem;
}

.tilerow > div.blackTile blockquote cite {
    color: #e6e6e6;
    line-height: 3rem;
}

.tilerow div.imageTile div.TileHeader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    text-align: center;
}

.tilerow div.imageTile div.TileHeader .HeroText {
    color: white;
    text-transform: uppercase;
    font-size: 2rem;
    letter-spacing: .2rem;
    font-family: "orgonbold";
}

.tilerow div.FeaturedContentTile .TileTextCol {
    margin-top: 4rem;
    text-align: right;
}

.tilerow div.FeaturedContentTile .HeroText {
    color: white;
    margin: 0 0;
    text-transform: uppercase;
    font-size: 2.2rem;
    font-family: "orgonbold";
}

.tilerow div.FeaturedContentTile .HeroText strong {
    font-family: "orgonextrabold";
    letter-spacing: -.1rem;
}

.tilerow div.FeaturedContentTile .SubText {
    color: white;
    margin: 0;
    text-transform: uppercase;
    font-size: 1.2rem;
    font-family: "orgonlight";
}

.tilerow div.FeaturedContentTile hr.custom-divider {
    display: inline-block;
    text-align: right;
    border: none;
    height: .08rem;
    background-color: #fff;
    margin: 1rem 0 .6rem 0;
    width: 2rem;
}

.tilerow>div.textTile {
    padding: 1rem 1rem;
}

.tilerow div.PairAndFairTile {
    background-color: #bec6cb;
    background-repeat: no-repeat;
    background-image: linear-gradient(90deg, rgba(124,148,168,1), rgba(124,148,168,0));
    color: #000000;
    text-transform: uppercase;
    text-align: right;
}

.tilerow .row div.TileTextCol {
    padding: 1rem .8rem 1rem 1rem;
}

.overviewIntro {
    padding: 4rem 0;
}

div.PairAndFairTileImage {
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: left 50% center;
}

img.PairAndFairLogo {
    padding-right: 2rem;
    padding-bottom: 6rem;
}

div.TileTextCol h4.PairAndFairTileLead {
    font-size: 1.4rem;
}

div.TileTextCol p.PairAndFairTileSub {
    line-height: 1rem;
}

hr.custom-divider {
    display: inline-block;
    text-align: right;
    border: none;
    height: .08rem;
    background-color: #000;
    margin: 2rem 0 .6rem 0;
    width: 2rem;
}

.blackTile p {
    color: #fff;
    padding: 0 0;
    margin: 0 0;
    font-size: 1.4em;
}

.blackTile p.blockLight {
    font-family: "orgonextralight", sans-serif;
    line-height: 1.4em;
    font-size: 1em;
    margin-bottom: 6px;
}

.blackTile p.blockHeavy {
    font-family: "orgonbold", sans-serif;
    line-height: 1.2em;
    font-size: 1.4em;
    margin-bottom: 6px;
}

.blackTile a {
    color: #ffffff;
}

.blackTile a:hover {
    color: #d7d7d7;
}

.tilerow > div.feature_tile {
    padding: 60px 60px;
    text-align: center;
    display: flex;

    /* establish flex container */
    align-items: center;
    justify-content: center;
}

.tilerow > div.feature_tile2 {
    padding: 60px 60px;
    text-align: left;
    display: flex;

    /* establish flex container */
    align-items: center;
    justify-content: center;
}

.tilerow > div.feature_tile3 {
    padding: 3rem 8rem;
    text-align: left;
    background: linear-gradient(90deg, rgba(174,187,194,1) 0%, rgba(186,196,201,1) 40%, rgba(203,209,212,1) 100%);
}

.tilerow > div.feature_tile4 {
    padding: 6rem 6rem;
    text-align: left;
    display: flex;

    /* establish flex container */
    align-items: center;
    justify-content: center;
}

.compound-description {
    margin-bottom: 3rem;
}

.two-pair-row {
    background: linear-gradient(90deg, rgba(174,187,194,1) 0%, rgba(186,196,201,1) 40%, rgba(203,209,212,1) 100%);
}

.tilerow>div.feature_1 {
    background-color: #000;
}

.tilerow>div.feature_2 {
    background-color: #f5f5f5;
}

.model-list-heading {
    text-align: center;
    padding: 1rem 4rem;
}

li.discModelNameli {
    height: 100%;
}

.discModelName {
    text-align: center;
    height: 100%;
    align-items: center;
}

.discModelName h4 {
    font-size: 1.2em;
    font-family: "orgonmedium", sans-serif;
    padding: 40px 0;
}

/* the "DISC 36" lockup (ProductLockup) in place of the plain model name */
.discModelName svg.lockup {
    display: inline-block;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

.superDetail_container,
.superDetail_container2 {
    display: block;
}

.superDetail_container2 {
    padding-bottom: 20px;
    margin-top: -20px;
}

.feature_1 p,
.feature_1 h2 {
    color: #fff;
}

.feature_tile p {
    padding: 0 0;
    margin: 0 0;
    font-size: 1.4em;
}

.feature_tile p.blockLight {
    font-family: "orgonextralight", sans-serif;
    line-height: 1.2em;
    font-size: 1.2em;
    margin-bottom: 6px;
}

.feature_tile h2.blockHeavy {
    text-transform: uppercase;
}

.feature_1 a {
    color: #ffffff;
}

.feature_1 a:hover {
    color: #d7d7d7;
}

.feature_tile div.vCen {
    margin: 5% 5%;
}

.feature_tile4 div.vCen {
    margin: 5% 5%;
}

.imageTile {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#mini-width-slider {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0px;

    /* height of thumbs (if not required set to 0) */
    height: auto;

    /* optionally add !important for WP version */
    width: auto;
}

.miniHero {
    height: 100%;
    width: 100%;
}

.blackTile div.vCen {
    margin: 5% 15%;
}

div.fullWidth {
    max-width: 3400px;
}

.sliderContainer {
    height: 100%;
}

.news-item {
    padding-bottom: 5em;
}

div.sidebar {
    margin-top: 60px;
}

.bigPush {
    padding-top: 400px;
}

a#notice {
    display: block;
    overflow: hidden;
    position: relative;
    padding: 1rem 0;
    width: 100%;
    background: #FCE400;
}

a#notice #closeNotice {
    position: absolute;
    top: 0px;
    right: 8px;
    font-size: 24px;
}

a#notice .info {
    left: 0;
    right: 0;
    z-index: 20;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

a#notice .info h5 {
    color: #282828;
    margin: 0 0;
    padding: 0 0;
}

.infoBlock2 {
    position: absolute;
    top: 30px;
    right: 30px;
    left: auto;
    max-width: 40%;
    padding-bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    overflow: hidden;
    padding: 20px;
}

.infoBlockLeftBlack {
    color: #FFF;
    background: rgba(0,0,0,0.2);
    left: 30px;
    right: auto;
}

.infoBlock2 h4 {
    font-size: 20px;
    line-height: 1.2;
    margin: 0;
    padding-bottom: 3px;
}

.infoBlock2 p {
    font-size: 14px;
    margin: 4px 0 0;
}

.infoBlock2 a {
    color: #FFF;
    text-decoration: underline;
}

.infoBlock2 h1,
.infoBlock2 h2,
.infoBlock2 h5 {
    font-family: "orgonextralight";
    color: #fff;
    padding: 0px 0 0px 0;
    margin: 4px 0;
}

.infoBlockGen6 {
    position: absolute;
    left: auto;
    top: 36%;
}

.infoBlockGen6 h1 {
    font-family: "orgonbold";
    color: #fff;
}

h1.XLheading {
    font-size: 3.8rem;
}

.txtCent {
    text-align: center;
    width: 100%;
}

.creditBlock {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 2%;
    overflow: hidden;
    padding: 0 0;
}

.imageHolderForPhotoCredit {
    position: absolute;
}

.creditBlock2a {
    position: absolute;
    overflow: hidden;
    padding: 0 0;
    bottom: 0;
    left: 16px;
}

.creditBlock3 {
    position: absolute;
    top: auto;
    bottom: 10px;
    left: 10px;
    overflow: hidden;
    padding: 0 0;
}

.photoCredit,
.photoCreditStandard {
    color: rgba(255, 255, 255, 0.40);
}

.photoCredit p {
    font-size: .05em;
    margin: 0 0;
    text-shadow: 1px 1px rgba(0,0,0, 0.3);
}

.photoCreditNews p {
    font-size: .6em;
    margin: 0 0;
    text-shadow: 1px 1px rgba(0,0,0, 0.3);
}

.photoCreditStandard p {
    font-size: .6em;
    margin: 0 0;
    text-shadow: 1px 1px rgba(0,0,0, 0.3);
}

.large {
    font-size: 50px;
    line-height: 50px;
}

.medium {
    font-size: 35px;
    padding: 0 5px;
    font-weight: 100;
}

.small {
    font-size: 20px;
    padding: 0 5px;
}

.block-shadowtext .slogan {
    text-shadow: -1px 0 2px rgba(0,0,0, 0.1), 0 1px 2px rgba(0,0,0, 0.1), 1px 0 2px rgba(0,0,0, 0.1), 0 -1px 2px rgba(0,0,0, 0.1), 0em 0em .6em rgba(0,0,0, 0.52);
}

div.noPadding div.background-image {
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
}

div.noPadding div.block-grid {
    padding-top: 4%;
    padding-left: 4%;
    padding-right: 4%;
}

div.noPadding div.block-grid li {
    padding: 8px 8px;
}

div.noPadding div.text {
    padding-left: 8%;
    padding-right: 8%;
    padding-top: 4%;
    padding-bottom: 6%;
}

div.catalystIntro {
    background-color: #000000;
    text-align: center;
}

div.catalystIntro .introSection {
    color: #ffffff;
    padding-top: 20px;
    padding-bottom: 40px;
}

h5.introTitle {
    color: #ffffff;
    letter-spacing: 8px;
    text-transform: uppercase;
    font-family: "orgonlight",sans-serif;
    margin-bottom: 1.5rem;
    margin-top: 2.5rem;
    line-height: 2rem;
    font-size: 1.6rem;
    position: relative;
}

.introSection p {
    text-transform: uppercase;
    font-family: "orgonbold", sans-serif;
    letter-spacing: 4px;
    font-size: 2.2rem;
    margin-top: 0;
}

div.catalystLogo {
    background-color: #f5f5f5;
    opacity: 1;
    background-image: linear-gradient(#f9f9f9 2.2px, transparent 2.2px), linear-gradient(90deg, #f9f9f9 2.2px, transparent 2.2px), linear-gradient(#f9f9f9 1.1px, transparent 1.1px), linear-gradient(90deg, #f9f9f9 1.1px, #f5f5f5 1.1px);
    background-size: 55px 55px, 55px 55px, 11px 11px, 11px 11px;
    background-position: -2.2px -2.2px, -2.2px -2.2px, -1.1px -1.1px, -1.1px -1.1px;
}

div.catalystLogo .leadSection {
    padding-top: 20px;
    padding-bottom: 40px;
}

div.catalystLogo ul {
    font-size: 1.2rem;
}

.CatalystModelIntroRow div.feature_tile {
    padding: 0 0;
}

.CatalystModelIntroRow div.feature_tile div.vCen {
    margin: 4% 4%;
}

div.CatalystModelDescription,
div.BrakeServiceProductDescription,
div.ProductDescription {
    padding: .4rem 4% 1.2rem 4%;
}

div.product-rows {
    margin-bottom: 40px;
}

.CatalystGridArea,
.CatalystProductArea {
    padding-top: 2%;
    height: var(--calc-height);
    transition: height .8s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.CatalystGridArea > div {
    padding-bottom: 5%;
}

div.BrakeServiceProductDescription li {
    padding-bottom: .785rem;
}

p.catalyst-productname {
    text-align: right;
    padding: 0 8% 0px 0;
}

div.catalyst-product-container {
    text-align: right;
    padding-bottom: 5%;
}

.CatalystGridHeadingCell {
    text-align: center;
    padding: 2% 2%;
}

.CatalystGridHeadingCell img.CatalystModelLogoFixedSize {
    max-width: 12rem;
}

.CatalystGridHeadingCell h6 {
    text-transform: uppercase;
    font-size: .8rem;
    font-family: "orgonlight", sans-serif;
    letter-spacing: 2px;
}

.CatalystGridModelSizeCell {
    text-align: left;
}

.CatalystGridModelSizeCell h4 {
    padding-top: 8%;
    padding-right: 5%;
    font-size: .9rem;
    font-family: "orgonlight", sans-serif;
    color: #282828;
}

span.CatalystGridModelSizeCell {
    display: block;
    padding-top: 30%;
    padding-right: 5%;
    font-size: 1rem;
    font-family: "orgonlight", sans-serif;
}

.CatalystGridCell {
    text-align: center;
    padding-bottom: 10px;
}

div .CatalystGridCell.end {
    padding-left: 20px;
}

.CatalystGridCell-Internal {
    display: grid;
    justify-content: center;
}

.CatalystGridCell-Cols-1 {
    grid-template-columns: 66% auto;

    /*auto for when in mountoptionsx2 column, 66% auto for when in mountoptions+2 column*/
}

.CatalystGridCell-Cols-2 {
    grid-template-columns: 50% auto;
}

.CatalystGridCell-Cols-3 {
    grid-template-columns: 66% auto;
}

.CatalystGridCell-Internal > span {
    padding: 8% 0px;
    margin: 0 10px 0 0;
}

LABEL.indented-checkbox-text {
    margin-left: 2em;
    display: block;
    position: relative;
    margin-top: -1.4em;

    /* make this margin match whatever your line-height is */
    line-height: 1.4em;

    /* can be set here, or elsewehere */
}

div.brakeservice-product-container {
    text-align: center;
    padding: 5% 0;
}

div.brakeservice-product-imagecontainer {
    position: relative;
}

p.brakeservice-productname {
    text-align: center;
    margin: 2% 20%;
    padding: 2% 4%;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

h5.brakeservice-productname {
    text-align: center;
    margin: 2% 20%;
    padding: 2% 4%;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.vCen2 {
    text-align: center;
}

.teamLogo .royalSlider {
    max-width: 100%;
    margin-top: 9rem;
}

.pandf .royalSlider {
    max-width: 100%;
}

.pandfSecondaryImage {
    margin: .8rem 0;
    max-width: 10rem;
}

div.PandF-ModelsSection:before {
    content: '';
    display: block;
    width: 60%;
    height: .2rem;
    margin: 0 auto 4rem auto;
    background: linear-gradient(90deg, rgba(174,187,194,1) 0%, rgba(186,196,201,1) 40%, rgba(203,209,212,1) 100%);
}

div.PandF-ModelsSection {
    margin-top: 4rem;
}

ul.websocial {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.websocial li {
    float: left;
    padding-left: 0;
    padding-right: .875rem;
}

ul.websocial li a:hover {
    text-decoration: underline;
}

.feature-text-small {
    font-size: .825rem;
}

div.placeholder {
    line-height: 1px;
}

div.afG5 .small-block-grid-5 > li:nth-of-type(5n+1) {
    clear: both;
}

.tabs-content > .content.tabContentAdjust {
    padding-bottom: 0;
}

.tabs-content > .content.minrpanel2 {
    min-height: 18rem;
}

h2.leadTitle {
    text-transform: uppercase;
    font-family: "orgonblack",sans-serif;
    margin-bottom: 2.5rem;
    margin-top: 2.5rem;
    line-height: 2rem;
}

h1.leadTitle {
    text-transform: uppercase;
    font-family: "orgonblack",sans-serif;
    margin-bottom: 2.5rem;
    margin-top: 2.5rem;
    line-height: 2rem;
}

.leadSection ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    line-height: 18px;
}

.leadSection li {
    margin-bottom: 20px;
}

.mediaSection hr {
    border: solid #f5f5f5;
    border-width: 1px;
    margin: 2% 6%;
}

.BrakeServiceIntroSection {
    padding: 2% 4%;
}

.BrakeServiceIntroSection blockquote {
    font-size: .9rem;
}

.BrakeServiceProductIntro h1.lgHeading {
    font-size: 3.6rem;
    letter-spacing: .8rem;
    text-align: center;
}

.BrakeServiceProductFeatureImageContainer {
    text-align: center;
}

.BrakeServiceProductFeatureImageContainer img {
    margin-left: -25%;
}

.YTcontainer {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;

    /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
    margin-bottom: 1rem;
}

.vContainer {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.vContainer--overlay {
    align-items: center;
    background-color: rgba(0, 0, 0, 0.25);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
}

.pb_C {
    align-items: center;
    border: 4px solid rgb(255, 255, 255);
    border-radius: 9999px;
    display: flex;
    height: 64px;
    justify-content: center;
    width: 64px;
}

.pb_A {
    border-color: transparent transparent transparent rgb(255, 255, 255);
    border-style: solid;
    border-width: 8px 0px 8px 16px;
    height: 0px;
    width: 0px;
}

/* Then style the iframe to fit in the container div with full height and width */

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

/* modal */

/* padding-bottom and top for image */

.mfp-no-margins img.mfp-img {
    padding: 0;
}

/* position of shadow behind the image */

.mfp-no-margins .mfp-figure:after {
    top: 0;
    bottom: 0;
}

/* padding for main container */

.mfp-no-margins .mfp-container {
    padding: 0;
}

.productModal {
    text-align: center;
}

.reveal-modal.full.videoModal.open {
    background-color: rgba(0, 0, 0, 0.7);
}

.reveal-modal.xlarge.videoModal.open a.close-reveal-modal {
    top: -3rem;
}

.videoModal {
    display: flex;
}

.videoZone {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
}

.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.modal.descriptionFromProduct ul {
    list-style-position: inside;
    margin-left: 0;
}

/* 

for zoom animation 
uncomment this part if you haven't added this code anywhere else

*/

.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
    opacity: 0;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
    opacity: 1;
}

.mfp-with-zoom.mfp-ready.mfp-bg {
    opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
    opacity: 0;
}

.modal-primaryImage {
    text-align: center;
}

.modal-primaryImage img {
    max-width: 80%;
}

/* end modal */

.title_span {
    padding-bottom: 2px;
    border-bottom: #000 2px solid;
}

.center-column-contents {
    text-align: center;
}

.center-column-contents table {
    margin-left: auto;
    margin-right: auto;
}

i {
    vertical-align: middle !important;
}

i.fineborder {
    border: solid 1px #000;
}

.compound-table a {
    font-weight: 700;
    display: block;
}

.compound-table a:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #000;
}

.fullrow dd:first-of-type {
    padding-left: 25%;
}

.columns iframe {
    max-width: 100%;
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;

    /* 16:9 */
    padding-top: 25px;
    margin-bottom: 25px;
    height: 0;
}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#OCmenuswitch {
    padding-left: 8px;
}

#OCplace {
    padding: 16px 16px;
}

.row .row.TeamRow {
    padding-bottom: 8rem;
}

.row .row.TeamTableRow {
    border-bottom: .12rem solid #000;
    margin: 0 0 0 0;
    padding: 1rem 0;
}

.row .row.TeamTableRow p {
    margin-bottom: 0;
}

.columns div.menu-column {
    padding-right: 0;
}

.columns div.productgrid-column {
    padding-right: 0rem;
    padding-left: 1rem;
}

/* Royal Slider height*/

.royalSlider.heroSlider3,
.royalSlider.heroSlider3 .rsOverflow {
    height: 640px !important;
}

.royalSlider.heroSlider4,
.royalSlider.heroSlider4 .rsOverflow {
    height: 480px !important;
}

.royalSlider.heroSliderVH,
.royalSlider.heroSliderVH .rsOverflow {
    height: calc(100vh - 300px) !important;
    min-height: 540px;
}

div#full-width-slider.heroSliderVH div.rsGCaption {
    display: none;
}

.royalSlider.teamSlider {
    height: 480px !important;
}

.externalCaption {
    background-color: #fff;
}

.modal-centered {
    text-align: center;
}

a.CompoundLogoInGrid {
    display: inline-block;
}

/* disc pad grid: each compound logo centred in its column */
li.compoundLogoCell {
    text-align: center;
}

.compoundLogo {
    margin-top: 4rem;
    max-width: 70%;
    margin-bottom: 2rem;
}

.centeredHere {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.compoundLogoCompact {
    margin-top: 2rem;
    max-width: 10rem;
    margin-bottom: 1rem;
    margin-left: 0;
}

.compatList-model,
.compatList-calipers {
    font-size: .8rem;
}

div.clear-right-padding {
    padding-right: 0;
}

div.clear-left-padding {
    padding-left: 0;
}

ul.tech-doc-list li {
    padding: 10px 0;
}

.discbrakepowercleanRow {
    padding-top: 4%;
    padding-bottom: 2%;
    background-color: #e6e6e6;
    background-image: linear-gradient(135deg, #e6e6e6, #929292);
}

.discbrakesilencerRow {
    padding-top: 2%;
    padding-bottom: 6%;
    background-color: #e6e6e6;
    background-image: linear-gradient(135deg, #e6e6e6, #929292);
}

.discbrakepowercleanwipesRow {
    padding-top: 4%;
    padding-bottom: 4%;
    background-color: #e6e6e6;
    background-image: linear-gradient(135deg, #e6e6e6, #929292);
}

.gravelbrakeHeroRow {
    padding-top: 4%;
    padding-bottom: 0;
    background-color: #8b8C6e;
    background-image: url('/Images/PaperTexture-Map_webCrop1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.gravelbrakeFooterRow {
    padding-top: 0;
    padding-bottom: 4%;
    background-color: #8b8C6e;
    background-image: url('/Images/PaperTexture-Map_webCrop1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.gravelbrakeHeroRow h1 {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "avalanche", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 4rem;
    letter-spacing: .4rem;
    color: #fff;
}

.gravelbrakeHeroRow img {
    max-height: 34vh;
}

.gravelbrakeHeroRow .overlay_0 {
    margin-top: 6%;
    height: 24px;
    background-color: rgba(0,0,0,0.2);
}

.gravelbrakeFooterRow .overlay_0 {
    margin-bottom: 6%;
    height: 24px;
    background-color: rgba(0,0,0,0.2);
}

.photoPrint {
    border: 8px solid white;
}

.photoPrintShadow {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.angled5 {
    transform: rotate(-5deg);
}

.rot0 {
    transform: rotate(-5deg);
}

.rot1 {
    transform: rotate(2deg);
}

.rot2 {
    transform: rotate(-4deg);
}

.gravelbrakeHeroRow .textImg {
    max-width: 100%;
}

.textImg {
    position: relative;
    text-align: center;
}

.gravelbrakeContentRow {
    min-height: 40vh;
    background-color: #a2987f;

    /*#a2987f*/
    background-image: url('/Images/clean-gray-paper.png'), linear-gradient(130deg, rgba(177,166,139,1) 0%, rgba(200,185,148,1) 85%, rgba(206,195,168,1) 100%);
}

.gravelbrakeContentRow h3 {
    font-family: marydale, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 2rem;
}

.gravelbrakeContentRow p {
    font-family: marydale, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.2rem;
}

.gravelbrake-item-row {
    padding: 4rem 0;
}

.gravelbrake-item-img-col {
    text-align: right;
}

.gravelbrake-item-img {
    max-width: 80%;
    border: 10px solid white;
    transform: rotate(-5deg);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.item-list-item {
    margin-top: .4rem;
}

.item-list-item-morepadding {
    padding-top: 1.4rem;
}

/* Some positioning and ratios */

.sticky-container {
    max-width: 270px;
    position: relative;
}

.sticky-outer {
    display: flex;
    padding-top: 92.5925926%;
    position: relative;
    width: 100%;
}

.sticky {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Shadow behind the sticky note */

.sticky:before {
    box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.5);
    background-color: rgba(0, 0, 0, 0.25);
    content: '';
    width: 90%;
    left: 5px;
    height: 83%;
    position: absolute;
    top: 30%;
}

/* The sticky note itself */

.sticky-content {
    background: linear-gradient( 180deg, rgba(198, 206, 96, 1) 0%, rgba(220, 228, 108, 1) 12%, rgba(199, 207, 87, 1) 75%, rgba(204, 212, 99, 1) 100% );
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    font-family: marydale, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.2rem;
    clip-path: url(#stickyClip);
}

.sticky-content-textboundary {
    width: 90%;
}

.sticky-content h4 {
    margin-top: 0;
    font-family: marydale, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.6rem;
}

/* Foundation Responsiveness - Small screens*/

@media only screen {
    div.TileTextCol h4.PairAndFairTileLead {
        font-size: 1.2rem;
    }

    div.TileTextCol p.PairAndFairTileSub {
        font-size: .8rem;
        line-height: 1rem;
    }

    div.PairAndFairTileImage {
        background-size: auto 70%;
        background-position: left 50% center;
    }
}

/* Foundation Responsiveness - Medium screens*/

@media only screen and (min-width: 40.063em) {
    div.TileTextCol h4.PairAndFairTileLead {
        padding-left: 6rem;
    }

    div.PairAndFairSubContentHolder {
        padding-top: 1rem;
    }
}

/* Foundation Responsiveness - Larage screens*/

@media only screen and (min-width: 64.063em) {
    div.TileTextCol h4.PairAndFairTileLead {
        padding-left: 8rem;
    }

    div.PairAndFairSubContentHolder {
        padding-top: 2rem;
    }
}

/* Foundation Responsiveness - XLarge screens*/

@media only screen and (min-width: 90.063em) {
    div.TileTextCol h4.PairAndFairTileLead {
        font-size: 1.4rem;
        padding-left: 14rem;
    }
}

@media screen and (min-width: 360px) {
    .sticky-container {
        right: 0;
        top: -2rem;
    }

    .gravelbrake-item-row {
        padding: 2rem 0;
    }

    .sticky-content-textboundary {
        padding-left: 1rem;
    }

    .sticky-content h4 {
        font-size: 1.6rem;
    }

    .sticky-content p {
        font-size: 1.2rem;
    }

    .gravelbrake-item-img {
        max-width: 90%;
        border: 8px solid white;
    }

    .photoPrint {
        border: 8px solid white;
    }
}

@media screen and (min-width: 640px) {
    .sticky:before {
        height: 79%;
        width: 90%;
    }

    .gravelbrake-item-row {
        padding: 1rem 0;
    }

    .sticky-content-textboundary {
        padding-left: .6rem;
    }

    .sticky-content h4 {
        font-size: .8rem;
    }

    .sticky-content p {
        font-size: .6rem;
    }

    .gravelbrake-item-img {
        max-width: 80%;
        border: 4px solid white;
    }

    .photoPrint {
        border: 4px solid white;
    }
}

@media screen and (min-width: 768px) {
    .sticky:before {
        height: 75%;
        width: 90%;
    }

    .sticky-container {
        top: 1rem;
        right: 4rem;
    }

    .gravelbrake-item-row {
        padding: 2rem 0;
    }

    .sticky-content-textboundary {
        padding-left: 1rem;
    }

    .sticky-content h4 {
        font-size: 1rem;
    }

    .sticky-content p {
        font-size: .8rem;
    }

    .gravelbrake-item-img {
        max-width: 80%;
        border: 6px solid white;
    }

    .photoPrint {
        border: 6px solid white;
    }
}

@media screen and (min-width: 1024px) {
    .sticky:before {
        height: 73%;
        width: 90%;
    }

    .sticky-content {
        padding-left: 8%;
        font-size: 1.875rem;
    }

    .gravelbrake-item-row {
        padding: 3rem 0;
    }

    .sticky-content-textboundary {
        padding-left: 1rem;
    }

    .sticky-content h4 {
        font-size: 1.2rem;
    }

    .sticky-content p {
        font-size: 1rem;
    }

    .gravelbrake-item-img {
        max-width: 80%;
        border: 8px solid white;
    }

    .photoPrint {
        border: 8px solid white;
    }
}

/* end gravelbrake */

.reviewImage {
    width: 70%;
    max-height: 400px;
}

.reviewItem {
    padding-top: 0px;
    padding-bottom: 30px;

    /*top was 30px*/
}

.indentsmall {
    padding-left: 5%;
}

#faq a.active {
    background: #fce400;
}

.installation-block {
    width: 90%;
    min-height: 220px;
    padding-top: 20px;
}

.installation-text {
    margin-top: 20px;
}

#mainContent {
    position: relative;
}

.bodywrapper .wrapper {
    background: url('/img/transpBG3.png') repeat 0 0;
    z-index: 7;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

ul.topNavLanguageSelect {
    margin: 20px 0;
}

ul.topNavLanguageSelect li {
    display: block;
    width: 100%;
}

ul.topNavLanguageSelect li a {
    padding: .2em .4em;
    width: 100%;
}

ul.topNavLanguageSelect li a:hover {
    background: #282828;
    color: #fff;
}

.uppercase {
    text-transform: uppercase;
}

.product-rows {
    padding: 0 0 40px 0;
}

.label.alert {
    margin-right: 2px;
}

/* the menu blocks (Partials/TopNavMenu.cshtml); the rest of the navigation is in nav.css */

.main-nav-block-brakepads {
    width: 80%;
    margin-bottom: 50px;
}

.main-nav-block-brakepads img {
    max-height: 230px;
}

h1.lgHeadingProductName {
    font-family: "orgonlight",sans-serif;
    margin-bottom: 2.5rem;
    margin-top: 2.5rem;
}

h1.lgHeading {
    text-transform: uppercase;
    font-family: "orgonextralight",sans-serif;
    margin-bottom: 2.5rem;
    margin-top: 2.5rem;
}

h2.lgHeading {
    text-transform: uppercase;
    font-family: "orgonextralight",sans-serif;
    margin-bottom: 2.5rem;
    margin-top: 2.5rem;
}

h3.lgHeading {
    text-transform: uppercase;
    font-family: "orgonextralight",sans-serif;
    margin-bottom: 2.5rem;
    margin-top: 5rem;
}

h4.lgHeading {
    text-transform: uppercase;
    font-family: "orgonextralight",sans-serif;
    margin-bottom: 2.5rem;
    margin-top: 2.5rem;
}

h5.lgHeading {
    text-transform: uppercase;
    font-family: "orgonextralight",sans-serif;
    margin-bottom: 1.2rem;
    margin-top: 2.5rem;
}

h6.lgHeading {
    text-transform: uppercase;
    font-family: "orgonextralight",sans-serif;
    margin-bottom: 1.2rem;
    margin-top: 1.6rem;
}

div.LinkedProductSection {
    margin-top: .5rem;
}

.lgHeading span.lgHeadStrong {
    font-family: "orgonbold", sans-serif;
}

.lgHeading span.brandMark {
    text-transform: none;
}

.titleFullUnderline {
    border-bottom: 1px solid #000;
    padding-bottom: 8px;
    width: 100%;
    display: block;
}

.titleLightUnderline {
    border-bottom: 1px solid #000;
    width: 100%;
    display: block;
}

.titleUnderline-light {
    border-bottom: solid 1px #DDD;
    padding-bottom: 0.75rem;
    width: 100%;
    display: block;
}

.titleUnderline-heavy {
    border-bottom: 1px solid #000;
    padding-bottom: 0.75rem;
    width: 100%;
    display: block;
}

.formattedText ul {
    padding-left: 5%;
}

.filterelement.hidden {
    display: none;
}

.ui-showall {
    display: block;
    font-size: .8em;
    background: #fafafa;
    padding: 4px 4px;
    display: block;
    cursor: pointer;
    width: 100%;
}

.ui-showall:hover {
    background: #e6e6e6;
}

.contactPageFAQsection {
    padding: 20px 0 40px 0;
}

ul.productsFitsList {
    list-style-type: square;
}

ul.productsFitsList li {
    padding: 0 0 0 0px;
    margin: 0 0 0 10%;
    line-height: 1.2;
}

.product-heading {
    text-transform: uppercase;
    margin-bottom: 2.6rem;
}

.product-heading span.dimension {
    text-transform: none;
}

.product-heading h2 {
    margin-bottom: .4rem;
}

.product-heading h4 {
    margin-top: .2rem;
}

.lighter {
    color: #888;
    -webkit-margin-after: 0;
}

.lighterweight {
    font-weight: 400;
}

.extralight {
    font-family: "orgonextralight",sans-serif;
}

.imptitle {
    background: #282828;
    color: #fff;
    padding: 0 6px;
    position: relative;
    display: inline-block;
    width: 100%;
    margin-top: 0.8rem;
}

.imptitle:after {
    border-bottom: 14px solid #282828;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    width: 0;
    height: 0;
    content: "";
    display: block;
    position: absolute;
    bottom: 100%;
    left: 0.4em;
}

ul.otherModelList {
    padding-top: 0.2rem;
}

.product-detail-heading {
    font-family: 'orgonlight';
    border-bottom: solid 1px #000;
    display: block;
    padding-top: 0px;
    margin-top: 2.6rem;
    margin-bottom: 20px;
}

.product-detail-heading-light {
    font-family: 'orgonregular';
    border-bottom: solid 1px #DDD;
    display: block;
    padding-top: 0px;
    padding-bottom: 0.75rem;
    padding-left: .1rem;
    margin-top: 2rem;
    margin-bottom: 0.8rem;
}

.product-detail-section {
    padding: .4rem 4% 1.6rem 4%;
}

.product-detail-section-full-width {
    padding: .4rem 0 1.6rem 0;
}

.product-section-heading {
    font-family: 'orgonlight';
    padding: 6px 0 6px 0;
}

.product-detail-section h4 {
    margin-top: .6rem;
    margin-bottom: .2rem;
}

.product-detail-section h6 {
    margin-top: .4rem;
    margin-bottom: .2rem;
}

.product-detail-section ul {
    font-size: .9rem;
}

.product-detail-section p {
    font-size: .9rem;
}

p.product-detail-label {
    font-family: 'orgonlight';
    font-size: .8rem;
    padding: 1.4rem 3.4rem;
}

.category-section-heading {
    padding: 0 0 36px 0;
}

figure {
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

.my-gallery figcaption {
    display: none;
}

.compound-featurebox {
    max-width: 90%;
    min-height: 100px;
    text-align: center;
    transition: box-shadow .2s;
    border-radius: 6px;
    background: #fff;
    padding-bottom: 1rem;
}

.compound-featurebox:hover {
    box-shadow: 0 0 8px rgba(33,33,33,.2);
}

.compound-featurebox a {
    display: block;
}

.compound-featurebox img {
    max-width: 80%;
    margin: 2rem 1rem 1rem 1rem;
    padding: 0 0;
}

.compound-featurebox.reduced-margins img {
    max-width: 90%;
    margin: .5rem .5rem;
    padding: 0 0;
}

.reduced-margins p {
    line-height: 1.25rem;
}

.asymmetricalR-image img {
    margin: 2rem 9rem 1rem 1rem;
}

.compound-featurebox h5 {
    padding: 20px 0 0 0;
}

/* VERTICAL CENTERING ---------------------- */

.oem-featurebox {
    max-width: 90%;
    min-height: 300px;
}

.oem-featurebox img {
    padding-left: 5%;
    padding-bottom: 20px;
}

.oem-featurebox h4 {
    padding: 0 0;
    margin: 0 0;
}

.oem-featurebox h5 {
    padding: 0 0;
    margin: 0 0;
}

.eventsTable {
    width: 100%;
}

/* royal slider visible nearby*/

.visibleNearby .rsGCaption {
    line-height: 18px;
    padding: 8px 16px;
    bottom: auto;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    background: #282828;
    color: #FFF;
}

.visibleNearby > .rsGCaption {
    clear: both;
    float: none;
    margin-left: auto;
    margin-right: auto;
}

.visibleNearby .rsGCaption span {
    display: block;
    clear: both;
    color: #bbb;
    font-size: 14px;
    line-height: 22px;
}

/* Scaling transforms */

.visibleNearby .rsSlide img {
    opacity: 0.45;
    transition: all 0.3s ease-out;
    transform: scale(0.9);
}

.visibleNearby .rsActiveSlide img {
    opacity: 1;
    transform: scale(1);
}

.f-dropdown h6,
.f-dropdown h5,
.f-dropdown h4,
.f-dropdown h3,
.f-dropdown h2,
.f-dropdown p,
.f-dropdown ul {
    color: #fff;
}

.f-dropdown h4 small,
.f-dropdown h3 small {
    color: #ccc;
}

.f-dropdown p {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    font-size: .9em;
}

.f-dropdown h5 {
    padding: 0 0 0 0;
    margin: 0 0 4px 0;
}

.f-dropdown h4 {
    font-size: .875rem;
}

.f-dropdown h3 {
    padding: 0 0 0 0;
    margin-top: .6rem;
    font-size: .875rem;
}

.f-dropdown h2 {
    font-size: 1.25rem;
}

.f-dropdown {
    padding: 20px 20px;
}

.f-dropdown ul.ratings {
    list-style-type: none;
    list-style-position: outside;
    margin-left: 0;
    padding-bottom: 10px;
}

ul.compound-id-logos li {
    padding: 0 20px 0 0;
}

.testRatingItem {
    max-width: 200px;
    margin-right: 40px;
}

@media only screen and (max-width: 380px) {
    #main {
        padding-top: 6px;
    }

    .royalSlider.heroSlider3,
    .royalSlider.heroSlider3 .rsOverflow {
        height: 240px !important;
    }

    .imageTile {
        max-height: 160px;
    }

    .royalSlider.heroSliderVH,
    .royalSlider.heroSliderVH .rsOverflow {
        height: 220px !important;
        min-height: 220px;
        max-height: 220px;
    }

    .title_span {
        border-bottom: none;
    }

    .tilerow > div.feature_tile {
        padding: 30px 30px;
        text-align: center;
    }

    .infoBlockGen4 {
        position: absolute;
        top: 56%;
        left: 4%;
        padding: 0 2em;
        overflow: hidden;
    }

    .infoBlockGen4 h2.slogan {
        font-size: 1.2em;
        line-height: 1.0em;
    }

    .CatalystGridHeadingCell img.CatalystModelLogoFixedSize {
        max-width: 5rem;
    }

    .CatalystGridHeadingCell h6 {
        margin-top: 0.8rem;
        font-size: .4rem;
        letter-spacing: .04rem;
    }

    .CatalystGridModelSizeCell h5 {
        padding-top: 8%;
        font-size: .6rem;
    }

    h3.lgHeading {
        font-size: 1.2rem;
    }

    .modal-primaryImage img {
        margin-top: 40%;
        max-width: 100%;
    }

    div.modalTextBlock h5 {
        font-size: 1.4rem;
    }

    div.modalTextBlock ul {
        margin-top: 20px;
        font-size: .8rem;
    }

    img.cataloguePreview {
        max-width: 70%;
    }

    h1.XLheading {
        font-size: 1.8rem;
    }
}

@media only screen and (min-width: 381px) and (max-width: 767px) {
    #main {
        padding-top: 14px;
    }

    .infoBlock2 {
        max-width: 55%;
        top: 10px;
        left: 10px;
        padding: 10px;
    }

    .infoBlock2 h1 {
        font-size: 2rem;
    }

    .infoBlock2 h2 {
        font-size: 14px;
    }

    .infoBlock2 h5 {
        font-size: 12px;
    }

    .photoCredit p {
        font-size: .3em;
    }

    .royalSlider.heroSlider3,
    .royalSlider.heroSlider3 .rsOverflow {
        height: 280px !important;
    }

    .royalSlider.heroSlider4,
    .royalSlider.heroSlider4 .rsOverflow {
        height: 280px !important;
    }

    .royalSlider.heroSliderVH,
    .royalSlider.heroSliderVH .rsOverflow {
        height: 360px !important;
        min-height: 360px;
        max-height: 360px;
    }

    .infoBlockGen4 {
        top: 48%;
        left: 12%;
    }

    .infoBlockGen4 h2.slogan {
        font-size: 2.0em;
        line-height: 1.2em;
    }

    .fullrow dd:first-of-type {
        padding-left: 5%;
    }

    h5.introTitle {
        font-size: 1.4rem;
    }

    .introSection p {
        font-size: 2rem;
    }

    .CatalystGridModelSizeCell h5 {
        font-size: .6rem;
    }

    p.catalyst-productname {
        text-align: center;
        padding: 0 0;
    }

    .BrakeServiceProductIntro h1.lgHeading {
        font-size: 2.6rem;
        letter-spacing: .8rem;
        margin-bottom: 1.5rem;
        margin-top: 1.5rem;
    }

    .CatalystGridHeadingCell img.CatalystModelLogoFixedSize {
        max-width: 5rem;
    }

    .CatalystGridHeadingCell h6 {
        margin-top: 1.2rem;
        font-size: .6rem;
        letter-spacing: 0.06rem;
    }

    .teamLogo img {
        padding-top: 0;
    }

    h1.XLheading {
        font-size: 2.2rem;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {

    .infoBlock2 h5 {
        font-size: 16px;
    }

    .photoCredit p {
        font-size: .4em;
    }

    .infoBlockGen4 h2.slogan {
        font-size: 3.0em;
        line-height: 1.2em;
    }

    .infoBlock2 h1 {
        font-size: 2rem;
    }

    .royalSlider.heroSlider4,
    .royalSlider.heroSlider4 .rsOverflow {
        height: 320px !important;
    }

    h1.XLheading {
        font-size: 2.8rem;
    }

    .BrakeServiceProductIntro h1.lgHeading {
        font-size: 2.2rem;
        letter-spacing: .4rem;
    }

    .BrakeServiceProductIntro {
        max-width: 60%;
    }
}

@media only screen and (min-width: 640px) and (max-width: 1024px) {
    .BrakeServiceProductIntro {
        top: 10%;
    }

    .BrakeServiceProductIntro h4.lgHeading {
        margin-top: 0;
    }

    .BrakeServiceProductIntro h1.lgHeading {
        margin-top: 0;
    }

    .tilerow > div.feature_tile3 {
        padding: 3rem 6rem;
    }
}

@media only screen and (min-width: 1025px) {
    #mainContent {
        padding-top: 0px;
    }

    img.catalystLogo {
        padding-top: 20px;
    }

    .BrakeServiceProductIntro {
        top: 5%;
    }

    .BrakeServiceProductFeatureImageContainer img {
        max-width: 70%;
    }
}

@media only screen and (min-width: 1025px) and (max-width: 1399px) {
    .BrakeServiceProductIntro h1.lgHeading {
        font-size: 2.8rem;
        letter-spacing: .55rem;
    }

    .BrakeServiceProductIntro {
        max-width: 55%;
    }
}

@media only screen and (min-width: 640px) {
    .BrakeServiceProductFeatureImageContainer {
        position: relative;
    }

    .BrakeServiceProductIntro {
        position: absolute;
    }

    .BrakeServiceProductFeatureImageContainer img {
        margin-left: 0;
    }
}

@media only screen and (max-width: 640px) {
    /* the hero image's -25% shift centres the product; its empty left edge stays inside the box */
    .BrakeServiceProductFeatureImageContainer {
        overflow-x: clip;
    }

    /* Events: each row becomes a block, the column name from data-label beside each value */
    .eventsTable thead {
        display: none;
    }

    .eventsTable tr,
    .eventsTable td:first-child {
        display: block;
    }

    .eventsTable tr {
        padding: .5rem 0;
        border-bottom: 1px solid #ddd;
    }

    .eventsTable td {
        display: grid;
        grid-template-columns: 6.5rem minmax(0, 1fr);
        column-gap: .5rem;
        padding: .125rem .625rem;
    }

    .eventsTable td:empty {
        display: none;
    }

    .eventsTable td::before {
        content: attr(data-label);
        color: #888;
    }

    .eventsTable td:first-child::before {
        content: none;
    }

    img.cataloguePreview {
        max-width: 70%;
    }
}

@media only screen and (min-width: 1600px) {
    img.catalystLogo {
        max-width: 360px;
    }

    .BrakeServiceProductIntro {
        top: 20%;
    }
}

@media screen and (min-width:960px) and (min-height:660px) {
    #main {
        padding-top: 30px;
        padding-bottom: 50px;
    }
}

/* iPads (landscape) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

    [class*="block-grid-"] {
        display: block;
        padding: 0;
        margin: 0 0;
    }

    #main-wrapper {
        padding-top: 0px;
    }
}

/* where main nav converts to mini ----------- */

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

    .subNav {
        padding-top: 0px;
    }

    .subNav li,
    .subNav li li {
        font-size: .8em;
    }

    div.sidebar.panel {
        padding: .8rem;
    }

    .infoBlockGen3 {
        display: none;
    }

    div#full-width-slider.heroSliderVH div.rsGCaption {
        display: block;
    }

    div.rsGCaption p {
        padding: 0 0;
        margin: 0 0;
    }

    .compoundLogo {
        margin-top: 0px;
    }

    span.productName,
    div.PN-EAN.PN-EAN_2 {
        font-size: 0.7125rem;
    }

    .discModelName h4 {
        font-size: 0.8em;
        font-family: "orgonbold", sans-serif;
        padding: 0 0;
    }

    /* the lockup at about the old label's size, clear of the pad photos */
    .discModelName svg.lockup {
        max-width: 52px;
    }

    .CatalystGridModelSizeCell h4 {
        font-size: 0.6em;
        font-family: "orgonlight", sans-serif;
        padding: 0 0;
        margin-top: 0.8rem;
    }

    .superDetail_container .label {
        font-size: .6rem;
    }

    .superDetail_container .secondary {
        display: none;
    }

    .product-heading {
        text-align: center;
    }

    .product-heading h2 {
        font-size: 2.2rem;
    }

    div.container .tabs {
        margin-top: 2.6rem;
    }

    div.container .tabs dd > a {
        font-size: .8rem;
    }

    div.container ul,
    div.container p,
    div.container table thead tr th,
    div.container table thead tr td {
        font-size: 80%;
    }

    p.product-detail-label {
        padding: 1.4rem 1.4rem;
    }

    .gravelbrakeHeroRow h1 {
        top: 15%;
        font-size: 2rem;
        letter-spacing: .2rem;
    }

    .tilerow > div.feature_tile4 {
        padding: 3rem 3rem;
    }
}

@media only screen and (max-width: 1158px) {
    h2.leadTitle {
        font-size: 1.8rem;
        line-height: 1.6rem;
    }

    div.catalystLogo ul {
        font-size: 1rem;
    }

    .feature_1 h2,
    .feature_2 h2 {
        font-size: 1.8rem;
        margin: 0 0 10px 0;
        line-height: 1.6rem;
    }

    .feature_1 p.blockLight,
    .feature_2 p.blockLight {
        font-size: 1rem;
    }

    .modal-text p {
        font-size: 13px;
        line-height: 14px;
    }

    .tilerow > div.feature_tile3 {
        padding: 3rem 6rem;
    }
}

@media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) {
    .fullrow dd:first-of-type {
        padding-left: 5%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 984px) {

    .royalSlider.heroSlider3,
    .royalSlider.heroSlider3 .rsOverflow {
        height: 400px !important;
    }
}

#footer .row {
    padding-top: .8rem;
    padding-bottom: .8rem;
}

/* Footer text links (aligned with social icon style) */

#footer ul.footerlinks {
    list-style: none;
    margin: 0 0 0.5rem 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

#footer ul.footerlinks li {
    margin: 0;
    padding: 0;
}

/* 36px clickable pill */

#footer ul.footerlinks li a {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;

    /* horizontal padding only */
    border-radius: 3px;
    font-size: 0.875rem;
    line-height: 1;
    color: #999;
    text-decoration: none;
    background: transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover = same treatment as icons */

#footer ul.footerlinks li a:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* Keyboard focus */

#footer ul.footerlinks li a:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* Current item stays neutral */

#footer ul.footerlinks li.current a:hover,
#footer ul.footerlinks li.current a:focus-visible {
    background-color: transparent;
}

.subNav a {
    text-decoration: none;
}

.subNav li {
    margin: 4px 2px;
    font-size: 1em;
    font-weight: 600;
}

.subNav li li {
    border: none;
    font-size: 1em;
    font-weight: 400;
    padding: 0;
    margin: 0px 2px;
    border-bottom: 1px solid #e6e6e6;
}

.subNav li a {
    padding: .2em .4em;
    display: block;
    width: 100%;
}

.subNav li li a {
    display: block;
    width: 100%;
}

.subNav li a:hover {
    background: #282828;
    color: #fff;
}

.subNav li.current a {
    color: #888;
}

.subNav .active {
    color: #282828;
    padding: .2em .4em;
    background: #fce400;
    display: block;
    width: 100%;
}

.subNav a.active {
    border-bottom: 1px solid #fff;
}

.newsOverviewImage {
    max-height: 240px;
}

.hideThis {
    display: none;
}

.fwImage {
    margin-bottom: 20px;
}

/* rs images in box starts here*/

#gallery-t-group {
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#gallery-t-group .rsThumb {
    float: left;
    overflow: hidden;
    margin-right: 1px;
}

#gallery-t-group .rsThumbs {
    width: 100%;
    overflow: hidden;
    padding-top: 10px;
}

#gallery-t-group .rsGCaption {
    line-height: 12px;
    padding: 1px 7px;
    font-size: 11px;
    background: #EEE;
    position: absolute;
    width: auto;
    bottom: 0;
    float: none;
    text-align: left;
}

/* Non-linear resizing on smaller screens */

@media screen and (max-width: 900px) {
    #gallery-1 {
        padding: 12px 0 12px;
    }

    #gallery-1 .rsOverflow,
    .royalSlider#gallery-1 {
        height: 200px !important;
    }

    img.catalystLogo {
        padding-top: 20px;
        max-width: 90%;
    }

    .tilerow > div.feature_tile3 {
        padding: 3rem 4rem;
    }
}

@media screen and (max-width: 500px) {
    #gallery-1 .rsOverflow,
    .royalSlider#gallery-1 {
        height: 300px !important;
    }
}

/* royal slider visible nearby end*/

.compounds-secondary {
    font-size: 18px;
    padding-top: 20px;
    font-weight: 700;
}

.compound-table {
    width: 100%;
}

.keeptight {
    padding: 0 0;
    margin: -12px 0 20px 0;
}

@media screen and (max-width: 1200px) {
    #gallery-t-group .rsThumbs {
        width: 100%;
    }
}

@media screen and (max-width: 760px) {
    #gallery-t-group .rsThumbs {
        left: 0;
        position: relative;
        width: 100%;
        height: auto;
        padding: 1px 0 0 1px;
    }

    #gallery-t-group .rsThumbsContainer {
        height: auto !important;
    }

    #gallery-t-group .rsGCaption {
        right: 0;
    }
}

/* ==========================================================================
   Product grid filter (js/discPadFilter.js = GridFilter): a filtered-out tile, on the disc pad,
   rim pad and Catalyst rotor grids. !important because the grids' own rules set display on
   their tiles (.container .mix and the like).
   ========================================================================== */

.dpf-hidden {
    display: none !important;
}

/* ==========================================================================
   Promo tile with two graphics (Views/PromoTwoGraphicsTile.cshtml)
   ========================================================================== */

.PromoTwoGraphicsTile {
    position: relative;
    overflow: hidden;
}

/* Splatter container: the CSS mask-image punches a wipe hole by making the centre
   transparent (alpha=0 = hidden). Two slightly-offset ellipses create an irregular
   edge. Wipe is centred at the text block's centre (left 12% + width 44%/2 = 34%,
   top 44%) and sized to comfortably contain two lines of headline text. */

.PTG-splatter {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    --focus-x: 24%;
    --focus-y: 48%;
    --wipe-x: 40%;
    --wipe-y: 44%;
    -webkit-mask-image: radial-gradient(ellipse 70% 56% at var(--wipe-x) var(--wipe-y),
                transparent 62%, rgba(0,0,0,0.5) 72%, #000 82%),
            radial-gradient(ellipse 60% 48% at calc(var(--wipe-x) + 4%) calc(var(--wipe-y) - 1%),
                transparent 57%, rgba(0,0,0,0.6) 67%, #000 77%);
    mask-image: radial-gradient(ellipse 70% 56% at var(--wipe-x) var(--wipe-y),
                transparent 62%, rgba(0,0,0,0.5) 72%, #000 82%),
            radial-gradient(ellipse 60% 48% at calc(var(--wipe-x) + 4%) calc(var(--wipe-y) - 1%),
                transparent 57%, rgba(0,0,0,0.6) 67%, #000 77%);
}

.PTG-splatter > div {
    position: absolute;
    inset: -5% -20% -5% -10%;
    background-repeat: no-repeat;
}

/* Soft dark mass underlay — gives the splatter body and shadow, wipe clips through it */

.PTG-bg {
    background: radial-gradient(
                ellipse 54% 68% at var(--focus-x) var(--focus-y),
                rgba(55,50,8,0.55) 0%,
                rgba(55,50,8,0.35) 35%,
                rgba(55,50,8,0)    68%
            ),
            radial-gradient(
                ellipse 22% 20% at calc(var(--focus-x) - 14%) calc(var(--focus-y) - 30%),
                rgba(55,50,8,0.35) 0%,
                rgba(55,50,8,0)    62%
            ),
            radial-gradient(
                ellipse 14% 22% at calc(var(--focus-x) - 18%) calc(var(--focus-y) + 28%),
                rgba(55,50,8,0.28) 0%,
                rgba(55,50,8,0)    58%
            );
    filter: blur(10px);
    mix-blend-mode: multiply;
}

/* Dense blob near centre — ragged edge from low-freq turbulence */

.PTG-core {
    background-image: radial-gradient(
            ellipse 22% 24% at var(--focus-x) var(--focus-y),
            rgba(107,106,31,1.0)  0%,
            rgba(107,106,31,0.8)  40%,
            rgba(107,106,31,0.45) 70%,
            rgba(107,106,31,0)    100%
        );
    filter: url(#ptg-dense) contrast(1.1);
    mix-blend-mode: multiply;
}

/* Fine spray cloud — wide spread, high-freq grain dots */

.PTG-cloud {
    background-image: radial-gradient(
            ellipse 58% 62% at var(--focus-x) var(--focus-y),
            rgba(107,106,31,1.0)  0%,
            rgba(107,106,31,0.9)  18%,
            rgba(107,106,31,0.65) 38%,
            rgba(107,106,31,0.35) 58%,
            rgba(107,106,31,0)    80%
        );
    filter: url(#ptg-fine) contrast(1.1);
    mix-blend-mode: multiply;
}

/* Chunky drops — low-freq blobs with displacement warp */

.PTG-drops {
    background-image: radial-gradient(
            ellipse 70% 85% at calc(var(--focus-x) - 2%) var(--focus-y),
            #4A4910 0%,
            rgba(74,73,16,1.0)  20%,
            rgba(74,73,16,0.75) 40%,
            rgba(74,73,16,0.4)  62%,
            rgba(74,73,16,0)    82%
        );
    filter: url(#ptg-chunky) contrast(1.3);
    mix-blend-mode: multiply;
}

/* Outer mist — extends further, sparse stray specks */

.PTG-mist {
    inset: -15% -40% -15% -15%;
    background-image: radial-gradient(
            ellipse 95% 95% at calc(var(--focus-x) + 4%) var(--focus-y),
            rgba(74,73,16,0.7)  0%,
            rgba(74,73,16,0.4)  30%,
            rgba(74,73,16,0.15) 55%,
            rgba(74,73,16,0)    78%
        );
    filter: url(#ptg-specks) contrast(1.5);
    mix-blend-mode: multiply;
}

/* ── Text overlay ── */

.PTG-text {
    position: absolute;
    top: 38%;
    left: 23%;
    transform: translateY(-50%) rotate(-5deg);
    z-index: 3;
    width: 44%;
}

.PTG-text p {
    font-family: "flood-std", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.2rem;
    text-transform: uppercase;
    color: #1a1600;
    line-height: 1.05;
    margin: 0;
}

/* ── CTA ── */

.PTG-cta {
    display: inline-block;
    margin-top: 0.6em;
    margin-left: 2em;
    font-family: "flood-std", sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    text-transform: uppercase;
    color: #1a1600;
    letter-spacing: 0.06em;
    border-bottom: 2px solid #1a1600;
    padding-bottom: 3px;
}

/* ── Product image ── */

.PTG-image {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    height: 82%;
    z-index: 2;
}

.PTG-image img {
    height: 100%;
    width: auto;
    display: block;
}

/* Mobile (<640px): shrink text, give image an explicit width so it can't overflow into text */

@media only screen and (max-width: 40em) {
    .PTG-splatter {
        --focus-x: 20%;
        --wipe-x: 36%;
    }

    .PTG-text {
        left: 15%;
        width: 50%;
    }

    .PTG-text p {
        font-size: 1.3rem;
    }

    .PTG-cta {
        font-size: 0.8rem;
        margin-left: 0.5em;
    }

    .PTG-image {
        height: 95%;
        width: 72%;
        right: 1%;
    }

    .PTG-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: right center;
    }
}

/* Medium (641–1024px): tile is still full-width but image and text compete — narrow text block */

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
    .PTG-text {
        width: 36%;
    }

    .PTG-text p {
        font-size: 1.9rem;
    }
}

@media only screen and (min-width: 64.063em) {
    .PTG-text p {
        font-size: 1.8rem;
    }

    .PTG-image {
        right: 8%;
    }
}

/* Large range (1025–1440px): tile is half-width, constrain text and push image to right edge */

@media only screen and (min-width: 64.063em) and (max-width: 90.063em) {
    .PTG-text {
        width: 34%;
    }

    .PTG-text p {
        font-size: 1.6rem;
    }

    .PTG-cta {
        margin-left: 0;
    }

    .PTG-image {
        right: 2%;
        height: 78%;
    }
}

@media only screen and (min-width: 90.063em) {
    .PTG-text {
        left: 16%;
    }

    .PTG-text p {
        font-size: 2.2rem;
    }

    .PTG-image {
        right: 4%;
        height: 86%;
    }
}

@media only screen and (min-width: 112.5em) {
    .PTG-text {
        left: 22%;
    }

    .PTG-image {
        right: 10%;
    }
}

/* ==========================================================================
   FAQ page (Views/MultiOverviewFAQ.cshtml)
   ========================================================================== */

.contactPageFAQsection h5 {
    font-size: 1.4rem;
    line-height: 1.3;
    margin: 0.6rem 0 0.4rem;
    scroll-margin-top: 90px;
}

.contactPageFAQsection h5.faq-hit {
    background: #ffe600;
    padding: 0.3rem 0.6rem;
    margin-left: -0.6rem;
}

/* ==========================================================================
   Find Your Pads (MacroPartials/FindYourPads.cshtml)
   ========================================================================== */

.fyp-paper-size {
    border: 0;
    margin: 0 0 0.75rem;
    padding: 0;
}

.fyp-paper-size legend {
    padding: 0;
    margin-bottom: 0.25rem;
}

.fyp-paper-size label {
    display: inline-block;
    margin: 0 1.25rem 0.15rem 0;
    font-weight: normal;
    cursor: pointer;
}

.fyp-paper-size input[type="radio"] {
    margin: 0 0.35rem 0 0;
}

.fyp-paper-note {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    color: #888;
}

/* the translated labels are long (French 71 characters): on a phone the button keeps
   to its column and the label wraps, instead of running off the screen */
.fyp-download {
    max-width: 100%;
    white-space: normal;
}

.fyp-download.fyp-busy,
.fyp-download.fyp-busy:hover {
    background: #888;
    cursor: wait;
}

/* Member sign-in (Views/Partials/BasicLogin.cshtml): the honeypot field, off screen for
   people and screen readers; a form-filling bot still finds and fills it */

.signin-extra {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* the Cloudflare Turnstile check above the sign-in button, once its keys are set */

.signin-check {
    margin: .25rem 0 1rem;
}

.signin-error {
    display: block;
    margin: 0 0 1rem;
    color: #b00;
}