/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Navigation
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */

/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Effects Global
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */

.effects .img {
    /*fix here for big images in ie. was turned off*/
    width: 95%;
    float: left;

    /*margin-bottom: 5px;*/
    position: relative;

    /* padding-top: 28px; turned off here on 031917 */
}

.effects .img:last-child {
    margin-right: 0;
}

.effects .img img {
    display: block;
    margin: 0;
    padding: 0;
    max-width: 100%;
    height: auto;
    cursor: pointer;
}

a.more-info2 {
    display: block;
    z-index: 20;
    margin-top: 10px;
    text-align: center;
    line-height: 30px;
    color: #282828;
    font-weight: 700;
    background-color: #fce400;
}

a.more-info2:hover {
    background-color: #e3cd00;
}

/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Pad tile panel (PadTiles in js/padTiles.js)
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */

/* The pad image is a link to the product page; from 768px up the script turns a
   click into the panel fading in over the tile (no slide) with the product's name,
   what it fits and the link to its page. Any number of tiles can be open at once.
   A white panel on a white tile needs an edge, so a 1px #d9d9d9 border and nothing
   else - no shadow, no yellow. Under 768px there is no panel, the link just works. */

/* Every cell in a grid the same height (GridFade.cells sets --pad-cell-h on the grid
   to the tallest tile image at the current width), image and label centred, so a row
   keeps its height whatever is filtered out. The status-label line above a tile is
   fixed as well; a model-label cell is label line plus tile, centred on the tile. */
.effects .superDetail_container {
    height: 1.5rem;
    line-height: 1.5rem;
}

.effects .pad-tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: var(--pad-cell-h, auto);
}

.effects .discModelName,
.effects li.pad-model-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: calc(var(--pad-cell-h) + 1.5rem);
    padding-top: 1.5rem;
}

.effects .discModelName h4 {
    margin: 0;
    padding: 0;
}

/* an empty cell (a compound a model does not come in) and a cell without the
   status-label line (rim accessories) take the same height as the rest */
.effects div.placeholder,
.effects div.imgempty {
    height: var(--pad-cell-h);
    line-height: 1px;
}

.effects li.mix > div.placeholder,
.effects li.mix > .pad-tile:first-child {
    margin-top: 1.5rem;
}

.pad-tile .pad-trigger {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
    text-align: center;
}

.pad-tile .pad-trigger:focus-visible {
    outline: 2px solid #282828;
    outline-offset: 2px;
}

.pad-tile .pad-trigger img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

/* Exactly the tile's box, never past it: name, then the fits list in whatever
   height is left (PadTiles cuts it at the last comma that fits and adds the
   AndMore dictionary text), then the button. Translucent so the pad image stays
   visible under the words. */
.pad-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0.5rem 1.6rem 0.5rem 0.6rem;
    border: 1px solid #d9d9d9;
    background: rgba(255, 255, 255, 0.85);
    color: #282828;
    font-size: 0.8125rem;
    line-height: 1.35;
    text-align: left;
    outline: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}

.pad-panel .pad-fits {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.pad-panel .pad-more-text {
    color: #888;
}

.pad-tile.is-open .pad-panel {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
    .pad-panel {
        transition: none;
    }
}

.pad-panel p {
    flex: none;
    margin: 0 0 0.35rem;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
}

/* the product's name keeps its own casing (SwissStop, FlashPro, EXOTherm2) */
.pad-panel .pad-name {
    font-family: "orgonmedium", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* the compound under the name, only when the name does not already carry it */
.pad-panel .pad-compound {
    margin-top: -0.25rem;
    color: #595959;
}

.pad-panel .pad-label {
    color: #888;
}

.pad-panel .pad-close {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #282828;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1.75rem;
    text-align: center;
    cursor: pointer;
}

.pad-panel .pad-close:hover,
.pad-panel .pad-close:focus {
    background: #888;
    color: #fff;
    outline: none;
}

/* the panel itself is a close target too (any click on it that is not the product link) */
.pad-panel {
    cursor: pointer;
}

.pad-panel a.pad-more {
    cursor: pointer;
}

/* square, like every other button on the site - see reference_button_styling */
.pad-panel a.pad-more {
    flex: none;
    align-self: flex-start;
    display: inline-block;
    margin: 0.25rem 0 0;
    padding: 0.4rem 0.7rem;
    border-radius: 0;
    background: #282828;
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.2;
    text-decoration: none;
}

.pad-panel a.pad-more:hover,
.pad-panel a.pad-more:focus {
    background: #888;
    color: #fff;
    outline: none;
}

@media only screen and (max-width: 47.9375em) {
    .pad-panel {
        display: none;
    }
}

/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Effect 2 - Slide In Top
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */

/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Effect 3 - Slide In Left
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */

/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Effect 4 - Slide In Right
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */

/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Effect 5 - Icon Border Animate
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */

/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Effect 6 - Icon Bounce In
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */

/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Media Queries
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */

@media only screen and (max-width: 1100px) {
    .effects .img:first-child {
        margin-left: 0;
    }

    .effects .img:nth-child(2n) {
        margin-right: 0;
    }

    .effects .img:last-child {
        margin-right: 0;
    }
}

@media only screen and (max-width: 520px) {
    .effects .img:nth-child(n) {
        margin-right: 0;
    }

    .effects .img:first-child {
        margin-left: 0;
    }

    .effects .img:nth-child(2n-1) {
        margin-left: 0;
    }

    .effects .img:nth-child(2n) {
        margin-right: 0;
    }

    .effects .img:last-child {
        margin-right: 0;
    }

    .effects .img img {
        margin: 0 auto;
    }

    a.more-info2 {
        width: 50%;
    }
}

@media only screen and (max-width: 640px) {
    a.more-info2 {
        width: 50%;
    }
}

/* (.dpf-hidden, the filtered-out tile, is in site.css: the Catalyst grid filters too and does not load this file) */

/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Grid fades (GridFade in js/gridFade.js, DiscPadFilter)
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */

/* Opacity only, no movement: images fade in as they load (staggered by the script
   through transition-delay), the disc grid fades in as a whole on its first paint,
   and a filtered tile fades out before it is hidden and in after it is shown. */

@keyframes gridFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes gridFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* the transition sits on the loaded state only, so taking the class drops an image
   to 0 at once instead of fading it out first */
img.grid-img {
    opacity: 0;
}

img.grid-img.is-loaded {
    opacity: 1;
    transition: opacity 0.25s ease;
}

.grid-enter {
    animation: gridFadeIn 0.2s ease;
}

.dpf-in {
    animation: gridFadeIn 0.2s ease;
}

.dpf-out {
    animation: gridFadeOut 0.15s ease forwards;
}

.dpf-count-in {
    animation: gridFadeIn 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    img.grid-img,
    img.grid-img.is-loaded {
        opacity: 1;
        transition: none;
    }

    .grid-enter,
    .dpf-in,
    .dpf-out,
    .dpf-count-in {
        animation: none;
    }
}

/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Compound dialog (CompoundDialog in js/discPadFilter.js)
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */

/* The compound's name, slogan and ratings behind each logo in the header row, in
   the site's notice box (Views/NotFound404.cshtml .notfound-readable): a 46rem white
   box, text left aligned, the site's own h2, square black buttons. No accent lines
   and no shadows - the dimmed page behind it does the separating. */

.cmp-source {
    display: none;
}

.cmp-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.5);
}

.cmp-modal[hidden] {
    display: none;
}

.cmp-dialog {
    position: relative;
    width: 100%;
    max-width: 46rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 1.75rem;
    background: #fff;
    color: #282828;
    text-align: left;
    outline: none;
}

.cmp-close {
    position: absolute;
    top: 0.25rem;
    right: 0.5rem;
    padding: 0.4rem 0.6rem;
    border: 0;
    background: transparent;
    color: #282828;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.cmp-close:hover,
.cmp-close:focus {
    color: #888;
    outline: none;
}

/* logo left, text right; stacked on a phone (below) */
.cmp-body {
    display: flex;
    align-items: flex-start;
    gap: 1.75rem;
}

.cmp-body .cmp-logo {
    flex: 0 0 11rem;
    max-width: 11rem;
    height: auto;
    margin-top: 0.5rem;
}

.cmp-text {
    flex: 1 1 auto;
    min-width: 0;
}

.cmp-text h2 {
    margin: 0 0 0.25rem;
    padding-right: 2rem;
}

.cmp-slogan {
    margin: 0 0 1.5rem;
    color: #595959;
}

/* a dictionary word, never a compound name, so uppercase is allowed here */
.cmp-heading {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cmp-heading span {
    margin-left: 0.5rem;
    color: #888;
    letter-spacing: 0;
    text-transform: none;
}

/* the ratings table, stripped of Foundation's borders, stripes and padding */
.cmp-ratings {
    width: 100%;
    margin: 0 0 1.5rem;
    border: 0;
    background: transparent;
}

.cmp-ratings tr,
.cmp-ratings tr:nth-of-type(even),
.cmp-ratings th,
.cmp-ratings td {
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: #282828;
}

.cmp-ratings th {
    width: 1%;
    padding: 0.2rem 1rem 0.2rem 0;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
}

.cmp-ratings td {
    padding: 0.2rem 0;
}

.cmp-ratings td.cmp-value {
    width: 2.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cmp-meter {
    display: block;
    height: 0.4rem;
    background: #e6e6e6;
}

.cmp-meter span {
    display: block;
    height: 100%;
    background: #282828;
}

/* square, like every other button on the site - see reference_button_styling */
a.cmp-more {
    display: inline-block;
    padding: 0.65rem 1.1rem;
    border-radius: 0;
    background: #282828;
    color: #fff;
    text-decoration: none;
}

a.cmp-more:hover,
a.cmp-more:focus {
    background: #888;
    color: #fff;
    outline: none;
}

@media only screen and (max-width: 47.9375em) {
    .cmp-modal {
        padding: 16px;
    }

    .cmp-dialog {
        max-height: calc(100vh - 32px);
        padding: 1.25rem 1.25rem 1rem;
    }

    .cmp-body {
        display: block;
    }

    .cmp-body .cmp-logo {
        max-width: 9rem;
        margin: 0 0 1rem;
    }

    .cmp-ratings th {
        padding-right: 0.75rem;
        white-space: normal;
    }

    a.cmp-more {
        display: block;
        text-align: center;
    }
}