/*
Theme Name: Labcritics
Theme URI: https://www.labcritics.com
Author: Labcritics
Author URI: https://www.labcritics.com
Description: A theme for Labcritics - the latest developments in tools and techniques accelerating research.
Version: 2.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: labcritics
*/

/**
 * TABLE OF CONTENTS
 *
 * 1.0 Reset
 * 2.0 Repeatable Patterns
 * 3.0 Basic Structure
 * 4.0 Header
 * 5.0 Navigation
 * 6.0 Content
 * 6.1 Post Thumbnail
 * 6.2 Entry Header
 * 6.4 Entry Content
 * 6.5 Gallery
 * 6.6 Post Formats
 * 6.7 Post/Image/Paging Navigation
 * 6.8 Attachments
 * 6.9 Archives
 * 6.10 Contributor Page
 * 6.11 404 Page
 * 6.12 Full-width
 * 6.13 About Us
 * 6.14 Singular
 * 6.15 Comments
 * 7.0 Sidebars
 * 7.1 Widgets
 * 7.2 Content Sidebar Widgets
 * 8.0 Footer
 * 9.0 Featured Content
 * 10.0 Multisite & custom components
 * 11.0 Media Queries
 * 12.0 Print
 * 13.0 Appended components (unsectioned legacy additions)
 * 14.0 Author profiles & team page
 * 15.0 About page
 *
 * Colour tokens are defined in the :root block below; prefer var(--lc-*)
 * over raw hex so brand colours stay in one place.
 *
 * Note: sections 6.13-6.15 and 13.0 were renumbered/added during the 2026
 * cleanup to remove duplicate numbering. Section 6.3 does not exist.
 */


/**
* TABLE OF CONTENTS
*
* 6.13 About Us
* 6.14 Singular
* 6.15 Comments
* 10.0 Multisite & custom components
* 13.0 Appended components (unsectioned legacy additions)
*
* Colour tokens live in the :root block directly below.
*/


:root {
    --lc-blue: #0c98f8;           /* brand primary (#0e98f8 was an imperceptible typo variant) */
    --lc-blue-hover: #0882d4;     /* darker blue for link hover/active */
    --lc-blue-alt: #0088cc;       /* secondary UI blue (tabs, distributor accents) */
    --lc-green: #0aa66e;          /* Labs Reach brand green */
    --lc-green-dark: #0f1f1a;     /* Labs Reach heading ink */
    --lc-green-tint: #ebf1ee;     /* Labs Reach surface tint */
    --lc-blue-ink: #0f2434;       /* heading ink on blue surfaces (blue counterpart of --lc-green-dark) */
    --lc-blue-tint: #e9f4fe;      /* blue surface tint (blue counterpart of --lc-green-tint) */
    --lc-blue-border: #cfe4f7;    /* hairline border on blue surfaces */
    --lc-accent: #41a62a;         /* inherited Twenty Fourteen accent green */
    --lc-accent-dark: #24890d;    /* inherited Twenty Fourteen accent, dark */
    --lc-text: #2b2b2b;           /* primary body text */
    --lc-text-muted: #767676;     /* muted meta text */
    --lc-text-soft: #565656;      /* soft heading text */
    --lc-border: #dddddd;         /* default border */
    --lc-border-light: #cccccc;   /* light border */
}


/**
 * 1.0 Reset
 * -----------------------------------------------------------------------------
 */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
    display: block;
}

audio,
canvas,
video {
    display: inline-block;
    max-width: 100%;
}

html {
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
}

body,
button,
input,
select,
textarea {
    color: var(--lc-text);
    font-family: 'Poppins',"Poppins Fallback", sans-serif !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    box-sizing: border-box;
}

body {
    background: #fff;
}

a {
    color: var(--lc-blue);
    text-decoration: none;
    cursor: pointer;
}

a:focus {
    outline: thin dotted;
}

a:hover,
a:active {
    outline: 0;
    color: var(--lc-blue-hover);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
    font-weight: 700;
    margin: 36px 0 12px;
}

h1 {
    font-size: 26px;
    line-height: 1.3846153846;
}

h2 {
    font-size: 24px;
    line-height: 1;
}

h3 {
    font-size: 22px;
    line-height: 1.0909090909;
}

h4 {
    font-size: 20px;
    line-height: 1.2;
}

h5 {
    font-size: 18px;
    line-height: 1.3333333333;
}

h6 {
    font-size: 16px;
    line-height: 1.5;
}

address {
    font-style: italic;
    margin-bottom: 24px;
}

.container {
    max-width: 1470px;
    width: 100%;
    float: none;
    margin: auto;
    display: block;
}

abbr[title] {
    border-bottom: 1px dotted var(--lc-text);
    cursor: help;
}

b,
strong {
    font-weight: 700;
}

cite,
dfn,
em,
i {
    font-style: italic;
}

mark,
ins {
    text-decoration: none;
}


code,
kbd,
tt,
var,
samp,
pre {
    font-family: monospace, serif;
    font-size: 15px;
    -webkit-hyphens: none;
    hyphens: none;
    line-height: 1.6;
}

pre {
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    margin-bottom: 24px;
    max-width: 100%;
    overflow: auto;
    padding: 12px;
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

blockquote,
q {
    -webkit-hyphens: none;
    hyphens: none;
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}

blockquote {
    color: var(--lc-text-muted);
    font-size: 19px;
    font-style: italic;
    font-weight: 300;
    line-height: 1.2631578947;
    margin-bottom: 24px;
}

blockquote cite,
blockquote small {
    color: var(--lc-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

blockquote em,
blockquote i,
blockquote cite {
    font-style: normal;
}

blockquote strong,
blockquote b {
    font-weight: 400;
}

small {
    font-size: smaller;
}

big {
    font-size: 125%;
}

sup,
sub {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    bottom: 1ex;
}

sub {
    top: .5ex;
}

dl {
    margin-bottom: 24px;
}

dt {
    font-weight: bold;
}

dd {
    margin-bottom: 24px;
}

ul,
ol {
    list-style: none;
    margin: 0 0 24px 20px;
}

ul {
    list-style: disc;
}

ol {
    list-style: decimal;
}

li>ul,
li>ol {
    margin: 0 0 0 20px;
}

img {
    border: 0;
    vertical-align: middle;
    max-width: 100%;
}

figure {
    margin: 0;
}

fieldset {
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin: 0 0 24px;
    padding: 11px 12px 0;
}

legend {
    white-space: normal;
}

button,
input,
select,
textarea {
    box-sizing: border-box;
    font-size: 100%;
    margin: 0;
    max-width: 100%;
    vertical-align: baseline;
}

button,
input {
    line-height: normal;
}

input,
textarea {
    background-image: -webkit-linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0));
    /* Removing the inner shadow, rounded corners on iOS inputs */
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled],
input[disabled] {
    cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
    padding: 0;
}

input[type="search"] {
    -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
    vertical-align: top;
}

table,
th,
td {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

table {
    border-collapse: separate;
    border-spacing: 0;
    border-width: 1px 0 0 1px;
    margin-bottom: 15px;
    width: 100%;
}

caption,
th,
td {
    font-weight: normal;
    text-align: left;
}

th {
    border-width: 0 1px 1px 0;
    font-weight: bold;
}

td {
    border-width: 0 1px 1px 0;
}

del {
    color: var(--lc-text-muted);
}

hr {
    background-color: rgba(0, 0, 0, 0.1);
    border: 0;
    height: 1px;
    margin-bottom: 23px;
}

.sml_name,
.sml_emaillabel,
.sml_subscribe small {
    display: none;
}

.sml_emailinput {
    font-size: 11px;
}

.row {
    float: left;
    width: 100%;
    clear: both;
    margin: 0% 0% 3%;
}

.col-md-4 {
    width: 33%;
    float: left;
}


/* Support a widely-adopted but non-standard selector for text selection styles
* to achieve a better experience. See http://core.trac.wordpress.org/ticket/25898.
*/

::-moz-selection {
    background: var(--lc-blue);
    color: #fff;
    text-shadow: none;
}

.full-image {
    width: 100%;
}

.full-image img {
    width: 100%;
}

/**
 * 2.0 Repeatable Patterns
 * -----------------------------------------------------------------------------
 */


/* Input fields */

input,
textarea {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    color: var(--lc-text);
    padding: 8px 10px 7px;
}

textarea {
    width: 100%;
}

input:focus,
textarea:focus {
    border: 1px solid rgba(0, 0, 0, 0.3);
    outline: 0;
}


/* Buttons */

button,
.contributor-posts-link,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    background-color: var(--lc-blue);
    border: 0;
    border-radius: 2px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 30px 4px;
    text-transform: uppercase;
    vertical-align: bottom;
    border-bottom: 2px solid var(--lc-blue);
}

button:hover,
button:focus,
.contributor-posts-link:hover,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
    background-color: #48b4fd;
    color: #fff;
    border-bottom: 2px solid var(--lc-blue);
}

button:active,
.contributor-posts-link:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
    background-color: #55d737;
}

.adBlock button{
    width: 60%;
    float: none;
    margin: 0 20%;
}

.search-field {
    width: 100%;
}

.search-submit {
    display: none;
}

.js-subscribe-modal span {
    font-size: 8px;
    clear: both;
    width: 100%;
    float: left;
    color: #dadada;
}


/* Placeholder text color */

.full-width .site-content {
    padding-bottom: 1em;
}

::placeholder {
    color: #939393;
    opacity: 1;
}


/* Responsive images. Fluid images for posts, comments, and widgets */

.comment-content img,
.entry-content img,
.entry-summary img,
#site-header img,
.widget img,
.wp-caption {
    max-width: 100%;
}

.entry-content {
    float: left;
    width: 75%;
    display: block;
    font-size: 13px;
    text-align: justify;
    font-weight: 300;
}

.entry-content p {
    margin-bottom: 9px;
    margin-top: 0px;
}


/**
* Make sure images with WordPress-added height and width attributes are
* scaled correctly.
*/

.comment-content img[height],
.entry-content img,
.entry-summary img,
img[class*="align"],
img[class*="wp-image-"],
img[class*="attachment-"],
#site-header img {
    height: auto;
}

img.size-full,
img.size-large,
.wp-post-image,
.post-thumbnail img {
    height: auto;
    max-width: 100%;
}


/* Make sure embeds and iframes fit their containers */

embed,
iframe,
object,
video {
    margin-bottom: 24px;
    max-width: 100%;
}

p>embed,
p>iframe,
p>object,
span>embed,
span>iframe,
span>object {
    margin-bottom: 0;
}


/* Alignment */

.alignleft {
    float: left;
}

.alignright {
    float: right;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

blockquote.alignleft,
img.alignleft {
    margin: 7px 24px 7px 0;
}

.wp-caption.alignleft {
    margin: 7px 14px 7px 0;
}

blockquote.alignright,
img.alignright {
    margin: 7px 0 7px 24px;
}

.wp-caption.alignright {
    margin: 7px 0 7px 14px;
}

blockquote.aligncenter,
img.aligncenter,
.wp-caption.aligncenter {
    margin-top: 7px;
    margin-bottom: 7px;
    max-width: 100%;
}

.wp-caption img {
    max-width: 100%;
}

.site-content blockquote.alignleft,
.site-content blockquote.alignright {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 17px;
    width: 50%;
}

.site-content blockquote.alignleft p,
.site-content blockquote.alignright p {
    margin-bottom: 17px;
}

.wp-caption {
    margin-bottom: 24px;
    color: var(--lc-text-muted);
}

.wp-caption img[class*="wp-image-"] {
    display: block;
    margin: 0;
}

.wp-caption-text {
    box-sizing: border-box;
    font-size: 12px;
    font-style: italic;
    line-height: 1.5;
    margin: 9px 0;
    padding-right: 10px;
}

.wp-smiley {
    border: 0;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}


/* floatign header */

.floating-header h2 {
    font-family: inherit;
    font-weight: 300;
    font-size: 15px;
    width: 100%;
    border-bottom: 2px solid #ececec;
    margin-bottom: 5px;
    line-height: 22px;
    margin-top: 6px;
    color: var(--lc-blue);
    text-transform: uppercase;
}

.searchDiv {
    float: left;
    box-shadow: 0px 0px 2px var(--lc-border-light);
    margin-bottom: 4px;
}

ul.searchTabs {
    list-style: none;
    float: left;
    margin-left: 0px;
    font-size: 11px;
    background: #fff;
    margin-bottom: 0px;
}

ul.searchTabs li.tab1 {
    width: 48px;
    line-height: 29px;
    cursor: default;
    border-left: none !important;
}

ul.searchTabs li.tab2 {
    width: 65px;
    line-height: 29px;
    border-left: 1px solid #f1f1f1;
    border-right: 1px solid #f1f1f1;
    cursor: pointer;
    background: var(--lc-blue);
    color: #fff;
}

ul.searchTabs li.tab3 {
    float: left;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    height: 29px;
    margin-bottom: auto;
    line-height: 14px;
    background: var(--lc-blue);
    color: #fff;
    width: 85px;
    margin-right: -2px !important;
}

ul.searchTabs .active {
    color: var(--lc-blue);
    background: #fff;
}

ul.searchTabs li {
    float: left;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    margin-bottom: auto;
}

.tab1Search {
    float: left;
    width: 100%;
    background: #fff;
}

.tab1Search form {
    margin-bottom: 0px;
}

.tab1Search form input[type=text] {
    width: 92%;
    margin-left: 3.8%;
    margin-right: 4%;
    margin-top: 9px;
    font-size: 11px;
    background: #fdfdfd;
    margin-bottom: 9px;
    border-radius: 0px;
}

.cornerTag {
    width: 50px;
    height: 0px;
    border-style: solid;
    border-width: 0 0 12px 16px;
    border-color: transparent transparent #e7e0e0 transparent;
    float: right;
    margin-top: -1px;
    font-size: 10px;
    line-height: 11px;
    text-align: right;
    padding-right: 10px;
}

.applicationAreas {
    box-shadow: 0px 0px 2px var(--lc-border-light);
    float: left;
}

ul.applicationTabs {
    list-style: none;
    float: left;
    margin-left: 0px;
    font-size: 10px;
    background: #fff;
    margin-bottom: 0px;
}

ul.applicationTabs li.active {
    color: var(--lc-blue);
    background: #fff;
}

ul.applicationTabs li.tab1 {
    width: 59px;
    line-height: 33px;
    cursor: default;
    float: left;
    text-align: center;
    height: 33px;
}

ul.applicationTabs li.tab2 {
    float: left;
    width: 64px;
    text-align: center;
    line-height: 12px;
    padding-top: 4px;
    height: 29px;
    border-right: 1px solid #eee;
    border-left: 1px solid #eee;
    background: var(--lc-blue);
    color: #fff;
}

ul.applicationTabs li.tab3 {
    width: 75px;
    line-height: 33px;
    float: left;
    text-align: center;
    height: 33px;
    background: var(--lc-blue);
    color: #fff;
}

.tableTab1 {
    font-size: 11px;
    text-align: center;
    float: left;
    width: 200px;
    background: #fff;
}

div.tableTab1 td {
    text-align: center;
}


/* Assistive text */

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    line-height: normal;
    padding: 15px 23px 14px;
    position: absolute;
    left: 5px;
    top: 5px;
    text-decoration: none;
    text-transform: none;
    width: auto;
    z-index: 100000;
    /* Above WP toolbar */
}

.hide {
    display: none;
}

.top-feat {
    width: 100%;
    float: left;
    margin-bottom: 3em;
    background: #ececec;
    margin-top: -1em;
    padding-top: 3em;
    padding-bottom: 1em;
}

.lcfeatured {

    position: relative;
    background-color: #fff;
    grid-area: main;
}

.with-brdr,
.with-brdr2 {
    position: relative;
}

.lcfeatured:before,
.lcfeatured2:before,
.lcfeatured:after,
.lcfeatured2:after,
.lcfeatured span:after,
.lcfeatured2 span:after,
.lcfeatured span:before,
.lcfeatured2 span:before,
.homepost:before,
.homepost:after,
.adBlock:before,
.adBlock:after,
.adBlock span:before,
.adBlock span:after,
.homepost span:before,
.homepost span:after,
.with-brdr:before,
.with-brdr:after,
.with-brdr span:before,
.with-brdr span:after,
.with-brdr2:before,
.with-brdr2:after,
.with-brdr2 span.corner:before,
.with-brdr2 span.corner:after {
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    border-color: #a0a0a0 !important;
    position: absolute;
}

.lcfeatured:before,
.lcfeatured2:before,
.homepost:before,
.with-brdr:before,
.with-brdr2:before {
    top: -2px;
    left: -2px;
    border-top: 1px solid var(--lc-blue);
    border-left: 1px solid var(--lc-blue);
}

.lcfeatured:after,
.lcfeatured2:after,
.homepost:after,
.with-brdr:after,
.with-brdr2:after {
    top: -2px;
    right: -2px;
    border-top: 1px solid var(--lc-blue);
    border-right: 1px solid var(--lc-blue);
}

.lcfeatured span:after,
.lcfeatured2 span:after,
.homepost span:after,
.with-brdr span:after,
.with-brdr2 span.corner:after {
    bottom: -2px;
    right: -2px;
    border-bottom: 1px solid var(--lc-blue);
    border-right: 1px solid var(--lc-blue);
}

.lcfeatured span:before,
.lcfeatured2 span:before,
.homepost span:before,
.with-brdr span:before,
.with-brdr2 span.corner:before {
    bottom: -2px;
    left: -2px;
    border-bottom: 1px solid var(--lc-blue);
    border-left: 1px solid var(--lc-blue);
}

.lcfeatured .lcarticle h2 {
    /*
     * Fluid, because the hero headline sits in a narrow column that shrinks with
     * the viewport - .lcfeatImg keeps 54%, leaving .lcarticle at 472px on a full
     * 1470px container and under 200px by the old 665px breakpoint. A fixed 41px
     * ran to 11 lines and 549px tall at a 1024px viewport; this holds the block
     * to roughly 200-270px across the whole range.
     *
     * The ramp is anchored to the two values it replaces: 18px at 665px (what the
     * max-width:665px rule used to set) up to 36px at 1468px, which is where
     * .container stops growing at its 1470px max-width - past that the column is
     * fixed, so the type should stop growing too. The rem terms keep it responsive
     * to the reader's own font-size setting rather than viewport alone.
     *
     * Static fallback first: if clamp() is unsupported the 36px stands.
     */
    font-size: 36px;
    font-size: clamp(1.125rem, 0.195rem + 2.24vw, 2.25rem);
    color: var(--lc-text-soft);
    text-align: left;
    margin: 0px 0px 13px;
    padding: 0px;
    line-height: 1.2;
    text-shadow: 0px 0px 4px #fff;
    display: inline;
    margin-top: 40px;
    padding-bottom: 0;
}

.post-details {
    color: #545454b3;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    text-align: left;
}

.lcfeatured p {
    color: #1d1d1d;
    font-size: 16px;
    margin-top: 23px;
    font-weight: 300;
    line-height: 1.5;
    margin-bottom: 10px;
}

.lcfeatured2 {

    position: relative;
    background: #fff;
    flex-grow: 1;
    flex-basis: 0;
}

.lcfeatured2 .lcfeatImg {
    text-align: center;
    float: right;
    width: 52%;
    overflow: hidden;
    height: 89%;
    margin: 2%;
    display: none;
}

.lcfeatured2 .lcarticle {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    min-height: 67px;
    height:auto;
    padding-left: 25px;
}

.lcarticle .entry-header {
    position: relative;
    float: left;
}

.lcfeatured .lcfeatImg {
    display: block;
    position: relative;
    width: 54%;
    height: 94%;
    text-align: center;
    float: left;
    overflow: hidden;
    margin: 1%;
    box-sizing: border-box;
}

.lcfeatured2 p {
    width: 64%;
    float: left;
    margin: 0px 10px 0px;
    padding: 0px;
    text-align: left;
}

.lcfeatured2 .entry-header {
    width: 60%;
    float: left;
    margin: 0px 10px 0px;
}

.lcfeatured .lcfeatImg img,
.lcfeatured2 .lcfeatImg img {
    height: 100%;
    width: 100%;
}

.lcarticle {
    font-size: 12px;
    position: relative;
    width: 43%;
    float: left;
    padding: 1em;
    box-sizing: border-box;

}

.tool-thumb {
    width: 28%;
    background: #e9e9e9;
    height: 100%;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tool-thumb a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.tool-thumb img {
    max-width: 100%;
    height: auto;
}

.lcarticle h2 {
    font-size: 18px;
    color: var(--lc-text-soft);
    text-align: left;
    margin: 0px 0px 5px;
    padding: 0px;
    line-height: 1.4;
    position:relative;
}

.home_subsections {
    width: 100%;
    float: left;
    position: relative;
    box-sizing: border-box;
    grid-column: 1 / 4;
    grid-row: 1 / 2;


}

.feat-right {
    grid-area: livefeed;
    max-width: 356px;
    min-width: 216px;
    background: #fff;
}

.story-footer {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 94%;
    border-top: 1px solid var(--lc-border);
    margin: 1% 3%;
    padding: 2px;
    text-align: right;
    box-sizing: border-box;
}

.story-footer a {
    color: var(--lc-blue);
}

.feed-pad {
    padding: 3%;
}

ul.feedContent {
    font-size: 83%;
    /*
     * border-box is load-bearing. With the inherited content-box, `width: 100%`
     * measured the content area only, so the 24px padding-left was added on top
     * and the list rendered 359px wide inside a 335px column - headlines ran 13px
     * past the right edge of .feed-pad and were clipped by the card border.
     *
     * padding-right keeps the text off that edge; the numbered markers hang in
     * the padding-left, so that value has to stay 24px.
     */
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 5px;
    float: left;
    width: 100%;
    position: relative;
    counter-reset: section;
    margin: -9px 0px 0;
    max-height: 560px;
    overflow-y: auto;
}

.feedContent:before {
    content: "";
    border-left: 1px solid #c6c6c6;
    height: 92%;
    position: absolute;
    left: 8.5px;
    top: 14px;
}
ul.feedContent li {
    counter-increment: step-counter;
}

ul.feedContent li::before {
    content: counter(step-counter);
    margin-right: 5px;
    font-size: 9px;
    background-color: rgb(12 152 248);
    color: white;
    font-weight: bold;
    padding: 3px 7px 1px;
    border-radius: 15px;
    position: absolute;
    left: 0px;
    text-align: center;
    line-height: 1.9;
}

.feedContent strong {
    color: var(--lc-blue);
    font-size: 11px;
}

.feedContent h4 {
    font-size: 14px;
    color: var(--lc-text-soft);
    margin: 14px 0px 5px;
}

.feedContent h4 a {
    color: var(--lc-text-soft);
}

.feedContent .storyDeets {
    font-size: 10px;
    color: #6d6d6d;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
}

span.bullets {
    position: absolute;
    left: -9px;
    background: #333;
    width: 15px;
    height: 15px;
    color: #fff;
    text-align: center;
    font-size: 9px;
    border-radius: 10px;
    line-height: 1.8;
    margin-top: 2px;
    margin-left: 11px;
}

span.bullets:before, span.bullets:after {
    content:none;
}

.feedContent .has-small-font-size {

    margin-top: 2px;
    border-bottom: 1px solid #78787847;
    padding-bottom: 7px;
    margin-bottom: 8px;
}

.category_tag, .pCat {
    float: left;
    font-size: 10px;
    letter-spacing: 1px;
    font-weight: 500;
    color: var(--lc-blue);
    padding: 1px 6px;
    height: 80%;
    display: block;
    margin: auto;
    writing-mode: vertical-lr;
    text-orientation: sideways;
    position: absolute;
    left: 0px;
    top: 0;
    bottom: 0;
    text-transform: uppercase;
    text-align: center;
    width: 13px;
    overflow: hidden;
}

.lcfeatured2 .category_tag {
    writing-mode: vertical-lr;
    text-orientation: sideways;
    position: absolute;
    left: 0px;
    top: 0;
    bottom: 0;
}

.lcnews {
    float: left;
    text-align: center;
    width: 100%;
}

.lcnews img {
    width: 74%;
}

.trialads {
    width: 100%;
    float: left;
    margin-top: -5px;
    margin-left: -1%;
}

.ad-half {
    width:100%;
    float: left;
    grid-row: 2/3;
    grid-column: 1/3;

    height: 10.5em;
}

.homeBar {
    font-size: 13px;
    padding: 8px;
}

.adBlock {
    width: 100%;
    float: left;
    position: relative;
    padding: 16px;
    box-sizing: border-box;
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    margin-bottom:12px;
}

.adBlock svg {
    height: 100%;
}

.adBlock h3 {
    font-size: 14px;
    line-height: 1.0909090909;
    color: var(--lc-blue);
    text-transform: capitalize;
}

.adBlock p {
    font-size: 13px;
    margin: auto;
    color: #666;
}

.adBlock ul {
    font-size: 13px;
    color: #666;
    margin: 7px 21px;
}

.pdfDown {
    margin: 0px auto !important;
    text-align:center;
}

.trialads .ad-full {
    width: 98%;
    float: left;
    margin: 1%;
}

.trialads .ad-tall {
    width: 50%;
    float: left;
}

.trialads .ad-tall .ad-half {
    width: 100%;
}

.trialads .ad-half img,
.trialads .ad-full img {
    width: 100%;
}


/* Clearing floats */

.hentry:before,
.hentry:after,
.slider-direction-nav:before,
.slider-direction-nav:after,
.contributor-info:before,
.contributor-info:after,
.search-box:before,
.search-box:after,
[class*="content"]:before,
[class*="content"]:after,
[class*="site"]:before {
    content: "";
    display: table;
}

.hentry:after,
.slider-direction-nav:after,
.contributor-info:after,
.search-box:after,
[class*="content"]:after,
[class*="site"]:after {
    clear: both;
}


/* Genericons */

.bypostauthor>article .fn:before,
.comment-edit-link:before,
.comment-reply-link:before,
.comment-reply-login:before,
.comment-reply-title small a:before,
.contributor-posts-link:before,
.search-toggle:before,
.slider-direction-nav a:before,
.widget_twentyfourteen_ephemera .widget-title:before {
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font: normal 16px/1 Genericons;
    text-decoration: inherit;
    vertical-align: text-bottom;
}


/* Separators */

.site-content span+.entry-date:before,
.full-size-link:before,
.parent-post-link:before,
span+.byline:before,
span+.comments-link:before,
span+.edit-link:before,
.widget_twentyfourteen_ephemera .entry-title:after {
    content: "\0020\007c\0020";
}


/**
 * 3.0 Basic Structure
 * -----------------------------------------------------------------------------
 */

.site {
    background-color: #f7f7f7;
    position: relative;
}

.main-content {
    width: 100%;
}


/**
 * 4.0 Header
 * -----------------------------------------------------------------------------
 */


/* Ensure that there is no gap between the header and
the admin bar for WordPress versions before 3.8. */

#wpadminbar {
    min-height: 32px;
}

#site-header {
    position: relative;
    z-index: 3;
}

.site-header {
    position: relative;
    width: 100%;
    z-index: 4;
}

.header-main {
    min-height: 48px;
    padding: 0 10px;
}

.header-main .dashicons {
    float: right;
    width: 28px;
    padding: 14px 2px;
    color: #252525 !important;
    cursor: pointer;
    font-size: 16px;
}

.header-main sup {
    color: var(--lc-blue);
}

/* height: auto is required now that the img carries width/height attributes -
   without it the 65px height attribute would win over the 123px CSS width and
   squash the logo. The pair is what lets the browser reserve the box early. */
.main-logo {
    width: 123px;
    height: auto;
    margin-top: 14px;
}

.labcritics_logo {
    float: left;
    margin-left: -5px;
}

header .trend {
    float: right;
    height: 40px;
    padding: 8px 20px 0px;
    border-left: 1px solid var(--lc-border);
}

#masthead .new-nav {
    float: left;
    height: 14px;
    width: auto;
    font-size: 11px;
    color: #4c4c4c;
    margin-left: 20px;
}

#masthead a.headerFa {
    padding: 10px;
    float: right;
}

/*
 * Inline brand SVGs replacing Font Awesome (see inc/brand-icons.php). Sized in
 * em and filled with currentColor so they inherit the link's font-size and
 * colour exactly as the icon font did. The icon font sat on the text baseline;
 * an inline SVG does not, hence the explicit vertical-align.
 */
.lc-icon {
    display: inline-block;
    vertical-align: -0.125em;
}

#masthead .new-nav ul {
    width: 100%;
    margin: 3px;
    margin-left: 10px;
    list-style: none;
}

.new-nav ul li {
    float: left;
    padding: 13px 27px;
    position: relative;
    letter-spacing: 1px;
    font-weight: 800;
}

#masthead .new-nav ul li:before {
    width: 10px;
    position: absolute;
    border-top: 1px solid #a0a0a0;
    height: 1px;
    left: 8px;
    content: "";
    top: 20px;
}

#masthead .new-nav a {
    color: var(--lc-text-soft);
}

/*
 * Nav entries for sections that are announced but not built yet. Matches the
 * anchors beside it so the row stays visually even, but is not a link -
 * /training/ 404'd from all 185 pages while sitting in the primary nav.
 */
#masthead .new-nav .nav-soon {
    color: var(--lc-text-soft);
    cursor: default;
}

.trend a {
    font-size: 14px;
}

#menutogl {
    float: left;
    width: 23px;
    font-size: 20px;
}

#menutogl .dashicons {
    padding: 12px 10px;
}

#menutogl .dashicons-menu:before {
    font-size: 25px;
}

header .trend h4 {
    font-size: 11px;
    font-weight: 300;
    margin: 0px;
}


/* Search in the header */

.search-toggle {
    cursor: pointer;
    float: right;
    height: 48px;
    margin-right: 38px;
    text-align: center;
    width: 30px;
}

.search-toggle:before {
    color: var(--lc-blue);
    content: "\f400";
    font-size: 17px;
    margin-top: 14px;
}

.search-toggle .screen-reader-text {
    left: 5px;
    /* Avoid a horizontal scrollbar when the site has a long menu */
}

.search-box-wrapper {
    box-sizing: border-box;
    position: absolute;
    top: 2px;
    right: 159px;
    width: 438px;
    z-index: 2;
}

.search-box {
    background-color: #e7e8e8;
    padding: 7px;
}

.search-box .search-field {
    background-color: #fff;
    float: right;
    font-size: 12px;
    padding: 8px 10px 7px 8px;
    width: 100%;
    border: 1px solid #9a9b9c;
    border-radius: 3px;
}


/**
 * 5.0 Navigation
 * -----------------------------------------------------------------------------
 */

.site-navigation ul {
    list-style: none;
    margin: 0;
}

.site-navigation li {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.site-navigation ul ul {
    margin-left: 20px;
}

.site-navigation a {
    color: #fff;
    display: block;
    text-transform: uppercase;
}

.site-navigation a:hover {
    color: var(--lc-accent);
}

.site-navigation .current_page_item>a,
.site-navigation .current_page_ancestor>a,
.site-navigation .current-menu-item>a,
.site-navigation .current-menu-ancestor>a {
    color: #55d737;
    font-weight: 900;
}


/* Primary Navigation */


/* Secondary Navigation */

/* modal */

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    /*
     * Previously stacked below .tab-content (positioned, layer 2). On
     * manufacturer and distributor profiles the tab panel punched through
     * the subscribe popup, leaving its form visible behind the tab content.
     * 5 clears .tab-content (2), .site-footer (3) and .site-header (4).
     */
    z-index: 5; /* Sit on top */
    padding-top: 40px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 1px;
    border: 1px solid #888;
    width: 500px;
    max-width: 80%;
}

.modal-header {
    width: 100%;
    border-bottom: 2px solid var(--lc-border);
    position: relative;
    background: #036dba;
    padding: 1.5em;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
}

.modal-header p {
    font-size: 13px;
}


.modal_form {
    padding: 0 1em;
}

.modal-header h2 {
    margin-top: 0px;
    line-height: 1.4;
    font-size: 21px;
}

.nf-form-cont .first {
    width: 100% !important;
}

.nf-before-form-content, .nf-form-title {
    display: none;
}

.modal_form .nf-form-cont .first {
    margin-top: 1em;
}

.modal_form .field-wrap {
    display: inline-flex;
    flex-direction: unset !important;
    flex-flow: row !important;
    width:100%;
}

.modal_form .nf-form-content .label-above .nf-field-label {
    width: 143px;
}

.modal_form .nf-form-content label {
    font-size: 13px;
    line-height: 20px;
}

.nf-error-msg, .ninja-forms-req-symbol {
    font-size: 7px;
}
.nf-form-content input.ninja-forms-field {
    height: 41px;
}

.modal_form .nf-field-label .nf-label-span,.modal_form .nf-field-label label {
    font-size: 13px;
}

/* ---------------------------------------------------------------------------
 * Compact subscribe modal.
 *
 * The popup previously ran to roughly 620px tall - blue header, five fields,
 * reCAPTCHA and submit - which overflowed shorter viewports and dominated the
 * page it interrupted. These rules tighten the header, fields and spacing
 * without changing the markup or the form itself.
 * ------------------------------------------------------------------------ */
.modal-content {
    width: 430px;
    max-width: calc(100% - 32px);
    border-radius: 4px;
    overflow: hidden;
}

.modal-header {
    padding: 0.85em 1.2em 0.9em;
}

.modal-header h2 {
    font-size: 17px;
    line-height: 1.3;
    margin-bottom: 4px;
}

.modal-header p {
    font-size: 12px;
    line-height: 1.35;
    margin: 0;
}

.modal-header .close {
    font-size: 24px;
    top: 2px;
    right: 10px;
    line-height: 1;
}

.modal_form {
    padding: 0.6em 1.2em 0.2em;
}

.modal_form .nf-form-cont .first {
    margin-top: 0.4em;
}

/* Ninja Forms ships generous vertical rhythm; halve it inside the modal. */
.modal_form .nf-form-content {
    padding: 0;
}

.modal_form .field-wrap {
    align-items: center;
}

.modal_form .nf-field-container {
    margin-bottom: 8px;
}

/*
 * Label column. Ninja Forms nests a <label> (and often a .nf-label-span) inside
 * .nf-field-label, and those children carry their own width, so constraining
 * only the outer element left "Recaptcha v2" wrapping onto a second line and
 * adding height back to the form. Size the container and let the children fill
 * it without wrapping.
 */
.modal_form .nf-form-content .label-above .nf-field-label {
    width: 122px;
    margin-bottom: 0;
    padding-right: 6px;
    box-sizing: border-box;
}

.modal_form .nf-form-content .label-above .nf-field-label label,
.modal_form .nf-form-content .label-above .nf-field-label .nf-label-span {
    display: block;
    width: 100%;
    margin: 0;
    white-space: nowrap;
    overflow: visible;
}

.modal_form .nf-form-content input:not([type="button"]):not([type="submit"]),
.modal_form .nf-form-content select,
.modal_form .nf-form-content textarea {
    height: 34px;
    padding: 4px 8px;
    font-size: 13px;
    line-height: 1.2;
}

.modal_form .nf-form-content .nf-field-element .ninja-forms-field {
    margin-bottom: 0;
}

/* reCAPTCHA is a fixed-size iframe; scale it down rather than let it set the width. */
.modal_form .g-recaptcha,
.modal_form .nf-field-element > div[class*="recaptcha"] {
    transform: scale(0.82);
    transform-origin: left top;
    height: 62px;
}

.modal_form .nf-form-content input[type="button"],
.modal_form .nf-form-content input[type="submit"] {
    height: 36px;
    padding: 0 20px;
    font-size: 13px;
    margin-bottom: 6px;
}

.modal_form .nf-error-msg {
    font-size: 11px;
    line-height: 1.3;
}

@media screen and (max-width: 520px) {
    .modal {
        padding-top: 20px;
    }

    .modal_form .field-wrap {
        display: block;
    }

    .modal_form .nf-form-content .label-above .nf-field-label {
        width: 100%;
    }
}


.list-radio-wrap .nf-field-element ul li {
    width:50%;
    float:left;
}

/* The Close Button */
.modal-header .close {
    color: #fff;
    float: right;
    font-size: 28px;
    position: absolute;
    top: -5px;
    right: 5px;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}


#myBtn {
    width: 70%;
    margin: 2em auto;
    display: block;
    font-size: 17px;
    padding: 5px 10px;
}

#myBtn span {
    font-size: 11px;
    width: 100%;
    margin-top: 0px;
    display: block;
    font-weight: 100;
}

.tool-filter-form select {
    padding: 5px 7px;
    border-radius: 0px;
    border: 1px solid var(--lc-border-light);
    font-size: 13px;
    margin: 5px 10px;
    float: right;
}

.prod-logo {
    padding: 23px;
    background-color: #fff;
    opacity: 1;
    background-image: linear-gradient(#444cf729 1px, transparent 1px), linear-gradient(to right, #444cf729 1px, #fff 1px);
    background-size: 12px 12px;
    border: 1px solid #444cf729;
    position: relative;
    margin-right: 2em;
    width: 29%;
}

.prod-logo img {
    max-width: 100%;
    text-align: center;
    display: block;
    align-items: center;
    float: none;
    width: auto;
}

.ptitle {
    width: 100%;
    display: flex;
}

.prod-details {
    flex-basis: 100%;
    flex-grow: 1;
}
/**
 * 6.0 Content
 * -----------------------------------------------------------------------------
 */

.content-area {
    padding-top: 1em;
    background: #f7f7f7;
}

.hentry {
    margin: 0 auto 00px;
    padding: 10px;
}

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
    margin: 0 auto;
}

.page-content {
    margin-bottom: 48px;
}


/**
 * 6.1 Post Thumbnail
 * -----------------------------------------------------------------------------
 */

.post-thumbnail {
    background: #b2b2b2 url(/wp-content/themes/twentyfourteen/images/pattern-light.svg) repeat fixed;
    display: block;
    position: relative;
    width: 25%;
    z-index: 0;
    float: right;
}

a.post-thumbnail:hover {
    background-color: #999;
}

.full-width .post-thumbnail img {
    display: block;
    margin: 0 auto;
    height: 90px;
    width: 90px;
    float: none;
    aspect-ratio: 1/1;
}

.site-content .entry-header {
    float: left;
    width: 76%;
    padding: 0 0px 0px;
    padding-left: 0px !important;
}


/**
 * 6.2 Entry Header
 * -----------------------------------------------------------------------------
 */

.grid-container {
    display: grid;
    grid-template-areas:
        'main main main main livefeed'
        'title title title title livefeed'
        'sub sub sub sub livefeed'
        'ad ad ad ad livefeed';
    gap: 1em;
    width: 1470px;
    max-width: 100%;
    margin: auto;
}


.grid-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    gap: 17px;
    width: 1470px;
    margin: auto;
    padding-bottom: 3em;
}

/*
 * Sidebar order is set by grid-row, not by DOM order, so moving a block in
 * index.php alone does nothing on desktop - it only affects the <665px
 * layout, where .grid-content becomes display:block and these stack in
 * source order. Both have to agree, or the reading order differs between
 * mobile and desktop.
 *
 * Column 4 top-to-bottom: .eventsBar (1) / .adsWithUs (2) / .ad-full (3) /
 * .trend (4).
 */
.ad-full {
    grid-column: 4 / 5;
    grid-row: 3 / 4;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-gap: 18px;
}

.viewAll {
    grid-column: 1 / 4;
    grid-row: 2 / 3;
    height: 27px;
    position: relative;
    width: 100%;
}

.adsWithUs {
    grid-column: 4 / 5;
    grid-row: 2 / 3;
    width: 100%;
    position: relative;
}

.lctool_title {
    grid-area: title;
    height: 51px;
}

.lctool_title h3 {
    margin: 12px 12px 0px 0px;
    font-size: 19px;
    color: var(--lc-text-soft);
}


.lctool_title p {
    font-size: 13px;
}


.prBar {
    grid-column: 1 / 4;
    grid-row: 5 / 6;

    padding:10px 0px 30px;
    background: #fff;
    position: relative;
}

.DeSciBox {
    grid-column: 1 / 4;
    grid-row: 4 / 5;
    padding:10px 0px 30px;
    background: #fff;
    position: relative;
}

.trend {
    grid-column: 4 / 5;
    grid-row: 4 / 5;
    padding:10px 0px 30px;
    background-color: #fff;
    position: relative;
}


.ad-full img {
    width: 100%;

}

/*
 * Events + Comics stack, sharing column 4's first row.
 *
 * This is the grid item now; .eventsBar's own grid-column/grid-row below are
 * inert while it sits in here, and are left in place only so the block still
 * lands correctly if it is ever lifted back out.
 *
 * align-self: start is what keeps the pair at content height - without it the
 * stack would be stretched to row 1's full height (as tall as the article
 * feed) and the gap between the two boxes would open to ~2,900px.
 */
.sidebarTop {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.comicsBar {
    padding: 10px 0 48px;
    background-color: #fff;
    position: relative;
}

.comicItem {
    margin: 0 0 14px;
    padding: 0 10px;
}

.comicItem:last-of-type {
    margin-bottom: 0;
}

/* The joke is drawn into the image, so it carries the whole panel - give it
   the full width of the column and a border so it reads as artwork rather
   than as a stray screenshot. */
.comicItem img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--lc-border);
    background: #fff;
}

.comicItem__title {
    font-size: 13px;
    line-height: 1.45;
    color: var(--lc-text-muted);
    margin-top: 6px;
}

.comicItem a:hover img,
.comicItem a:focus img {
    border-color: var(--lc-blue);
}

@media (max-width: 665px) {
    .sidebarTop {
        float: left;
        width: 100%;
        margin: 10px 0;
        gap: 20px;
    }
}

.eventsBar {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
    /*
     * align-self keeps the box at its content height. Grid items stretch to
     * the row by default, and row 1 is set by the article feed next to it
     * (~3,500px), which left .eventsMore - absolutely positioned at bottom: 0
     * - stranded ~2,800px below the last event card. In row 3 the stretch was
     * only ~85px so it was never visible.
     *
     * The bottom padding is what .eventsMore sits in: it is out of flow, so it
     * adds nothing to the box height. 48px = its 38px plus breathing room.
     * Anything less and it overlaps the last card once the box stops
     * stretching.
     */
    align-self: start;
    padding: 10px 0px 48px;
    background-color: #fff;
    position: relative;
}

.toolsRow {
    grid-column: 1 / 4;
    grid-row: 3 / 4;
    padding:10px 0px 30px;
    background-color: #fff;
    position: relative;
}

.DeSciBox h3 {
    text-align: center;
    color: #0e9af8;
}

.DeSciBox .eventsMore {
    border-top:1px solid var(--lc-border);
}

.entry-header {
    position: relative;
    width: 74.5%;
    float: left;
}

h1.entry-title {
    font-size: 25px !important;
    font-weight: 600;
    line-height: 1.0909090909;
    margin-bottom: 2px;
    margin: 3px 0 8px 0;
}

.home_subsections h2.entry-title {
    margin: 0px;
    font-size: 19px;
}

.headline {
    border-bottom: 1px solid var(--lc-border);
}

.headline .entry-title {
    font-size: 53px;
    line-height: 1.5;
    font-weight: 700;
}

.entry-title a {
    color: var(--lc-text-soft);
}

.home .entry-title a {
    line-height: 1.4;
}

h2.subTitle {
    text-indent: 0px;
    font-size: 14px;
    text-transform: uppercase;
    float: left;
    padding-bottom: 8px;
    margin-top: 0px;
    width: 100%;
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid var(--lc-border);
    color: var(--lc-text-soft);
}

.title-more {
    padding: 0px 12px;
    float: left;
    width: 100%;
}

.full-btn {
    text-align: center;
    font-size: 11px;
    padding: 5px 12px;
    margin: 0px 0px;
    display: block;
    height: 15px;
    border: 1px solid var(--lc-border);
    float: right;
    font-weight: 600;
}

.full-btn .dashicons,.full-btn .dashicons-before:before {
    width: 8px;
    height: 13px;
    font-size: 15px;
}

.more-btn {
    text-align: center;
    background: var(--lc-blue);
    color: #fff;
    font-size: 10px;
    padding: 3px 15px 4px 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 10px auto 0px;
    border-radius: 1px;
    display: block;
    float: right;
}

.more-btn .dashicons {
    font-size: 14px;
    margin: 0px;
    padding: 0px;
    line-height: 1;
    height: 10px;
    width: 0px;
}

.home_subsections h2.subTitle,
.decentsheader {
    padding: 0px 0px 5px;
    margin-top: 0px;
    font-weight: 800;
    word-spacing: 2px;
    color: var(--lc-text-soft);
    float: left;
    box-sizing: border-box;
    position: relative;
    font-size: 16px;
    width: 100%;
    border-bottom: 1px solid var(--lc-border);
    text-align: center;
    margin-bottom: 5px;
}

.post-block {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    float: left;
    grid-gap: 18px;
}

.homepost {
    float: left;
    position: relative;
    background-color: #fff;
}

.homepost .homeImg {
    float: left;
    width: 100%;
    padding: 9px;
    box-sizing: border-box;
    height: 235px;
}

.homepost .post-thumb {
    width: 93%;
    overflow: hidden;
    float: right;
}

.homepost .post-thumb img {
    width: 100%;
}

.homepost .post-content h2.post-title {
    font-size: 18px;
    color: var(--lc-text-soft);
    text-align: left;
    margin: 0px 0px 5px;
    padding: 0px;
    line-height: 1.4;
    position: relative;
}

.homepost .post-content h2.post-title a {
    color: var(--lc-text-soft);
}

/* Byline under a home card title. Had no rule of its own, so it inherited body
   size and rendered the same weight as the excerpt below it - the author and
   date read as loudly as the story. Meta, not content. */
.homepost .post-content .post-meta {
    font-size: 13px;
    line-height: 1.5;
    color: var(--lc-text-muted);
    margin: 0 0 6px;
}

.homepost .post-content .post-meta .post-author {
    font-size: inherit;
    font-weight: 600;
}

.homepost .post-content .post-meta .post-date {
    font-size: inherit;
    color: var(--lc-text-muted);
}

@media (max-width: 600px) {
    .homepost .post-content .post-meta {
        font-size: 12px;
    }
}

.homeImg img {
    width: 100%;
    margin-bottom: 11px;
}

.homepost .article-blurb {
    padding: 0 2.8% 10px;
    float: left;
    width: 100%;
    text-overflow: clip;
    height: auto;
    box-sizing: border-box;
    margin-top: -8px;
}

.homepost .post-content {
    width: 100%;
    float: left;
    padding: 10px 10px 10px 7%;
    box-sizing: border-box;
}

.article-blurb h2 {
    font-size: 16px;
    line-height: 1.4;
    margin: 0px 0px 6px;
    word-wrap: unset;
    word-break: break-word;
    float: left;
    text-overflow: clip;
    width: 100%;
    font-weight: 800;
    letter-spacing: 1px;
}

.article-blurb h2 a,
.event-div h3 {
    color: var(--lc-text-soft);
    font-size: 14px;
    line-height: 1.4;
    margin: 0px 0px 6px;

    word-wrap: unset;
    word-break: break-word;
    float: left;
    text-overflow: clip;
    width: 100%;
    font-weight: 800;

}

.event-div h3 {
    margin-top: 7px;
}

/* The widget title is a link now. Inherit the heading colour so the list does
   not turn into a wall of blue; the hover state carries the affordance. */
.event-div h3 a {
    color: inherit;
}

.event-div h3 a:hover,
.event-div h3 a:focus {
    color: var(--lc-blue);
    text-decoration: underline;
}

.entry-title a:hover {
    color: var(--lc-blue-hover);
}

post-source {
    border: 1px solid var(--lc-border);
    font-size: 12px;
    border-radius: 10px;
    background: var(--lc-border);
    padding: 3px 10px;
    text-align: center;
    margin: 0px 10px;
}

.ad-row {
    float: left;
    text-align: center;
    background: #fff;
    grid-area: ad;
}

.sub-row {
    text-align: center;
    grid-area: sub;
    display: flex;
    gap: 17px;
}


.ad-row .inner {
    width: 100%;
    margin: auto;
    position: relative;
    height: 100%;
    float: left;
}

.ad-row .inner h3 {
    line-height: 1;
    font-size: 11px;
    margin: 17px;
}

.ad-row .inner h3 a {
    color: #333;
}

.ad-content {
    margin-bottom: 2em;
    width: 98%;
}


.entry-meta {
    clear: both;
    color: var(--lc-text-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3333333333;
    text-transform: uppercase;
}

.entry-meta a {
    color: var(--lc-text-muted);
}

.entry-meta a:hover {
    color: var(--lc-accent);
}

.sticky .entry-date {
    display: none;
}

.cat-links {
    font-weight: 900;
    text-transform: uppercase;
}

.cat-links a {
    color: var(--lc-text);
}

.cat-links a:hover {
    color: var(--lc-accent);
}

.byline {
    display: none;
}

.single .byline,
.group-blog .byline {
    display: inline;
}

.site-content .entry-meta {
    margin-bottom: 8px;
}

.site-content footer.entry-meta {
    margin: 24px auto 0;
    padding: 0 10px;
}


/* Tag links style */

.entry-meta .tag-links a {
    background-color: var(--lc-text-muted);
    border-radius: 0 2px 2px 0;
    color: #fff;
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2727272727;
    margin: 2px 4px 2px 10px;
    padding: 3px 7px;
    position: relative;
    text-transform: uppercase;
}

.entry-meta .tag-links a:hover {
    background-color: var(--lc-accent);
    color: #fff;
}

.entry-meta .tag-links a:before {
    border-top: 10px solid transparent;
    border-right: 8px solid var(--lc-text-muted);
    border-bottom: 10px solid transparent;
    content: "";
    height: 0;
    position: absolute;
    top: 0;
    left: -8px;
    width: 0;
}

.entry-meta .tag-links a:hover:before {
    border-right-color: var(--lc-accent);
}

.entry-meta .tag-links a:after {
    background-color: #fff;
    border-radius: 50%;
    content: "";
    height: 4px;
    position: absolute;
    top: 8px;
    left: -2px;
    width: 4px;
}


/**
 * 6.4 Entry Content
 * -----------------------------------------------------------------------------
 */

.entry-content,
.entry-summary,
.page-content {
    -webkit-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word;
}

.home .entry-content {
    font-size: 14px;
}

.site-content .entry-content,
.site-content .entry-summary,
.page-content {
    padding: 0px 10px 0;
}

.page .entry-content {
    padding-top: 0;
}

.entry-content h1:first-child,
.entry-content h2:first-child,
.entry-content h3:first-child,
.entry-content h4:first-child,
.entry-content h5:first-child,
.entry-content h6:first-child,
.entry-summary h1:first-child,
.entry-summary h2:first-child,
.entry-summary h3:first-child,
.entry-summary h4:first-child,
.entry-summary h5:first-child,
.entry-summary h6:first-child,
.page-content h1:first-child,
.page-content h2:first-child,
.page-content h3:first-child,
.page-content h4:first-child,
.page-content h5:first-child,
.page-content h6:first-child {
    margin-top: 0;
}

.entry-content a,
.entry-summary a,
.page-content a,
.comment-content a {
    text-decoration: underline;
}

.entry-content a:hover,
.entry-summary a:hover,
.page-content a:hover,
.comment-content a:hover {
    text-decoration: none;
}

.entry-content table,
.comment-content table {
    font-size: 14px;
    line-height: 1.2857142857;
    margin-bottom: 24px;
}

.entry-content th,
.comment-content th {
    font-weight: 700;
    padding: 8px;
    text-transform: uppercase;
}

.entry-content td,
.comment-content td {
    padding: 8px;
}

.entry-content .edit-link {
    clear: both;
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3333333333;
    text-transform: uppercase;
}

.entry-content .edit-link a {
    color: var(--lc-text-muted);
    text-decoration: none;
}

.entry-content .edit-link a:hover {
    color: var(--lc-accent);
}


/* Mediaelements */

.hentry .mejs-mediaelement,
.hentry .mejs-container .mejs-controls {
    background: #000;
}

.hentry .mejs-controls .mejs-time-rail .mejs-time-loaded,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    background: #fff;
}

.hentry .mejs-controls .mejs-time-rail .mejs-time-current {
    background: var(--lc-accent-dark);
}

.hentry .mejs-controls .mejs-time-rail .mejs-time-total,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
    background: rgba(255, 255, 255, .33);
}

.hentry .mejs-container .mejs-controls .mejs-time {
    padding-top: 9px;
}

.hentry .mejs-controls .mejs-time-rail span,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    border-radius: 0;
}

.hentry .mejs-overlay-loading {
    background: transparent;
}


/* Page links */

.page-links {
    clear: both;
    font-size: 12px;
    font-weight: 900;
    line-height: 2;
    margin: 24px 0;
    text-transform: uppercase;
}

.page-links a,
.page-links>span {
    background: #fff;
    border: 1px solid #fff;
    display: inline-block;
    height: 22px;
    margin: 0 1px 2px 0;
    text-align: center;
    width: 22px;
}

.page-links a {
    background: #000;
    border: 1px solid #000;
    color: #fff;
    text-decoration: none;
}

.page-links a:hover {
    background: var(--lc-accent);
    border: 1px solid var(--lc-accent);
    color: #fff;
}

.page-links>.page-links-title {
    height: auto;
    margin: 0;
    padding-right: 7px;
    width: auto;
}

.Hsidebar {

    float: left;
    position: relative;
    padding: 3%;
    min-height: auto;
    box-sizing: border-box;
    margin-bottom: 13px;
    border-bottom: 1px solid var(--lc-border);
}


.adBar {
    height: auto;
}


.post-flex {
    width: 99.4%;
    display: flex;
    margin: 0px 0.3%;
}

.adsbygoogle {
    margin-bottom: 10px;
}

.right-col {
    float: left;
    width: 27%;
    margin: 0% 0% 1% 1%;
    padding: 0%;
    box-sizing: border-box;
    background: none;
}

.Hsidebar h3 {
    font-weight: 800;
    letter-spacing: 3px;
    word-spacing: 2px;
    color: var(--lc-text-soft);
    float: left;
    box-sizing: border-box;
    display: block;
    clear: both;
    font-size: 13px;
    text-transform: uppercase;
    margin: 1px 0px 9px;
    width: 100%;
}

.right-col p {
    float: left;
    width: 100%;
    font-size: 13px;
}

.ad-three {
    float: left;
    width: 100%;
}

.three-side {
    float: left;
    width: 33%;
}

.prSingle,
.prodSingle {
    width: 100%;
    float: left;
    display: inline-flex;
    margin-bottom: 3px;
    gap: 10px;
    border-bottom: 1px solid var(--lc-border);
    margin-top: -1px;
    position: relative;
    padding-left: 29px;
    box-sizing: border-box;
}

.prodSingle .prodImg {
    width: 90px;
    height: 80px;
    background: var(--lc-border);
    position: relative;
    margin-top: 5px;
    margin-bottom: 5px;
    overflow: hidden;
}

.prodSingle .nonImg {
    width: 100%;
}

.nonImg p {
    font-size: 14px;
    font-weight: 300;
    width: 100%;
    float: left;

}

.prodImg img {
    position: absolute;
    top:0;
    bottom:0;
    margin:auto;
    display: block;
}

.prSingle h4,
.prodSingle h4 {
    margin: 12px 0px 7px;
    line-height: 1.2;
    color: #eaeaea;
    font-size: 16px;
    font-weight: 600;
}

.prSingle .nonImg h4 a,
.prodSingle .nonImg h4 a {
    color: #5e5656;
}

.eveSingle {
    width: 100%;
    display: block;
    min-height: 50px;
    margin-bottom: 11px;
    float: left;
}

.eveSingle .imgevent {
    width: 30%;
    float: left;
}

.voteBorders {
    width: 155px;
    text-align: center;
    height: 81px;
    padding: 4px;
    box-sizing: border-box;
    margin: 12px 6px 12px 0px;
}

.voteBorders .arrow {
    font-size: 24px;
}

.voteBorders .count {
    font-size: 13px;
    font-weight: 700;
}

.labcritics-vote-button {
    color:#333;
}

.event-div {
    float: left;
    width: 100%;
    margin-right: 21px;
    /* min-height, not height: the row now carries a location line under the
       date, and a two-line title plus both meta lines overflows a fixed 101px. */
    min-height: 101px;
    position: relative;
    display: flex;
    border-bottom: 1px solid var(--lc-border);
    padding: 10px;
    box-sizing: border-box;
}

.event-div .img-event {
    width: 25%;
    background: var(--lc-border);
    height: 73px;
    text-align: center;
    position: relative;
    vertical-align: middle;
    padding: 4px;
    overflow: hidden;
}


.event-div .title {
    width: 75%;
    padding-left: 6px;
}

/* Venue line under the date in the events sidebar. Matches p.date's size and
   colour so the two read as one meta block rather than competing. */
.event-div .event-loc {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.3;
    color: #545454b3;
}

.event-div .event-loc .lc-pin {
    flex: 0 0 auto;
    opacity: 0.75;
}

/* Long venue strings truncate rather than pushing the ATTEND button down. */
.event-div .event-loc span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.img-event img {
    margin: auto;
    top: 0;
    bottom: 0;
    display: block;
    position: absolute;
    width: 93%;
    height: auto;
}
.eveSingle .nonImg {
    width: 62%;
    float: left;
    padding: 0% 4%;
}

.eveSingle .nonImg h4 {
    margin: 0px;
    line-height: 0.8;
}

.eveSingle .nonImg h4 a {
    color: #333;
    font-size: 14px;
}

.eveSingle .nonImg h4 a:hover,
,
.prSingle h4 a:hover {
    color: var(--lc-blue-hover);
}

.eveSingle .nonImg .greyd,
.prSingle .nonImg .greyd {
    color: #707070;
    font-weight: 800;
    font-size: 9px;
    text-transform: uppercase;
}


/**
 * 6.5 Gallery
 * -----------------------------------------------------------------------------
 */

.gallery {
    margin-bottom: 20px;
}

.gallery-item {
    float: left;
    margin: 0 4px 4px 0;
    overflow: hidden;
    position: relative;
}

.gallery-columns-1 .gallery-item {
    max-width: 100%;
}

.gallery-columns-2 .gallery-item {
    max-width: 48%;
}

.gallery-columns-3 .gallery-item {
    max-width: 32%;
}

.gallery-columns-4 .gallery-item {
    max-width: 23%;
}

.gallery-columns-5 .gallery-item {
    max-width: 19%;
}

.gallery-columns-6 .gallery-item {
    max-width: 15%;
}

.gallery-columns-7 .gallery-item {
    max-width: 13%;
}

.gallery-columns-8 .gallery-item {
    max-width: 11%;
}

.gallery-columns-9 .gallery-item {
    max-width: 9%;
}

.gallery-columns-1 .gallery-item:nth-of-type(1n),
.gallery-columns-2 .gallery-item:nth-of-type(2n),
.gallery-columns-3 .gallery-item:nth-of-type(3n),
.gallery-columns-4 .gallery-item:nth-of-type(4n),
.gallery-columns-5 .gallery-item:nth-of-type(5n),
.gallery-columns-6 .gallery-item:nth-of-type(6n),
.gallery-columns-7 .gallery-item:nth-of-type(7n),
.gallery-columns-8 .gallery-item:nth-of-type(8n),
.gallery-columns-9 .gallery-item:nth-of-type(9n) {
    margin-right: 0;
}

.gallery-caption {
    background-color: rgba(0, 0, 0, 0.7);
    box-sizing: border-box;
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
    max-height: 50%;
    opacity: 0;
    padding: 6px 8px;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: left;
    width: 100%;
}

.gallery-caption:before {
    content: "";
    height: 100%;
    min-height: 49px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.gallery-item:hover .gallery-caption {
    opacity: 1;
}

.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
    display: none;
}


/**
 * 6.6 Post Formats
 * -----------------------------------------------------------------------------
 */

.format-aside .entry-content,
.format-aside .entry-summary,
.format-quote .entry-content,
.format-quote .entry-summary,
.format-link .entry-content,
.format-link .entry-summary {
    padding-top: 0;
}

.site-content .format-link .entry-title,
.site-content .format-aside .entry-title,
.site-content .format-quote .entry-title {
    display: none;
}


/**
 * 6.7 Post/Image/Paging Navigation
 * -----------------------------------------------------------------------------
 */

.nav-links {
    -webkit-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word;
    widows: 100%;
}

/*
 * The column stacks normally. It used to be `position: sticky; top: 54vh`,
 * which only behaves when the column holds a single card - with cards above
 * and below, the offset drags the whole stack down over whatever follows it.
 * The tools pages had already been given a `position: static` override for
 * exactly that reason; adding the references card put every article in the
 * same position, so the base rule changed instead and that override is gone.
 */
.articleBar {
    width: 28%;
    float: left;
    position: static;
    height: auto;
    color: #666;
    font-size: 13px;
    box-sizing: border-box;
    padding: 1em;
    text-align: left;
    font-weight: 300;
    margin: 2em 0 1em 1%;
    background-color: #fff;
}

/* --- Article references card (inc/references.php) ------------------------ */
/*
 * Sits under the Labs Reach promo in .articleBar. That column floats its
 * children, so this clears them and takes the full width rather than trying to
 * sit alongside.
 */
.refCard {
    clear: both;
    float: left;
    box-sizing: border-box;
    width: 100%;
    margin: 18px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--lc-border);
}

.refCard__title {
    margin: 0 0 10px;
    color: var(--lc-blue-ink);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.refCard__list {
    margin: 0;
    padding-left: 1.2em;
    font-size: 12.5px;
    line-height: 1.5;
}

.refCard__item {
    margin: 0 0 9px;
    /* Long DOIs and bare URLs must not push the sidebar wider. */
    overflow-wrap: anywhere;
}

.refCard__item:last-child {
    margin-bottom: 0;
}

.refCard__link {
    color: var(--lc-text-soft);
    text-decoration: none;
    border-bottom: 1px solid rgba(15, 36, 52, 0.22);
}

.refCard__link:hover,
.refCard__link:focus {
    color: var(--lc-blue);
    border-bottom-color: var(--lc-blue);
}

.articleBar h3 {
    font-size: 16px;
    color: var(--lc-blue);
    margin-top: 0px;
}

.articleBar b, .homeBar b {
    color: var(--lc-blue);
}

.post-navigation {
    width: 100%;
    float: left;
    display: block;
    max-width: 100% !important;
}

.post-navigation,
.image-navigation {
    margin: 24px auto 48px;
    max-width: 474px;
    padding: 0 10px;
}

.image-navigation .previous-image,
.image-navigation .next-image {
    padding: 11px 5px 12px;
    width: 100%;
}

.post-navigation .meta-nav {
    color: #333;
    display: block;
    font-weight: 300;
    line-height: 1.4;
    text-transform: uppercase;
    font-size: 11px;
}

/* ---------------------------------------------------------------------------
Previous / next post cards (.nav-links__item, twentyfourteen_post_nav)

Built to read as the same object as the home page article cards: white panel,
corner brackets, thumbnail across the top, then an eyebrow and the title. This
was two bare text links floated at 49% with no image.

The brackets come from .with-brdr, which draws the top pair on the element and
the bottom pair on a descendant span. That is a descendant selector, not a
child one, so the card's innards are divs - any span inside would grow its own
set of corners. The empty .corner span is deliberately the only one.
--------------------------------------------------------------------------- */
.post-navigation .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: stretch;
    margin: 8px 0 28px;
}

.post-navigation .nav-links__item {
    display: flex;
    flex-direction: column;
    /* 0 basis so a long headline cannot widen one card against the other. */
    flex: 1 1 0;
    min-width: 0;
    float: none;
    width: auto;
    padding: 0 0 16px;
    background: #fff;
    text-align: left;
    text-decoration: none;
}

/*
 * The first and last posts have only one neighbour. Left to flex: 1 1 0 that
 * lone card filled the row - 1324px wide and, at 2:1, 737px tall, a banner
 * rather than a card. Held to half the row so it matches the paired case.
 */
.post-navigation .nav-links__item:only-child {
    flex: 0 1 calc(50% - 12px);
}

.post-navigation .nav-links__thumb {
    display: block;
    margin-bottom: 13px;
    background: var(--lc-border);
}

.post-navigation .nav-links__thumb img {
    display: block;
    width: 100%;
    height: auto;
    /* The medium size is 300x150, the ratio these files already have. Pinning
       it keeps a pair level when one of them is an odd shape. */
    aspect-ratio: 2 / 1;
    object-fit: cover;
}

/* Posts with no featured image still hold the box, so the pair lines up. */
.post-navigation .nav-links__thumb--empty {
    aspect-ratio: 2 / 1;
}

.post-navigation .nav-links__body {
    padding: 0 14px;
}

.post-navigation .nav-links__meta {
    margin-bottom: 5px;
    color: var(--lc-blue);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Matches .homepost .post-content h2.post-title. */
.post-navigation .nav-links__title {
    color: var(--lc-text-soft);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}

.post-navigation .nav-links__item:hover .nav-links__title,
.post-navigation .nav-links__item:focus .nav-links__title {
    color: var(--lc-blue);
}

@media screen and (max-width: 665px) {
    .post-navigation .nav-links {
        gap: 18px;
    }

    /* One per row rather than two cramped ones. The :only-child cap above is
       repeated here, or its higher specificity would hold a lone card at 50%
       of a phone screen. */
    .post-navigation .nav-links__item,
    .post-navigation .nav-links__item:only-child {
        flex: 1 1 100%;
    }
}

/*
 * Only the image navigation still floats two text links side by side. The
 * post navigation is a pair of cards now (see .nav-links__item below), so
 * these were narrowed to .image-navigation rather than overridden there.
 */
.image-navigation a {
    color: var(--lc-text);
    display: block;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    text-transform: none;
    width: 49%;
    position: relative;
    float: left;
}

.post-navigation a:hover,
.image-navigation a:hover {
    color: var(--lc-blue);
}

.image-navigation .nav-links a:last-child {
    text-align: right;
}

.homeBar .wpforms-form input, .articleBar .wpforms-form input {
    max-width: 100% !important;
    padding: 6px 10px !important;
    height: 28px !important;
    font-size: 14px !important;
}

.wpforms-form {
    display: flex;
    padding: 11px 0px;

}
.toolSide .wpforms-field-container {
    width: 80% !important;
}

div.wpforms-container-full .wpforms-form input.wpforms-field-medium {
    max-width: 100% !important;
}


div.wpforms-container-full {
    margin: 0px auto !important;
}

div.wpforms-container-full .wpforms-form button[type=submit] {
    border: none !important;
    color: #fff !important;
    padding: 11px 10px !important;
    background: var(--lc-blue) !important;
    font-size: 12px !important;
    margin: 0px 2px 7px !important;
}

/* Paging Navigation */

.paging-navigation {
    border-top: 5px solid #f3f3f3;
    height: 35px;
    width: 100%;
    bottom: 0px;
    position: relative;
    float: left;
    margin-left: -2px;
}

.paging-navigation .loop-pagination {
    margin-top: -5px;
    text-align: center;
}

.paging-navigation .page-numbers {
    border-top: 5px solid transparent;
    display: inline-block;
    font-size: 14px;
    font-weight: 900;
    margin-right: 1px;
    padding: 7px 16px;
    text-transform: uppercase;
}

.paging-navigation a {
    color: var(--lc-text);
}

.paging-navigation .page-numbers.current {
    border-top: 5px solid var(--lc-blue);
}

.paging-navigation a:hover {
    border-top: 5px solid #0c91d1;
    color: var(--lc-text);
}

.dashicons,
.dashicons-before:before {
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 17px;
    line-height: 1;
    font-family: dashicons;
    text-decoration: inherit;
    font-weight: 400;
    font-style: normal;
    vertical-align: top;
    text-align: center;
    transition: color .1s ease-in 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/**
 * 6.8 Attachments
 * -----------------------------------------------------------------------------
 */

.attachment .content-sidebar,
.attachment .post-thumbnail {
    display: none;
}

.attachment .entry-content {
    padding-top: 0;
}

.attachment footer.entry-meta {
    text-transform: none;
}

.entry-attachment .attachment {
    margin-bottom: 24px;
}

.fullcontent {
    margin-top: 1em;
    width: 100%;
    font-weight: 300;
}

.fullcontent p {
    margin-bottom:1em;
}

/*
 * Article body is Poppins, the same face as the rest of the site. It was set in
 * Newsreader, an editorial serif, on the argument that a geometric sans is
 * tiring over 2,000 words; that was dropped in favour of one typeface across
 * the site.
 *
 * 16px, not the serif's 17px. Poppins carries a larger x-height than Newsreader
 * at the same nominal size, so 17px of it set noticeably bigger than the serif
 * it replaced and crowded the 23px h2 beneath it. 16px is also what
 * .lc-event__description runs at, which is the closest thing the site has to
 * another body-copy measure.
 *
 * Set on .fullcontent rather than fighting the `!important` on the global body
 * rule: a declaration on the element itself outranks anything inherited from an
 * ancestor, however that ancestor's rule is weighted.
 */
.single .fullcontent {
    font-family: 'Poppins',"Poppins Fallback", sans-serif;
    font-size: 16px;
    width: 70%;
    line-height: 1.75;
    padding-left: 0%;
    float: left;
    padding-right: 1%;
    font-weight: 400;
}

/*
 * Headings stay geometric. The contrast between a sans headline and a serif
 * body is what makes the pairing work, and it keeps the masthead's voice - so
 * these opt out of the family they would otherwise inherit from .fullcontent.
 */
.fullcontent h2,
.fullcontent h3,
.fullcontent h4 {
    font-family: 'Poppins',"Poppins Fallback", sans-serif;
}

.fullcontent h2 {
    font-weight: 600;
    font-size: 23px;
}

/*
 * h3 carries two unrelated jobs in this archive, and one rule cannot serve both.
 * Of 208 published articles containing an h3, 165 open with one before any
 * paragraph - a standfirst summarising the piece in a sentence or two - while 43
 * use it mid-article as a genuine subhead ("What it is"). Position tells them
 * apart, so the opening one is styled as a dek and the rest as subheads.
 */

/*
 * The standfirst. It is a sentence, not a title: set in the body serif at
 * reading weight, only enough larger than body copy to read as an introduction.
 * The global `h3 { line-height: 1.09 }` is what made these look squished - fine
 * for a three-word title, unreadable once a summary wraps to three lines.
 */
.fullcontent > h3:first-child {
    font-family: 'Poppins',"Poppins Fallback", sans-serif;
    font-size: 21px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--lc-text-soft);
    margin: 0 0 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--lc-border);
}

/*
 * Mid-article subheads. Previously 18px/500, which against 17px body copy was
 * no step at all - the reader got no signal that a new section had begun.
 */
.fullcontent h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    margin: 34px 0 10px;
}

/*
 * Emphasis in the reading column sits at 600 rather than the global 700.
 *
 * This was 500, chosen while the column was set in a serif - a serif at 700
 * blots against 400 body copy, and 500 marked the phrase without stopping the
 * reader. Poppins does not behave that way: at 500 against 400 the contrast is
 * too slight to register as emphasis at all. 600 reads as bold without the
 * weight of the global 700, and matches .fullcontent h3.
 *
 * Scoped to .fullcontent deliberately: the global `b, strong { 700 }` still
 * governs cards, tables, nav and promos, where heavy emphasis is doing UI work
 * rather than reading work.
 */
.fullcontent strong,
.fullcontent b {
    font-weight: 600;
}

/* Emphasis inside a heading keeps the heading's own weight - 500 inside a 600
 * subhead would read as a hole rather than as emphasis. */
.fullcontent h2 strong, .fullcontent h2 b,
.fullcontent h3 strong, .fullcontent h3 b,
.fullcontent h4 strong, .fullcontent h4 b {
    font-weight: inherit;
}


/**
 * 6.9 Archives
 * -----------------------------------------------------------------------------
 */

.archive-header,
.page-header {
    margin: 24px auto;
    max-width: 474px;
}

.archive-title,
.page-title {
    font-size: 16px;
    font-weight: 900;
    line-height: 1.5;
    margin: 0;
}

.taxonomy-description,
.author-description {
    color: var(--lc-text-muted);
    font-size: 14px;
    line-height: 1.2857142857;
    padding-top: 18px;
}

.taxonomy-description p,
.author-description p {
    margin-bottom: 18px;
}

.taxonomy-description p:last-child,
.author-description p:last-child {
    margin-bottom: 0;
}

.taxonomy-description a,
.author-description a {
    text-decoration: underline;
}

.taxonomy-description a:hover,
.author-description a:hover {
    text-decoration: none;
}


/**
 * 6.10 Contributor Page
 * -----------------------------------------------------------------------------
 */

.contributor {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    padding: 48px 10px;
}

.contributor:first-of-type {
    padding-top: 24px;
}

.contributor-info {
    margin: 0 auto;
    max-width: 474px;
}

.contributor-avatar {
    border: 1px solid rgba(0, 0, 0, 0.1);
    float: left;
    margin: 0 30px 20px 0;
    padding: 2px;
}

.contributor-name {
    font-size: 16px;
    font-weight: 900;
    line-height: 1.5;
    margin: 0;
}

.contributor-bio a {
    text-decoration: underline;
}

.contributor-bio a:hover {
    text-decoration: none;
}

.contributor-posts-link {
    display: inline-block;
    line-height: normal;
    padding: 10px 30px;
}

.contributor-posts-link:before {
    content: "\f443";
}


/**
 * 6.11 404 Page
 * -----------------------------------------------------------------------------
 */

.error404 .page-content {
    padding-top: 0;
}

.error404 .page-content .search-form {
    margin-bottom: 24px;
}


/**
 * 6.12 Full-width
 * -----------------------------------------------------------------------------
 */

.full-width .hentry {
    width: 100%;
    padding-left: 28px;
}

.homepost:hover {
    background: #ebebeb;
}

.homepost:hover span:before {
    border-bottom: 2px solid var(--lc-blue);
    border-left: 2px solid var(--lc-blue);
}

.homepost:hover span:after {
    border-bottom: 2px solid var(--lc-blue);
    border-right: 2px solid var(--lc-blue);
}

.homepost:hover:after {
    border-top: 2px solid var(--lc-blue);
    border-right: 2px solid var(--lc-blue);
}

.homepost:hover:before {
    border-top: 2px solid var(--lc-blue);
    border-left: 2px solid var(--lc-blue);
}

.site-content {
    min-height: 700px;
}


/**
 * 6.13 About Us
 * -----------------------------------------------------------------------------
 */

.aboutus-new {
    background: #fff;
    border: 1px solid #ececec;
    margin: 10px 9px 10px 5px;
    font-size: 80%;
    border-radius: 3px;
    float: left;
}

.aboutus-head h1 {
    font-size: 30px;
    line-height: 1.2;
    color: #414141;
    font-weight: 300;
    margin-bottom: 0px;
}

.aboutus-head h2 {
    font-weight: 300;
    margin-top: 21px;
    margin-bottom: 7px;
    font-size: 30px;
}

.aboutus-hero {
    width: 100%;
    height: 300px;
    background-image: url("https://labcritics.com/wp-content/uploads/2013/09/5411119831_e8305153a3_z.jpg");
    color: #fff;
    background-size: cover;
}

.marketplace-hero {
    width: 100%;
    height: 367px;
    background-image: url("https://labcritics.com/wp-content/uploads/2014/05/Labcritics-marketplace-design-copy.jpg");
    color: #fff;
    background-size: cover;
}

.aboutus-new .aboutus-head {
    margin-left: 2%;
    width: 96%;
    border-bottom: 1px solid var(--lc-border-light);
    margin-right: 2%;
}

.aboutus-hero .hero-right {
    height: 280px;
    background: rgba(12, 152, 248, 0.69);
    float: right;
    width: 204px;
    font-weight: 700;
    font-size: 20px;
    line-height: 42px;
    text-align: right;
    padding: 10px;
}

.aboutus-text {
    width: 100%;
    height: auto;
    padding: 24px;
    font-size: 17px;
    line-height: 1.5;
    box-sizing: border-box;
}


.aboutus-text h2 {
    margin-top: 17px;
    font-size: 24px;
    color: #414141;
    line-height: 1.6;
    font-weight: 600;
}

.aboutus-text H3 {
    margin-top: 5px;
    font-weight: 300;
    margin-bottom: 7px;
}

.aboutus-head {
    border-bottom: 1px solid var(--lc-border);
}

.right-box {
    width: 50%;
    padding: 4%;
    background: #eee;
    margin: 1em 0em 0em 1em;
}

.contactInner {
    background: #fff;
    padding: 1em 15px;
}

.contactInner .aboutus-text {
    display: inline-flex;
}

.overshade {
    width: 100%;
    background: var(--lc-blue);
    height: 55px;
    margin-top: -104px;
    color: #fff;
    padding-top: 60px;
}

h2.revW {
    width: 135px;
    border-right: 1px solid #0056ff;
    border-bottom: 1px solid #0056ff;
    margin-bottom: 16px;
    padding: 4px;
    color: #0056ff;
    box-shadow: 3px 3px 3px #cfcfcf;
    text-align: center;
}

.faqQ h3 {
    font-size: 23px;
    font-weight: 300;
    margin-bottom: 3px;
}

.pointsMp {
    width: 31%;
    padding: 10px 1% 0px;
    text-align: center;
    margin-top: 21px;
    float: left;
    height: 222px;
}

.boxAR img {
    width: 100px;
}

.pointsMp h2 {
    font-size: 15px;
    line-height: 38px;
    text-align: center;
    color: #747474;
    text-transform: uppercase;
}

.pointsMp p {
    font-size: 11px;
}

.boxPC img {
    width: 156px;
    margin-top: 13px;
    margin-bottom: 10px;
}

.boxLC img {
    width: 100px;
    margin-top: 12px;
    margin-bottom: 7px;
}

.boxDR img {
    width: 105px;
}

.boxGD img {
    width: 105px;
}

.boxUR img {
    width: 80px;
    margin-top: 12px;
    margin-bottom: 13px;
    margin-right: -15px;
}

.emptyBox {
    width: 215px;
}

.emptyBox h3 {
    margin-top: 10px;
    margin-left: 12px;
    margin-bottom: 13px;
}

table.pricing-table {
    background: #fff;
    text-align: center;
}

#sectionA {
    width: 65.8%;
    float: left;
    margin-left: 0.1%;
    padding: 1%;
    background: #fff;
    margin-top: 6px;
    border-radius: 3px;
    position: relative;
    display: block;
    height: auto;
    min-height: 700px;
    border: 1px solid #f3f3f3;
    font-size: 13px;
    margin-bottom: 9px;
}

.overview h3 {
    font-weight: 300;
    margin-bottom: 5px;
}

#sectionB {
    float: left;
    width: 29%;
    margin-top: 18px;
    padding: 1%;
    background: #fff;
    border-top-right-radius: 3px;
    margin-right: -2px;
    border-bottom-right-radius: 3px;
    box-shadow: 1px 0px 3px 1px #ebebeb;
}

.prod-price {
    float: right;
    width: 100px;
    height: 18px;
}

td.prod-rating {
    width: 113px;
    padding: 1px 3px 4px;
}

td.prod-rating>img {
    width: 17%;
}

.manufacturerTop .size-full {
    margin: 0px !important;
}

#sectionC {
    width: 60%;
    float: left;
    padding: 0.5%;
}

#sectionD {
    width: 38%;
    float: left;
    padding: 0.5%;
}




.compare-div {
    float: left;
}

.compare-div table {
    border: none;
}

.compare-div table td.comSpan {
    vertical-align: middle;
    padding: 0px 11px;
    background: var(--lc-blue);
    font-size: 13px;
    color: #fff;
}

.compare-div table td.linkSpan {
    padding: 4px 11px;
    vertical-align: middle;
    line-height: 18px;
    font-size: 13px;
    background: #fcfcfc;
}

.apps-content .entry {
    font-size: 13px;
}

.morePosts {
    float: left;
    width: 100%;
}

.morePosts .post-navigation {
    padding: 0px !important;
    margin: 0px;
}

.morePosts nav {
    margin-bottom: 0px;
}

.manInfo table {
    background: #f7f7f7;
}

.manInfo table th {
    text-align: center;
    padding: 4px;
}

.manInfo table td {
    text-align: center;
}

#masonry-wrapper {
    margin-bottom: 10px;
    padding: 0px 0px;
    width: 73%;
    float: left;
    margin-right: 0.4%;
    margin-left: 0%;
}

.eventsMore {
    width: 100%;
    float: right;
    text-align: right;
    margin-top: 6px;
    padding: 8px 5px 2px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 38px;
    box-sizing: border-box;
}

.eventsMore a {
    text-transform: uppercase;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--lc-border);
    margin-left: 9px;
}

.err-page-content {
    background: #fff;
    width: 273px;
    font-size: 13px;
    padding: 7px;
    margin: 0px auto;
}

.studiesQuotes {
    float: left;
    width: 56%;
    margin: 0px 20% 30px;
    text-align: center;
    font-size: 18px;
    font-weight: 300;
    display: block;
    height: 61px;
    border-radius: 9px;
    padding: 2%;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}

table.pricing-table,
table.competitionLC {
    background: #fcfcfc;
    font-size: 14px;
    text-align: center;
}

table.competitionLC th.vs1 {
    text-align: center;
    width: 218px;
    padding: 10px;
    font-size: 20px;
    font-weight: 300;
}

table.competitionLC th.compaTable {
    text-align: center;
    font-size: 20px;
    font-weight: 300;
    padding: 10px;
    width: 180px;
    background: var(--lc-blue);
    color: #fff;
}

table.competitionLC th.blackBg {
    background: #949494;
}

table.pricing-table td,
table.competitionLC td {
    padding: 10px;
    text-align: center;
    align-content: center;
    vertical-align: middle;
}

table.pricing-table td.cat1,
table.pricing-table td.cat2,
table.pricing-table td.cat3,
table.pricing-table td.cat4 {
    color: #fff;
    background: var(--lc-blue);
    text-align: center;
    width: 180px;
}

table.pricing-table td b {
    font-size: 20px;
    font-weight: 300;
}

.testLeft {
    width: 44%;
    float: left;
    padding: 15px 2.5%;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    height: auto;
    margin-bottom: 17px;
    border-radius: 10px;
    margin-top: 10px;
}

.testRight {
    float: right;
    margin-top: 100px;
}

.testLeft p {
    font-size: 15px;
    font-style: italic;
}

.testLeft span {
    text-align: right;
    float: right;
    height: 20px;
    color: #363636;
    font-weight: bold;
}

.testimonials,
.listButton {
    width: 100%;
    float: left;
    display: block;
}

.listButton Button {
    margin: 17px auto 30px;
    display: block;
}

.aboutus-text .formbox {

    display: block;
}

div.wpforms-container-full .wpforms-form .wpforms-field {
    padding: 5px 0 !important;
}

div.wpforms-container-full .wpforms-form .wpforms-field-label {
    color: #797777;
    font-weight: 300;
}

.aboutus-text .wpforms-form {
    display: block;
}

.aboutus-text div.wpforms-container-full .wpforms-form select.wpforms-field-medium {
    max-width: 100%;
}

.addbox {
    width: 50%;
    margin: auto;
    border-top: 1px solid var(--lc-border);
}


/**
 * 6.14 Singular
 * -----------------------------------------------------------------------------
 */

.apps-content {
    background: #fff;
    border: 1px solid #ececec;
    margin: 10px 10px;
    padding: 0px 14px;
    border-radius: 3px;
}

.apps-content h1 {
    font-size: 30px;
    line-height: 30px;
    color: #414141;
    font-weight: 300;
    margin-top: 14px;
}

.site-main {
    background: #f7f7f7;
    height: auto;
    float: left;
    width: 100%;
}

.searchBoxProd {
    background: #fcfcfc;
    padding: 11px;
    font-size: 12px;
    margin-bottom: 16px;
    border: 1px solid var(--lc-blue);
}

.searchbox input#s {
    padding: 4px 7px 5px;
    width: 82%;
    background: #f8f8f8;
    margin-top: 2px;
    float: left;
}

.prodsrch {
    width: 19%;
    padding: 6px 6px 6px !important;
    margin-left: -3px;
}

.prodsrch:before {
    color: #fff;
    content: "\f400";
    font-size: 20px;
    margin-top: 14px;
}

.btnProduct {
    width: 270px;
    margin-bottom: 14px;
    margin-top: 20px;
    display: flex;
    gap: 14px;
}

.cont-supp {
    background: var(--lc-blue);
    color: #fff;
    width: 100px;
    padding: 1% 4%;
    float: left;
    font-size: 12px;
    box-sizing: border-box;
    margin: 13px 0px;
    text-align: center;
}

a.votes {
    background: #bdbdbd;
    color: #fff;
    width: 64%;
    padding: 3% 8%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: center;
    font-weight: 600;
    font-size: 12px;
    box-sizing: border-box;
}

.cont-supp:hover, a.votes:hover {
    background: #f2f2f2;
    font-weight: bold;
    color:var(--lc-blue);

}

.drCric {
    width: 100%;
    height: 525px;
    float: left;
    background-image: url(/wp-content/themes/twentyfourteen/images/DrCric_labcritics.png);
    background-repeat: no-repeat;
    background-color: #fcfcfc;
    background-size: 141px 335px;
    background-position: 50% 21%;
    position: relative;
}

.drCric span {
    width: 100%;
    text-align: center;
    background: var(--lc-blue);
    color: #fff;
    float: left;
    line-height: 30px;
    font-weight: 300;
}

.drCric p {
    position: absolute;
    bottom: 4px;
    margin-bottom: 0px;
    font-size: 12px;
    padding: 5px 3%;
    text-align: justify;
    border-top: 1px solid #7a7a7a;
    width: 88%;
    margin: 0px 3%;
}

.articleDiv {
    max-width: 1324px;
    margin:2em auto;
    padding: 1%;
    float: none;
    display: block;
    width: 100%;
    background-color: #fff;
}

.prod-thumbnail.full-image {
    margin: 1em 0;
}

.product-header {
    display: flex;
    gap: 15px;
    margin-bottom: 2em;
}

.pbadge {
    width: 295px;
    margin: 4px;
    text-align: center;
}


.pbadge img {
    width: 82px;
    float:right;
    padding:15px 0px;
    margin-bottom: 2em;
}

.articleDiv h1 {
    font-size: 53px;
    line-height: 1.5;
    font-weight: 700;
    margin: 0px;
}

.articleDiv .fullcontent .aligncenter.size-full {
    width: 100%;
}

.industryTable {
    background: #f3f3f3;
    padding-bottom: 4px;
}

.industryTable h3 {
    background: var(--lc-blue);
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    text-align: center;
    padding: 10px;
}

.industryTable table {
    width: 96%;
    margin: 0px auto;
    border: none;
    margin-bottom: 8px;
}

.industryTable table td {
    width: 50%;
    border: none;
    text-align: center;
    padding-bottom: 10px;
}

.fixed-footer {
    bottom: 0px;
    width: 189px;
    padding: 5px;
    margin-top: 70px;
    float: left;
    position: absolute;
}

ul.footer-list {
    list-style: none;
    float: left;
    font-size: 12px;
    width: 100%;
    margin-bottom: 5px;
    margin-left: 0px;
    text-align: center;
    line-height: 8px;
    display:inline-flex;
}

ul.footer-list li {
    float: left;
    padding: 0px 14px;
    text-align: center;
    text-transform: uppercase;
}

.fixed-footer .social-buttons {
    color: #fff !important;
    background: #e7e7e7;
    float: left;
    width: 100%;
    padding-top: 4px;
    padding-bottom: 5px;
}

.fixed-footer .social-buttons a {
    color: #fff;
    margin-left: 8.6%;
    margin-right: 8.6%;
}

.facebook {
    width: 29px;
    background-image: url(https://labcritics.com/wordpress/wp-content/uploads/2013/07/fb.png);
    background-position: top;
    height: 30px;
    display: block;
    float: left;
    margin-right: 4px;
}

.facebook:hover {
    background-image: url(https://labcritics.com/wordpress/wp-content/uploads/2013/07/fb.png);
    background-position: bottom;
    width: 29px;
    height: 30px;
    display: block;
    transition: all 0.5s ease 0s;
}

.twitter {
    width: 29px;
    background-image: url(https://labcritics.com/wordpress/wp-content/uploads/2013/07/twt.png);
    background-position: top;
    height: 30px;
    display: block;
    float: left;
    margin-right: 4px;
}

.twitter:hover {
    background-image: url(https://labcritics.com/wordpress/wp-content/uploads/2013/07/twt.png);
    background-position: bottom;
    width: 29px;
    height: 30px;
    display: block;
    transition: all 0.5s ease 0s;
}

.google_plus {
    width: 29px;
    background-image: url(https://labcritics.com/wordpress/wp-content/uploads/2013/07/google.png);
    background-position: top;
    height: 30px;
    display: block;
    float: left;
    margin-right: 4px;
}

.google_plus:hover {
    background-image: url(https://labcritics.com/wordpress/wp-content/uploads/2013/07/google.png);
    background-position: bottom;
    width: 29px;
    height: 30px;
    display: block;
    transition: all 0.5s ease 0s;
}

.fixed-footer .footer-cpr {
    color: #9e9e9e;
    float: left;
    font-size: 10px;
    margin-top: 4px;
    text-align: center;
    width: 100%;
}

.similarArt {
    width: 100%;
    float: left;
}

.similarArt h4 {
    font-size: 14px;
    font-weight: 300;
    border-bottom: 1px solid var(--lc-border);
    padding-bottom: 6px;
    float: left;
    margin-top: 10px;
}

.similarArt a {
    color: #333;
    font-weight: 700;
    width: 100%;
    display: block;
    font-size: 14px;
    float: left;
    margin-bottom: 10px;
}

.similarArt a:hover {
    color: var(--lc-blue);
}

.googleadB {
    float: left;
    width: 100%;
    height: 1278px;
}

.teamlist {
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: inline-block;
}

.teamlist li {
    width: 30%;
    text-align: center;
    float: left;
    margin: 10px 1%;
}

.teamlist img {
    width: 60px;
    border-radius: 82px;
    height: 60px;
    margin-bottom: 13px;
}

.teamlist p {
    font-weight: 300;
}

.jobs {
    width: 100%;
    border-bottom: 1px solid var(--lc-border);
    margin-bottom: 2em;
    float: left;
}

.jobs p {
    width: 90%;
    word-wrap: break-word;
}

.jobs a {
    float: right;
    margin-bottom: 16px;
    padding: 0px 10px;
}

.sideNav sup {
    font-size: 50%;
    color: red;
}


.singular .site-content .hentry.has-post-thumbnail {
    margin-top: 0px;
}


/**
 * 6.15 Comments
 * -----------------------------------------------------------------------------
 */

.comments-area {
    margin: 48px auto;
    padding: 0 10px;
}

.comment-reply-title,
.comments-title {
    font: 900 16px/1.5 Lato, sans-serif;
    margin: 0;
    text-transform: uppercase;
}

.comment-list {
    list-style: none;
    margin: 0 0 48px 0;
}

.comment-author {
    font-size: 14px;
    line-height: 1.7142857142;
    position: relative;
}

.comment-list .reply,
.comment-metadata {
    font-size: 12px;
    line-height: 2;
    text-transform: uppercase;
}

.comment-list .reply {
    margin-top: 24px;
}

.comment-author .fn {
    font-weight: 900;
}

.comment-author a {
    color: var(--lc-text);
}

.comment-list .trackback a,
.comment-list .pingback a,
.comment-metadata a {
    color: var(--lc-text-muted);
}

.comment-author a:hover,
.comment-list .pingback a:hover,
.comment-list .trackback a:hover,
.comment-metadata a:hover {
    color: var(--lc-accent);
}

.comment-list article,
.comment-list .pingback,
.comment-list .trackback {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    padding-top: 24px;
}

.comment-list>li:first-child>article,
.comment-list>.pingback:first-child,
.comment-list>.trackback:first-child {
    border-top: 0;
}

.comment-author .avatar {
    border: 1px solid rgba(0, 0, 0, 0.1);
    height: 18px;
    padding: 2px;
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
}

.bypostauthor>article .fn:before {
    content: "\f408";
    margin: 0 2px 0 -2px;
    position: relative;
    top: -1px;
}

.says {
    display: none;
}

.comment-author,
.comment-awaiting-moderation,
.comment-content,
.comment-list .reply,
.comment-metadata {
    padding-left: 30px;
}

.comment-edit-link {
    margin-left: 10px;
}

.comment-edit-link:before {
    content: "\f411";
}

.comment-reply-link:before,
.comment-reply-login:before {
    content: "\f412";
    margin-right: 2px;
}

.comment-content {
    -webkit-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word;
}

.comment-content ul,
.comment-content ol {
    margin: 0 0 24px 22px;
}

.comment-content li>ul,
.comment-content li>ol {
    margin-bottom: 0;
}

.comment-content>:last-child {
    margin-bottom: 0;
}

.comment-list .children {
    list-style: none;
    margin-left: 15px;
}

.comment-respond {
    margin-bottom: 24px;
    padding: 0;
}

.comment .comment-respond {
    margin-top: 24px;
}

.comment-respond h3 {
    margin-top: 0;
    margin-bottom: 24px;
}

.comment-notes,
.comment-awaiting-moderation,
.logged-in-as,
.no-comments,
.form-allowed-tags,
.form-allowed-tags code {
    color: var(--lc-text-muted);
}

.comment-notes,
.comment-awaiting-moderation,
.logged-in-as {
    font-size: 14px;
    line-height: 1.7142857142;
}

.no-comments {
    font-size: 16px;
    font-weight: 900;
    line-height: 1.5;
    margin-top: 24px;
    text-transform: uppercase;
}

.comment-form label {
    display: block;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
    width: 100%;
}

.form-allowed-tags,
.form-allowed-tags code {
    font-size: 12px;
    line-height: 1.5;
}

.required {
    color: #c0392b;
}

.comment-reply-title small a {
    color: var(--lc-text);
    float: right;
    height: 24px;
    overflow: hidden;
    width: 24px;
}

.comment-reply-title small a:hover {
    color: var(--lc-accent);
}

.comment-reply-title small a:before {
    content: "\f405";
    font-size: 32px;
}

.comment-navigation {
    font-size: 12px;
    line-height: 2;
    margin-bottom: 48px;
    text-transform: uppercase;
}

.comment-navigation .nav-next,
.comment-navigation .nav-previous {
    display: inline-block;
}

.comment-navigation .nav-previous a {
    margin-right: 10px;
}

#comment-nav-above {
    margin-top: 36px;
    margin-bottom: 0;
}


/**
 * 7.0 Sidebars
 * -----------------------------------------------------------------------------
 */


/* Secondary */

.homeIntro {
    width: 96%;
    height: 138px;
    position: inherit;
    background: #fff;
    display: block;
    overflow: hidden;
    margin: 0px 2%;
    background-color: #ecedee;
}

.homeIntro .drCric {
    float: left;
    width: 18%;
    background-position: 47% 3%;
    background-color: #f7f7f7;
    border-right: 4px solid var(--lc-blue-alt);
    color: #c9c9c9;
    font-style: italic;
    font-size: 20px;
    padding: 9px;
    line-height: 350px;
    text-align: left;
}

.homeIntro .labMarText {
    float: left;
    width: 75%;
    height: auto;
    padding: 2.1em 2%;
}

.homeIntro .labMarText form {
    width: 146px;
    float: right;
    margin-top: -3em;
}

.homeIntro .labMarText h2 {
    margin-top: 10px;
    font-weight: 300;
    color: var(--lc-blue);
}

.homeIntro .labMarText p {
    font-size: 14px;
    color: #464646;
}


/* Primary Sidebar */

.primary-sidebar {
    padding-top: 48px;
}


/* Content Sidebar */

.content-sidebar {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    color: var(--lc-text-muted);
    padding: 48px 10px 0;
}


/**
 * 7.1 Widgets
 * -----------------------------------------------------------------------------
 */


/* Primary Sidebar, Footer Sidebar */

.widget {
    font-size: 14px;
    -webkit-hyphens: auto;
    hyphens: auto;
    line-height: 1.2857142857;
    margin-bottom: 48px;
    width: 100%;
    word-wrap: break-word;
}

.widget a {
    color: #fff;
}

.widget a:hover {
    color: var(--lc-accent);
}

.widget h1,
.widget h2,
.widget h3,
.widget h4,
.widget h5,
.widget h6 {
    margin: 24px 0 12px;
}

.widget h1 {
    font-size: 22px;
    line-height: 1.0909090909;
}

.widget h2 {
    font-size: 20px;
    line-height: 1.2;
}

.widget h3 {
    font-size: 18px;
    line-height: 1.3333333333;
}

.widget h4 {
    font-size: 16px;
    line-height: 1.5;
}

.widget h5 {
    font-size: 14px;
    line-height: 1.7142857142;
}

.widget h6 {
    font-size: 12px;
    line-height: 2;
}

.widget address {
    margin-bottom: 18px;
}

.widget abbr[title] {
    border-color: rgba(255, 255, 255, 0.7);
}

.widget mark,
.widget ins {
    color: #000;
}

.widget pre,
.widget fieldset {
    border-color: rgba(255, 255, 255, 0.2);
}

.widget code,
.widget kbd,
.widget tt,
.widget var,
.widget samp,
.widget pre {
    font-size: 12px;
    line-height: 1.5;
}

.widget blockquote {
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 18px;
}

.widget blockquote cite {
    color: #fff;
    font-size: 14px;
    line-height: 1.2857142857;
}

.widget dl,
.widget dd {
    margin-bottom: 18px;
}

.widget ul,
.widget ol {
    list-style: none;
    margin: 0;
}

.widget li>ol,
.widget li>ul {
    margin-left: 10px;
}

.widget table,
.widget th,
.widget td {
    border-color: rgba(255, 255, 255, 0.2);
}

.widget table {
    margin-bottom: 18px;
}

.widget del {
    color: rgba(255, 255, 255, 0.4);
}

.widget hr {
    background-color: rgba(255, 255, 255, 0.2);
}

.widget p {
    margin-bottom: 18px;
}

.widget input,
.widget textarea {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 16px;
    padding: 1px 2px 2px 4px;
}

.widget input:focus,
.widget textarea:focus {
    border-color: rgba(255, 255, 255, 0.3);
}

.widget button,
.widget input[type="button"],
.widget input[type="reset"],
.widget input[type="submit"] {
    background-color: var(--lc-accent-dark);
    border: 0;
    font-size: 12px;
    padding: 5px 15px 4px;
}

.widget input[type="button"]:hover,
.widget input[type="button"]:focus,
.widget input[type="reset"]:hover,
.widget input[type="reset"]:focus,
.widget input[type="submit"]:hover,
.widget input[type="submit"]:focus {
    background-color: var(--lc-accent);
}

.widget input[type="button"]:active,
.widget input[type="reset"]:active,
.widget input[type="submit"]:active {
    background-color: #55d737;
}

.widget .wp-caption {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 18px;
}

.widget .widget-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7142857142;
    margin: 0 0 24px 0;
    text-transform: uppercase;
}

.widget-title,
.widget-title a {
    color: #fff;
}

.widget-title a:hover {
    color: var(--lc-accent);
}


/* Calendar Widget*/

.widget_calendar table {
    line-height: 2;
    margin: 0;
}

.widget_calendar caption {
    color: #fff;
    font-weight: 700;
    line-height: 1.7142857142;
    margin-bottom: 18px;
    text-align: left;
    text-transform: uppercase;
}

.widget_calendar thead th {
    background-color: rgba(255, 255, 255, 0.1);
}

.widget_calendar tbody td,
.widget_calendar thead th {
    text-align: center;
}

.widget_calendar tbody a {
    background-color: var(--lc-accent-dark);
    color: #fff;
    display: block;
}

.widget_calendar tbody a:hover {
    background-color: var(--lc-accent);
    color: #fff;
}

.widget_calendar #prev {
    padding-left: 5px;
}

.widget_calendar #next {
    padding-right: 5px;
    text-align: right;
}


/* Ephemera Widget*/

.widget_twentyfourteen_ephemera>ol>li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 18px;
    padding: 0;
}

.widget_twentyfourteen_ephemera .hentry {
    margin: 0;
    max-width: 100%;
}

.widget_twentyfourteen_ephemera .entry-title,
.widget_twentyfourteen_ephemera .entry-meta,
.widget_twentyfourteen_ephemera .wp-caption-text,
.widget_twentyfourteen_ephemera .post-format-archive-link,
.widget_twentyfourteen_ephemera .entry-content table {
    font-size: 12px;
    line-height: 1.5;
}

.widget_twentyfourteen_ephemera .entry-title {
    display: inline;
    font-weight: 400;
}

.widget_twentyfourteen_ephemera .entry-meta {
    margin-bottom: 18px;
}

.widget_twentyfourteen_ephemera .entry-meta a {
    color: rgba(255, 255, 255, 0.7);
}

.widget_twentyfourteen_ephemera .entry-meta a:hover {
    color: var(--lc-accent);
}

.widget_twentyfourteen_ephemera .entry-content ul,
.widget_twentyfourteen_ephemera .entry-content ol {
    margin: 0 0 18px 20px;
}

.widget_twentyfourteen_ephemera .entry-content ul {
    list-style: disc;
}

.widget_twentyfourteen_ephemera .entry-content ol {
    list-style: decimal;
}

.widget_twentyfourteen_ephemera .entry-content li>ul,
.widget_twentyfourteen_ephemera .entry-content li>ol {
    margin: 0 0 0 20px;
}

.widget_twentyfourteen_ephemera .entry-content th,
.widget_twentyfourteen_ephemera .entry-content td {
    padding: 6px;
}

.widget_twentyfourteen_ephemera .post-format-archive-link {
    font-weight: 700;
    text-transform: uppercase;
}


/* List Style Widgets*/

.widget_archive li,
.widget_categories li,
.widget_links li,
.widget_meta li,
.widget_nav_menu li,
.widget_pages li,
.widget_recent_comments li,
.widget_recent_entries li {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 0 9px;
}

.widget_archive li:first-child,
.widget_categories li:first-child,
.widget_links li:first-child,
.widget_meta li:first-child,
.widget_nav_menu li:first-child,
.widget_pages li:first-child,
.widget_recent_comments li:first-child,
.widget_recent_entries li:first-child {
    border-top: 0;
}

.widget_categories li ul,
.widget_nav_menu li ul,
.widget_pages li ul {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 9px;
}

.widget_categories li li:last-child,
.widget_nav_menu li li:last-child,
.widget_pages li li:last-child {
    padding-bottom: 0;
}


/* Recent Posts Widget */

.widget_recent_entries .post-date {
    display: block;
}


/* RSS Widget */

.rsswidget img {
    margin-top: -4px;
}

.rssSummary {
    margin: 9px 0;
}

.rss-date {
    display: block;
}

.widget_rss li {
    margin-bottom: 18px;
}

.widget_rss li:last-child {
    margin-bottom: 0;
}


/* Text Widget */

.widget_text>div>:last-child {
    margin-bottom: 0;
}

.feedEkList {
    margin: 0px;
    font-size: 13px;
    list-style: none;
}

.feedEkList .itemDate,
.feedEkList .itemContent {
    display: none;
}

.feedEkList li {
    margin-bottom: 5px;
}

.feedEkList li a {
    color: var(--lc-text-soft);
}

.feedEkList li:first-child {
    display: none;
}


/**
 * 7.2 Content Sidebar Widgets
 * -----------------------------------------------------------------------------
 */

.content-sidebar .widget a {
    color: var(--lc-accent-dark);
}

.content-sidebar .widget a:hover {
    color: var(--lc-accent);
}

.content-sidebar .widget pre {
    border-color: rgba(0, 0, 0, 0.1);
}

.content-sidebar .widget mark,
.content-sidebar .widget ins {
    color: var(--lc-text);
}

.content-sidebar .widget abbr[title] {
    border-color: var(--lc-text);
}

.content-sidebar .widget fieldset {
    border-color: rgba(0, 0, 0, 0.1);
}

.content-sidebar .widget blockquote {
    color: var(--lc-text-muted);
}

.content-sidebar .widget blockquote cite {
    color: var(--lc-text);
}

.content-sidebar .widget li>ol,
.content-sidebar .widget li>ul {
    margin-left: 18px;
}

.content-sidebar .widget table,
.content-sidebar .widget th,
.content-sidebar .widget td {
    border-color: rgba(0, 0, 0, 0.1);
}

.content-sidebar .widget del {
    color: var(--lc-text-muted);
}

.content-sidebar .widget hr {
    background-color: rgba(0, 0, 0, 0.1);
}

.content-sidebar .widget input,
.content-sidebar .widget textarea {
    background-color: #fff;
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--lc-text);
}

.content-sidebar .widget input:focus,
.content-sidebar .widget textarea:focus {
    border-color: rgba(0, 0, 0, 0.3);
}

.content-sidebar .widget input[type="button"],
.content-sidebar .widget input[type="reset"],
.content-sidebar .widget input[type="submit"] {
    background-color: var(--lc-accent-dark);
    border: 0;
    color: #fff;
}

.content-sidebar .widget input[type="button"]:hover,
.content-sidebar .widget input[type="button"]:focus,
.content-sidebar .widget input[type="reset"]:hover,
.content-sidebar .widget input[type="reset"]:focus,
.content-sidebar .widget input[type="submit"]:hover,
.content-sidebar .widget input[type="submit"]:focus {
    background-color: var(--lc-accent);
}

.content-sidebar .widget input[type="button"]:active,
.content-sidebar .widget input[type="reset"]:active,
.content-sidebar .widget input[type="submit"]:active {
    background-color: #55d737;
}

.content-sidebar .widget .wp-caption {
    color: var(--lc-text-muted);
}

.content-sidebar .widget .widget-title {
    border-top: 5px solid #000;
    color: var(--lc-text);
    font-size: 14px;
    font-weight: 900;
    margin: 0 0 18px;
    padding-top: 7px;
    text-transform: uppercase;
}

.content-sidebar .widget .widget-title a {
    color: var(--lc-text);
}

.content-sidebar .widget .widget-title a:hover {
    color: var(--lc-accent);
}


/* List Style Widgets*/

.content-sidebar .widget_archive li,
.content-sidebar .widget_categories li,
.content-sidebar .widget_links li,
.content-sidebar .widget_meta li,
.content-sidebar .widget_nav_menu li,
.content-sidebar .widget_pages li,
.content-sidebar .widget_recent_comments li,
.content-sidebar .widget_recent_entries li,
.content-sidebar .widget_categories li ul,
.content-sidebar .widget_nav_menu li ul,
.content-sidebar .widget_pages li ul {
    border-color: rgba(0, 0, 0, 0.1);
}


/* Calendar Widget */

.content-sidebar .widget_calendar caption {
    color: var(--lc-text);
    font-weight: 900;
}

.content-sidebar .widget_calendar thead th {
    background-color: rgba(0, 0, 0, 0.02);
}

.content-sidebar .widget_calendar tbody a,
.content-sidebar .widget_calendar tbody a:hover {
    color: #fff;
}


/* Ephemera widget*/

.content-sidebar .widget_twentyfourteen_ephemera .widget-title {
    line-height: 1.2857142857;
    padding-top: 1px;
}

.content-sidebar .widget_twentyfourteen_ephemera .widget-title:before {
    background-color: #000;
    color: #fff;
    margin: -1px 9px 0 0;
    padding: 6px 0 9px;
    text-align: center;
    vertical-align: middle;
    width: 36px;
}

.content-sidebar .widget_twentyfourteen_ephemera .video.widget-title:before {
    content: "\f104";
}

.content-sidebar .widget_twentyfourteen_ephemera .audio.widget-title:before {
    content: "\f109";
}

.content-sidebar .widget_twentyfourteen_ephemera .image.widget-title:before {
    content: "\f473";
}

.content-sidebar .widget_twentyfourteen_ephemera .gallery.widget-title:before {
    content: "\f103";
}

.content-sidebar .widget_twentyfourteen_ephemera .aside.widget-title:before {
    content: "\f101";
}

.content-sidebar .widget_twentyfourteen_ephemera .quote.widget-title:before {
    content: "\f106";
}

.content-sidebar .widget_twentyfourteen_ephemera .link.widget-title:before {
    content: "\f107";
}

.content-sidebar .widget_twentyfourteen_ephemera>ol>li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.content-sidebar .widget_twentyfourteen_ephemera .entry-meta {
    color: var(--lc-border-light);
}

.content-sidebar .widget_twentyfourteen_ephemera .entry-meta a {
    color: var(--lc-text-muted);
}

.content-sidebar .widget_twentyfourteen_ephemera .entry-meta a:hover {
    color: var(--lc-accent);
}

.content-sidebar.widget_twentyfourteen_ephemera blockquote cite {
    font-size: 13px;
    line-height: 1.3846153846;
}

.content-sidebar .widget_twentyfourteen_ephemera .post-format-archive-link {
    font-weight: 900;
}


/**
 * 8.0 Footer
 * -----------------------------------------------------------------------------
 */

#supplementary {
    padding: 0 10px;
}

.site-footer {
    font-size: 13px;
    position: relative;
    z-index: 3;
    margin-top: 0px;
    float: left;
    width: 100%;
    padding: 4em 0px;
    background-color: #fff;
    color: #333;
    border-top: 1px solid var(--lc-border);
}

.footer-nav {
    width: 474px;
    float: none;
    display: block;
    margin: 0px auto;
    padding-bottom: 1em;
}

.footer-cpr {
    width: 400px;
    text-align: center;
    display: block;
    margin: 0px auto;
    padding-top: 1.5em;
    font-size: 12px;
    color: #8e8c8c;
}

.footer-sidebar {
    padding-top: 48px;
}

.site-info {
    padding: 15px 10px;
}

.footer-logo {
    width: 250px;
    margin: 5px auto;
    display: block;
    height: 61px;
}

.foot-abt {
    width: 500px;
    text-align: center;
    margin: 0px auto;
    color: #8e8c8c;
    padding: 14px 0px;
    display: block;
    max-width: 80%;
    font-size: 13px;
    line-height: 1.9;
}

.foot-abt br {
    line-height: 3;
}

.foot-abt .dashicons {
    padding: 7px;
    margin: 0px 10px;
    cursor: pointer;
}

#supplementary+.site-info {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.site-info a:hover {
    color: var(--lc-accent);
}

.wpp-list {
    list-style: none;
    margin: 0px;
    padding: 10px;
    float: left;
}
.wpp-list li {
    border-bottom: 1px solid var(--lc-border);
}

/**
 * 9.0 Featured Content
 * -----------------------------------------------------------------------------
 */

.featured-content {
    background: #000 url(/wp-content/themes/twentyfourteen/images/pattern-dark.svg) repeat fixed;
    box-sizing: border-box;
    position: relative;
    width: 100%;
}

.featured-content-inner {
    overflow: hidden;
}

.featured-content .hentry {
    color: #fff;
    margin: 0;
    max-width: 100%;
    width: 100%;
}

.featured-content .post-thumbnail,
.featured-content .post-thumbnail:hover {
    background: transparent;
}

.featured-content .post-thumbnail {
    display: block;
    position: relative;
    padding-top: 55.357142857%;
    overflow: hidden;
}

.featured-content .post-thumbnail img {
    left: 0;
    position: absolute;
    top: 0;
}

.featured-content .entry-header {
    background-color: #000;
    box-sizing: border-box;
    min-height: 96px;
    overflow: hidden;
    padding: 24px 10px;
}

.featured-content a {
    color: #fff;
}

.featured-content a:hover {
    color: var(--lc-accent);
}

.featured-content .entry-meta {
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.0909090909;
    margin-bottom: 12px;
}

.featured-content .cat-links {
    font-weight: 700;
}

.featured-content .entry-title {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.3333333333;
    margin: 0;
}


/* Slider */

.slider .featured-content .hentry {
    -webkit-backface-visibility: hidden;
    display: none;
    position: relative;
}

.slider .featured-content .post-thumbnail {
    padding-top: 55.49132947%;
}

.slider-control-paging {
    background-color: #000;
    box-sizing: border-box;
    float: left;
    list-style: none;
    margin: -24px 0 0 0;
    position: relative;
    width: 100%;
    z-index: 3;
}

.slider-control-paging li {
    float: left;
    margin: 2px 4px 2px 0;
}

.slider-control-paging li:last-child {
    margin-right: 0;
}

.slider-control-paging a {
    cursor: pointer;
    display: block;
    height: 44px;
    position: relative;
    text-indent: -999em;
    width: 44px;
}

.slider-control-paging a:before {
    background-color: #4d4d4d;
    content: "";
    height: 12px;
    left: 10px;
    position: absolute;
    top: 16px;
    width: 12px;
}

.slider-control-paging a:hover:before {
    background-color: var(--lc-accent);
}

.slider-control-paging .slider-active:before,
.slider-control-paging .slider-active:hover:before {
    background-color: var(--lc-accent-dark);
}

.slider-direction-nav {
    clear: both;
    list-style: none;
    margin: 0;
    position: relative;
    width: 100%;
    z-index: 3;
}

.slider-direction-nav li {
    border-color: #fff;
    border-style: solid;
    border-width: 2px 1px 0 0;
    box-sizing: border-box;
    float: left;
    text-align: center;
    width: 50%;
}

.slider-direction-nav li:last-child {
    border-width: 2px 0 0 1px;
}

.slider-direction-nav a {
    background-color: #000;
    display: block;
    font-size: 0;
    height: 46px;
}

.slider-direction-nav a:hover {
    background-color: var(--lc-accent-dark);
}

.slider-direction-nav a:before {
    color: #fff;
    content: "\f430";
    font-size: 32px;
    line-height: 46px;
}

.slider-direction-nav .slider-next:before {
    content: "\f429";
}

.slider-direction-nav .slider-disabled {
    display: none;
}

.langswitch {
    margin: 14px;
    float: left;
    font-size: 10px;
    background-color: #eaeaea;
    padding: 2px 5px;
    border-radius: 2px;
}

.sideNav a {
    width: 100%;
    font-size: 15px;
    font-weight: 500;
    background: #fcfcfc;
    float: left;
    padding: 5px 9px;
    margin-left: -10px;
    border-bottom: 0px solid var(--lc-blue);
    margin-bottom: 3px;
    border-left: 3px solid var(--lc-blue);
    text-transform: uppercase;
    color: #6c6a6a;
}

.sideNav a:hover {
    background: var(--lc-blue);
    color: #fff;
}


/**
 * 10.0 Multisite & custom components
 * -----------------------------------------------------------------------------
 */

.site-main .widecolumn {
    padding-top: 72px;
    width: auto;
}

.site-main .mu_register,
.widecolumn>h2,
.widecolumn>form {
    margin: 0 auto 48px;
    max-width: 474px;
    padding: 0 30px;
}

.site-main .mu_register #blog_title,
.site-main .mu_register #user_email,
.site-main .mu_register #blogname,
.site-main .mu_register #user_name {
    font-size: inherit;
    width: 90%;
}

.site-main .mu_register input[type="submit"],
.widecolumn #submit {
    font-size: inherit;
    width: auto;
}

blockquote.aligncenter,
img.aligncenter,
.wp-caption.aligncenter,
.wp-caption,
.wp-caption img {
    max-width: 100%;
}

.toolsFull {
    width: 1340px;
    margin: 1em auto;
    float: none;
    display: block;
    height: auto;
    max-width: 100%;
}

.toolsBlurb {
    padding: 2em;
    margin: 1em 0 2em;
    background: #f8f8f8;
    line-height: 2;
    width: 100%;
    box-sizing: border-box;
}

.toolsBlurb h1 {
    padding: 0px;
    margin: 0px 0px 0.51em;
}

.toolsContent   {
    width: 72%;
    float: left;
    height: auto;
    padding: 1em 0 0em;
    margin-bottom: 2em;
    margin-right: 1%;
}

.toolSide {
    width: 26%;
    float: left;
}

.pagination {
    width: 100%;
    float: left;
    height: 50px;
    text-align: center;
}

.pagination a.prev.page-numbers {
    float: left;
}

.pagination a.next.page-numbers {
    float: right;
}


.toolSide .articleBar {
    width: 100%;
}


.full-desc {
    font-size: 20px;
    width: 70%;
    padding: 1% 1% 0% 0%;
}

.tool-content-area {
    width: 100%;
    display: flex;
}

.tool-content-area .sidebar {
    width: 30%;
}

#home {
    clip-path: url(#cache);
}

#red {
    fill: none;
    opacity: 0.15;
    stroke: #ce1b5f;
    stroke-width: 12;
    stroke-miterlimit:10;
    animation: show 4s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

#blue {
    fill: none;
    opacity: 0.15;
    stroke: #06a1c4;
    stroke-width: 12;
    stroke-miterlimit:10;
    animation: show 4s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

#light-blue {
    fill: none;
    opacity: 0.15;
    stroke: #06a1c4;
    stroke-width: 6;
    stroke-miterlimit:10;
    stroke-dasharray: 200;
    stroke-dashoffset: 800;
    animation: draw 4s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes show {
    0% {
        opacity: 0.15;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 0.15;
    }
}


.productpg .categories {
    float: left;
    width: 100%;
}

.productpg ul.post-categories {
    list-style: none;
    float: left;
    padding: 0;
    margin: 0;
}

ul.post-categories {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

/*
 * float/margin-right replaced by the flex gap above: the byline row on single
 * posts is a flex container, where floats are ignored and the old margin left
 * a stray gap after the last pill.
 */
ul.post-categories li {
    float: none;
    margin: 0;
    padding: 0;
    background: none;
    font-size: 12px;
    line-height: 1;
}

/* Pill moved onto the anchor so the whole chip is clickable, not just the text. */
ul.post-categories li a {
    display: inline-block;
    padding: 3px 11px;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: #08344d;
    background: #85cbfa;
    border-radius: 13px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

ul.post-categories li a:hover,
ul.post-categories li a:focus {
    background: var(--lc-blue);
    color: #fff;
    text-decoration: none;
}


.lc-tab-container {
    display: flex;
    border-bottom: 2px solid var(--lc-border);
    margin-bottom: 10px;
}
.lc-tab-item {
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid var(--lc-border);
    border-bottom: none;
    background: #f1f1f1;
    margin-right: 5px;
}
.lc-tab-item.lc-active {
    background: white;
    font-weight: bold;
    border-top: 2px solid #007bff;
}

.lc-content-area {
    border: 1px solid var(--lc-border);
    padding: 20px;
    background: white;
}

.lc-content-section {
    display: none;
}
.lc-content-section.lc-active {
    display: block;
}


#login-popup {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.login-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
}

.login-box {
    position: relative;
    background: #fff;
    padding: 25px;
    width: 340px;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    z-index: 100000;
}

.close-login {
    position: absolute;
    right: 12px;
    top: 10px;
    font-size: 22px;
    cursor: pointer;
}

/**
 * 11.0 Media Queries
 * -----------------------------------------------------------------------------
 */


/* Does the same thing as <meta name="viewport" content="width=device-width">,
* but in the future W3C standard way. -ms- prefix is required for IE10+ to
* render responsive styling in Windows 8 "snapped" views; IE10+ does not honor
* the meta tag. See http://core.trac.wordpress.org/ticket/25888.
*/


.codedText {
    padding:10px 15px;
    margin:15px;
    background:#000;
    color:#fff;
    text-align:center;
    white-space: nowrap;
    cursor:pointer;
}

@media screen and (max-width: 400px) {
    .list-view .site-content .post-thumbnail {
        background: none;
        width: auto;
        z-index: 2;
    }
    .list-view .site-content .post-thumbnail img {
        float: left;
        margin: 0 6px 0px 0;
        width: 84px;
    }
    .list-view .site-content .entry-header {
        background-color: transparent;
        padding: 0;
        margin-top: -6px;
    }
    .list-view .content-area {
        padding: 0;
    }
    .list-view .site-content .hentry {
        margin: 0px;
        min-height: 30px;
        padding: 4px 1px 4px;
        width: 100%;
    }
    .list-view .site-content .cat-links,
    .list-view .site-content .entry-content,
    .list-view .site-content .entry-summary,
    .list-view .site-content footer.entry-meta {
        display: none;
    }
    .list-view .site-content .entry-title {
        clear: none;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.2;
        margin-bottom: 6px;
        text-transform: none;
    }
    .list-view .site-content .format-aside .entry-title,
    .list-view .site-content .format-link .entry-title,
    .list-view .site-content .format-quote .entry-title {
        display: block;
    }
    .list-view .site-content .entry-meta {
        background-color: transparent;
        clear: none;
        margin: 0;
        text-transform: none;
    }
    .archive-header,
    .page-header {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        margin: 24px auto 0;
        padding-bottom: 24px;
    }
    .error404 .page-header {
        border-bottom: 0;
        margin: 0 auto 24px;
        padding: 0 10px;
    }
}

@media screen and (min-width: 401px) {
    a.post-thumbnail:hover img {
        opacity: 0.85;
    }
    .full-size-link:before,
    .parent-post-link:before,
    .site-content span+.byline:before,
    .site-content span+.comments-link:before,
    .site-content span+.edit-link:before,
    .site-content span+.entry-date:before {
        content: "";
    }
    .attachment span.entry-date:before,
    .entry-content .edit-link a:before,
    .entry-meta .edit-link a:before,
    .site-content .byline a:before,
    .site-content .comments-link a:before,
    .site-content .entry-date a:before,
    .site-content .featured-post:before,
    .site-content .full-size-link a:before,
    .site-content .parent-post-link a:before,
    .site-content .post-format a:before {
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font: normal 16px/1 Genericons;
        text-decoration: inherit;
        vertical-align: text-bottom;
    }
    .site-content .entry-meta>span {
        margin-right: 10px;
    }
    .site-content .format-video .post-format a:before {
        content: "\f104";
    }
    .site-content .format-audio .post-format a:before {
        content: "\f109";
    }
    .site-content .format-image .post-format a:before {
        content: "\f473";
    }
    .site-content .format-quote .post-format a:before {
        content: "\f106";
        margin-right: 2px;
    }
    .site-content .format-gallery .post-format a:before {
        content: "\f103";
        margin-right: 4px;
    }
    .site-content .format-aside .post-format a:before {
        content: "\f101";
        margin-right: 2px;
    }
    .site-content .format-link .post-format a:before {
        content: "\f107";
        position: relative;
        top: 1px;
    }
    .site-content .featured-post:before {
        content: "\f308";
        margin-right: 3px;
        position: relative;
        top: 1px;
    }
    .site-content .entry-date a:before,
    .attachment .site-content span.entry-date:before {
        content: "\f303";
        margin-right: 1px;
        position: relative;
        top: 1px;
    }
    .site-content .byline a:before {
        content: "\f304";
    }
    .site-content .comments-link a:before {
        content: "\f300";
        margin-right: 2px;
    }
    .entry-content .edit-link a:before,
    .entry-meta .edit-link a:before {
        content: "\f411";
    }
    .site-content .full-size-link a:before {
        content: "\f402";
        margin-right: 1px;
    }
    .site-content .parent-post-link a:before {
        content: "\f301";
    }
    .list-view .site-content .hentry:first-of-type,
    .list-view .site-content .hentry.has-post-thumbnail {
        padding-top: 0;
    }
    .archive-header,
    .page-header {
        margin: 0 auto 60px;
        padding: 0 10px;
    }
    .error404 .page-header {
        margin-bottom: 24px;
    }
}

@media screen and (min-width: 594px) {
    .site-content .entry-header {
        padding-right: 30px;
        padding-left: 30px;
    }
    .site-content .has-post-thumbnail .entry-header {
        margin-top: 0px;
    }
}

@media (max-width: 665px) {

    .grid-container {
        display: block;
        width: 100%;

    }
    #page {
        overflow: hidden;
    }
    .home .entry-title {
        margin: 0px;
    }
    .site-content .entry-header {
        width: 72%;
        padding-left: 10px;
    }
    #masonry-wrapper {
        margin-bottom: 10px;
        padding: 3%;
        width: 94%;
        float: left;
        margin-right: 0%;
        margin-left: 0%;
    }
    .right-col {
        width: 96%;
        margin: 1%;
        padding: 1%;
    }
    #masonry-wrapper .site-content .entry-header {
        width: 69%;
        padding-left: 0%;
    }
    #masonry-wrapper .entry-content {
        width: 71%;
    }
    .Hsidebar {
        width: 90%;
        float: left;
        padding: 0px;
        margin: 2%;
    }
    .full-width .post-thumbnail img {
        height: auto;
    }
    #menutogl .dashicons {
        display: none;
    }
    .homeIntro .labMarText {
        width: 69%;
        padding: 1.1em 2%;
    }
    .homeIntro .labMarText form {
        margin-top: 0em;
    }
    .search-toggle {
        display: none;
    }
    .main-logo {
        width: 128px;
        height: auto;
        margin-top: 11px;
    }
    .textSec h1 {
        font-size: 16px;
    }
    .headline .entry-title {
        font-size: 21px;
    }
    header .trend {
        float: right;
        height: auto;
        padding: 5px 0px 0px;
        border-left: none;
        max-width: 100%;
        font-size: 12px;
        border-top: 1px solid var(--lc-border);
        width: 100%;
        border-bottom: 1px solid var(--lc-border);
        margin-bottom: 20px;
    }
    .floating-header h2 {
        display: none;
    }
    .header-main .rssShare {
        display: none;
    }
    .langswitch span {
        display: none;
    }
    .lcfeatured {
        width: 94%;
        margin: 3px 3%;
        height: auto;
        float: left;
        margin-top: 0em;
    }
    .lcfeatured .lcfeatImg {
        max-height: 177px;
        width: 98%;
        height: 94%;
        text-align: center;
        float: left;
        margin: 1%;
    }

    .sub-row {
        display: block;
        float: left;
    }
    .lcarticle {
        position: relative;
        width: 100%;
        padding: 18px 5px 1em;
    }
    /* font-size handled by the clamp() on the base rule, which floors at 18px -
       the value this block used to set. */
    .new-nav {
        display: none;
    }
    .top-feat {
        width: 100%;
        margin-bottom: 0em;
        padding-top: 1em;

    }
    .lcfeatured2, .feat-right {
        width: 95%;
        margin: 2.5%;
        height: auto;
        float: left;
    }

    .feat-right {
        max-height: 500px;

    }

    .grid-content {
        display: block;
        float: left;
        padding: 10px;
        box-sizing: border-box;
        width:100%;
    }

    .post-block {
        display: block;
    }


    .home_subsections {
        width: 100%;
    }

    .ad-full, .ad-full, .toolsRow, .prBar, .trend, .eventsBar, .DeSciBox {
        float: left;
        margin: 10px 0px;    width: 100%;
        max-width: none;
    }

    .feat-right {
        float: left;
        margin: 10px 2.5%;
        width: 95%;
        max-width: none;
    }

    .nonImg p {
        display: none;
    }


    .ad-row {
        float: left;
        width: 95%;
        margin: 10px 2.5%;
    }
    .header-main .dashicons {
        padding: 14px 1px;
        display: none
        }
    .homepost {
        width: 100%;
        float: left;
        margin: 3px 2% 11px 0%;
        position: relative;
        height: auto;
    }
    .homepost .homeImg {
        width: 30%;
        float: left;
        box-sizing: border-box;
        height: 113px;
        overflow: hidden;
        margin-bottom: 7px;
    }
    .homepost .article-blurb {
        padding: 0 2.8% 10px;
        float: left;
        width: 70%;
        text-overflow: clip;
        height: auto;
        box-sizing: border-box;
        margin-top: -8px;
    }
    .floating-header {
        width: 100%;
        margin: 0px auto;
    }
    .sideNav a {
        width: 48%;
        font-size: 12px;
        text-align: center;
        background: #fcfcfc;
        float: left;
        padding: 12px 1%;
        margin-bottom: 0px;
        border-left: none;
        text-transform: uppercase;
        color: #6c6a6a;
        display: inline;
        border-bottom: 1px solid var(--lc-border);
        margin-right: 0px;
        margin-left: -1px;
    }
    .sideNav a:nth-child(even) {
        border-left: 1px solid var(--lc-border);
    }
    .list-view .site-content .entry-header {
        width: 60%;
        font-weight: 300;
    }
    .adBar {
        height: 0px;
    }
    .lctool_title {
        float: left;
        padding: 13px 13px 30px;
        width: 94%;
    }

    .single .fullcontent {
        width: 100%;
    }
    .articleBar {
        width: 100%;
    }

    .lc-content-area {
        wi
        }
}

@media (max-width:720px) {
    .searchDiv {
        display: none;
    }
    .footer-nav {
        width: 369px;
    }
    ul.footer-list li {
        padding: 0px 9px;
    }
    .searchDiv {
        display: none;
    }
}

@media screen and (min-width: 673px) {
    .header-main {
        padding: 0 10px;
    }
    .search-toggle {
        margin-right: 18px;
    }
    .search-box .search-field {
        width: 50%;
    }
    .content-area {
        float: left;
        width: 100%;
    }
    .site-content {
        margin-right: 33.33333333%;
    }
    .site-content .has-post-thumbnail .entry-header {
        margin-top: 0;
    }
    .archive-header,
    .comments-area,
    .image-navigation,
    .page-header,
    .page-content,
    .post-navigation,
    .site-content .entry-content,
    .site-content .entry-summary,
    .site-content footer.entry-meta {
        padding-right: 30px;
        padding-left: 30px;
    }
    .entry-content {
        width: 73%;
        padding-left: 0px !important;
    }
    .searchDiv {
        display: none;
    }
    .floating-header h2 {
        display: none;
    }
    .site-content .entry-header {
        width: 74%;
        padding-left: 0px;
    }
    .singular .site-content .hentry.has-post-thumbnail {
        margin-top: 0;
    }
    .full-width .site-content {
        box-shadow: inset 1px 1px 2px #f1f1f1;
        padding-left: 7px;
    }
    .full-width .site-content .has-post-thumbnail .entry-header,
    .full-width.singular .site-content .hentry.has-post-thumbnail {
        margin-top: 0px;
    }
    #supplementary {
        padding: 0 10px;
    }
    .content-sidebar {
        border: 0;
        float: right;
        margin-left: -33.33333333%;
        padding: 48px 30px 24px;
        width: 33.33333333%;
    }
    .grid .featured-content .hentry {
        float: left;
        width: 50%;
    }
    .grid .featured-content .hentry:nth-child( 2n+1) {
        clear: both;
    }
    .grid .featured-content .entry-header {
        border-color: #000;
        border-style: solid;
        border-width: 12px 10px;
        height: 96px;
        padding: 0;
    }
    .slider .featured-content .entry-title {
        font-size: 22px;
        line-height: 1.0909090909;
    }
    .slider .featured-content .entry-header {
        min-height: inherit;
        padding: 24px 30px 48px;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 50%;
        z-index: 3;
    }
    .slider-control-paging {
        background: transparent;
        margin-top: -48px;
        padding-left: 20px;
        width: 50%;
    }
    .slider-direction-nav {
        clear: none;
        float: right;
        margin-top: -48px;
        width: 98px;
    }
    .slider-direction-nav li {
        border: 0;
        padding: 0 1px 0 0;
    }
    .slider-direction-nav li:last-child {
        padding: 0 0 0 1px;
    }
    .slider-direction-nav a {
        height: 48px;
    }
    .slider-direction-nav a:before {
        line-height: 48px;
    }
    .site-info {
        display: none;
    }
}

@media screen and (min-width: 783px) {
    .header-main {
        padding-right: 0;
    }
    .search-toggle {
        margin-right: 0;
    }
    /* Fixed Header */
    .masthead-fixed .site-header {
        top: 0;
        background: #fffc;
    }
    .admin-bar.masthead-fixed .site-header {
        top: 32px;
    }
    /* Navigation */
    .site-navigation li .current_page_item>a,
    .site-navigation li .current_page_ancestor>a,
    .site-navigation li .current-menu-item>a,
    .site-navigation li .current-menu-ancestor>a {
        color: #fff;
    }
    /* Primary Navigation */
}

@media screen and (min-width: 810px) {
    .attachment .entry-attachment .attachment {
        margin-right: -168px;
        margin-left: -168px;
        max-width: 810px;
    }
    .attachment .site-content .attachment img {
        display: block;
        margin: 0 auto;
    }
    .contributor-avatar {
        margin-left: -168px;
    }
    .contributor-summary {
        float: left;
    }
    .full-width .site-content .alignleft {
        clear: left;
    }
    .full-width .site-content .alignright {
        clear: right;
    }
}

@media screen and (min-width: 846px) {
    .content-sidebar {
        padding-top: 2px;
    }
    .site-content .has-post-thumbnail .entry-header {
        margin-top: 0px;
    }
    .comment-list .trackback,
    .comment-list .pingback,
    .comment-list article {
        margin-bottom: 36px;
        padding-top: 36px;
    }
    .comment-author .avatar {
        height: 34px;
        top: 2px;
        width: 34px;
    }
    .comment-author,
    .comment-awaiting-moderation,
    .comment-content,
    .comment-list .reply,
    .comment-metadata {
        padding-left: 50px;
    }
    .comment-list .children {
        margin-left: 20px;
    }
    /*
     * Twenty Fourteen's -72px here tucked the post box under a full-width
     * featured header. Removed 2026-10-05: the only thing on this site that
     * still matches the selector is .lc-event__body, where it pulled the event
     * description up 72px into the hero and over the title. No published page
     * combines a .site-content template with a featured image, so nothing else
     * reaches it.
     *
     * Deleting rather than zeroing is deliberate - the same selector is already
     * set to 0 at min-width: 673px above, and that now carries through.
     */
    .featured-content {
        margin-bottom: 0;
    }
}

@media screen and (min-width: 1008px) {
    .main-content {
        float: left;
    }
    .site-content {
        margin-right: 29.04761904%;
    }
    .site-content .entry-header {
        margin-top: 0;
    }
    .site-content .has-post-thumbnail .entry-header {
        margin-top: 0;
    }
    .site-content {
        background: #fcfcfc;
    }
    .content-sidebar {
        margin-left: -29.04761904%;
        width: 29.04761904%;
    }
    .primary-sidebar {
        padding-top: 0;
    }
    .footer-sidebar .widget,
    .primary-sidebar .widget {
        font-size: 12px;
        line-height: 1.5;
    }
    .footer-sidebar .widget {
        box-sizing: border-box;
        float: left;
        padding: 0 30px;
        width: 25%;
    }
    .footer-sidebar .widget h1,
    .primary-sidebar .widget h1 {
        font-size: 20px;
        line-height: 1.2;
    }
    .footer-sidebar .widget h2,
    .primary-sidebar .widget h2 {
        font-size: 18px;
        line-height: 1.3333333333;
    }
    .footer-sidebar .widget h3,
    .primary-sidebar .widget h3 {
        font-size: 16px;
        line-height: 1.5;
    }
    .footer-sidebar .widget h4,
    .primary-sidebar .widget h4 {
        font-size: 14px;
        line-height: 1.7142857142;
    }
    .footer-sidebar .widget h5,
    .primary-sidebar .widget h5 {
        font-size: 12px;
        line-height: 2;
    }
    .footer-sidebar .widget h6,
    .primary-sidebar .widget h6 {
        font-size: 11px;
        line-height: 2.1818181818;
    }
    .footer-sidebar .widget code,
    .footer-sidebar .widget kbd,
    .footer-sidebar .widget tt,
    .footer-sidebar .widget var,
    .footer-sidebar .widget samp,
    .footer-sidebar .widget pre,
    .primary-sidebar .widget code,
    .primary-sidebar .widget kbd,
    .primary-sidebar .widget tt,
    .primary-sidebar .widget var,
    .primary-sidebar .widget samp,
    .primary-sidebar .widget pre {
        font-size: 11px;
        line-height: 1.6363636363;
    }
    .footer-sidebar .widget blockquote,
    .primary-sidebar .widget blockquote {
        font-size: 14px;
        line-height: 1.2857142857;
    }
    .footer-sidebar .widget blockquote cite,
    .primary-sidebar .widget blockquote cite {
        font-size: 12px;
        line-height: 1.5;
    }
    .footer-sidebar .widget input,
    .footer-sidebar .widget textarea,
    .primary-sidebar .widget input,
    .primary-sidebar .widget textarea {
        font-size: 12px;
        padding: 3px 2px 4px 4px;
    }
    .footer-sidebar .widget input[type="button"],
    .footer-sidebar .widget input[type="reset"],
    .footer-sidebar .widget input[type="submit"],
    .primary-sidebar .widget input[type="button"],
    .primary-sidebar .widget input[type="reset"],
    .primary-sidebar .widget input[type="submit"] {
        padding: 5px 15px 4px;
    }
    .footer-sidebar .widget .widget-title,
    .primary-sidebar .widget .widget-title {
        font-size: 11px;
        font-weight: 900;
        line-height: 1.6363636363;
        margin-bottom: 18px;
    }
    .footer-sidebar .widget_twentyfourteen_ephemera .entry-title,
    .footer-sidebar .widget_twentyfourteen_ephemera .entry-meta,
    .footer-sidebar .widget_twentyfourteen_ephemera .wp-caption-text,
    .footer-sidebar .widget_twentyfourteen_ephemera .post-format-archive-link,
    .footer-sidebar .widget_twentyfourteen_ephemera .entry-content table,
    .primary-sidebar .widget_twentyfourteen_ephemera .entry-title,
    .primary-sidebar .widget_twentyfourteen_ephemera .entry-meta,
    .primary-sidebar .widget_twentyfourteen_ephemera .wp-caption-text,
    .primary-sidebar .widget_twentyfourteen_ephemera .post-format-archive-link,
    .primary-sidebar .widget_twentyfourteen_ephemera .entry-content table {
        font-size: 11px;
        line-height: 1.6363636363;
    }
    .footer-sidebar .widget_archive li,
    .footer-sidebar .widget_categories li,
    .footer-sidebar .widget_links li,
    .footer-sidebar .widget_meta li,
    .footer-sidebar .widget_nav_menu li,
    .footer-sidebar .widget_pages li,
    .footer-sidebar .widget_recent_comments li,
    .footer-sidebar .widget_recent_entries li,
    .primary-sidebar .widget_archive li,
    .primary-sidebar .widget_categories li,
    .primary-sidebar .widget_links li,
    .primary-sidebar .widget_meta li,
    .primary-sidebar .widget_nav_menu li,
    .primary-sidebar .widget_pages li,
    .primary-sidebar .widget_recent_comments li,
    .primary-sidebar .widget_recent_entries li {
        border-top: 0;
        padding: 0 0 6px;
    }
    .footer-sidebar .widget_archive li:last-child,
    .footer-sidebar .widget_categories li:last-child,
    .footer-sidebar .widget_links li:last-child,
    .footer-sidebar .widget_meta li:last-child,
    .footer-sidebar .widget_nav_menu li:last-child,
    .footer-sidebar .widget_pages li:last-child,
    .footer-sidebar .widget_recent_comments li:last-child,
    .footer-sidebar .widget_recent_entries li:last-child,
    .primary-sidebar .widget_archive li:last-child,
    .primary-sidebar .widget_categories li:last-child,
    .primary-sidebar .widget_links li:last-child,
    .primary-sidebar .widget_meta li:last-child,
    .primary-sidebar .widget_nav_menu li:last-child,
    .primary-sidebar .widget_pages li:last-child,
    .primary-sidebar .widget_recent_comments li:last-child,
    .primary-sidebar .widget_recent_entries li:last-child {
        padding: 0;
    }
    .footer-sidebar .widget_categories li ul,
    .footer-sidebar .widget_nav_menu li ul,
    .footer-sidebar .widget_pages li ul,
    .primary-sidebar .widget_categories li ul,
    .primary-sidebar .widget_nav_menu li ul,
    .primary-sidebar .widget_pages li ul {
        border-top: 0;
        margin-top: 6px;
    }
    #supplementary {
        padding: 0;
    }
    .footer-sidebar {
        font-size: 12px;
        line-height: 1.5;
    }
    .featured-content {
        padding-left: 182px;
    }
    .grid .featured-content .hentry {
        width: 33.3333333%;
    }
    .grid .featured-content .hentry:nth-child( 2n+1) {
        clear: none;
    }
    .grid .featured-content .hentry:nth-child( 3n+1) {
        clear: both;
    }
    .grid .featured-content .entry-header {
        height: 120px;
    }
}

@media screen and (min-width: 1040px) {
    .site-content .has-post-thumbnail .entry-header {
        margin-top: 0px;
    }
    .archive-header,
    .comments-area,
    .image-navigation,
    .page-header,
    .page-content,
    .post-navigation,
    .site-content .entry-header,
    .site-content .entry-content,
    .site-content .entry-summary,
    .site-content footer.entry-meta {
        padding-right: 15px;
        padding-left: 15px;
    }
    .full-width .archive-header,
    .full-width .comments-area,
    .full-width .image-navigation,
    .full-width .page-header,
    .full-width .page-content,
    .full-width .post-navigation,
    .full-width .site-content .entry-header,
    .full-width .site-content .entry-content,
    .full-width .site-content .entry-summary,
    .full-width .site-content footer.entry-meta {
        padding-right: 5px;
        padding-left: 5px;
    }
}

@media screen and (min-width: 1080px) {
    .search-box .search-field {
        width: 324px;
    }

    .search-box-wrapper,
    .featured-content {
        padding-left: 222px;
    }
    .slider .featured-content .entry-title {
        font-size: 33px;
    }
    .slider .featured-content .entry-header,
    .slider-control-paging {
        width: 534px;
    }
    .slider-control-paging {
        padding-left: 24px;
    }
    .slider-control-paging li {
        margin: 12px 12px 12px 0;
    }
    .slider-control-paging a {
        height: 24px;
        width: 24px;
    }
    .slider-control-paging a:before {
        top: 6px;
        left: 6px;
    }
}

@media screen and (min-width: 1110px) {
    .archive-header,
    .comments-area,
    .image-navigation,
    .page-header,
    .page-content,
    .post-navigation,
    .site-content .entry-header,
    .site-content .entry-content,
    .site-content .entry-summary,
    .site-content footer.entry-meta {
        padding-right: 30px;
        padding-left: 30px;
    }
}

@media screen and (min-width: 1218px) {
    .archive-header,
    .comments-area,
    .image-navigation,
    .page-header,
    .page-content,
    .post-navigation,
    .site-content .entry-header,
    .site-content .entry-content,
    .site-content .entry-summary,
    .site-content footer.entry-meta {
        margin-right: 54px;
    }
    .full-width .archive-header,
    .full-width .comments-area,
    .full-width .image-navigation,
    .full-width .page-header,
    .full-width .page-content,
    .full-width .post-navigation,
    .full-width .site-content .entry-header,
    .full-width .site-content .entry-content,
    .full-width .site-content .entry-summary,
    .full-width .site-content footer.entry-meta {
        margin-right: auto;
    }
}

@media screen and (min-width: 1260px) {
    .site-content blockquote.alignleft {
        margin-left: -18%;
    }
    .site-content blockquote.alignright {
        margin-right: -18%;
    }
}


/**
 * 12.0 Print
 * -----------------------------------------------------------------------------
 */

@media print {
    body {
        background: none !important;
        /* Brute force since user agents all print differently. */
        color: var(--lc-text);
        font-size: 12pt;
    }
    .site,
    .site-header,
    .hentry,
    .site-content .entry-header,
    .site-content .entry-content,
    .site-content .entry-summary,
    .site-content .entry-meta,
    .page-content,
    .archive-header,
    .page-header,
    .contributor-info,
    .comments-area,
    .attachment .entry-attachment .attachment {
        max-width: 100%;
    }
    #site-header img,
    .search-toggle,
    .site-navigation,
    .site-content nav,
    .edit-link,
    .page-links,
    .widget-area,
    .more-link,
    .post-format-archive-link,
    .comment-respond,
    .comment-list .reply,
    .comment-reply-login,
    .site-footer,
    .slider-control-paging,
    .slider-direction-nav {
        display: none;
    }
    .entry-meta,
    .entry-meta a,
    .featured-content .hentry,
    .featured-content a {
        color: var(--lc-text);
    }
    .entry-content a,
    .entry-summary a,
    .page-content a,
    .comment-content a {
        text-decoration: none;
    }
    .site-header,
    .post-thumbnail,
    a.post-thumbnail:hover,
    .site-content .entry-header,
    .site-footer,
    .featured-content,
    .featured-content .entry-header {
        background: transparent;
    }
    .header-main {
        padding: 48px 10px;
    }
    .content-area {
        padding-top: 0;
    }
    .list-view .site-content .hentry {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        margin-bottom: 48px;
        padding-bottom: 24px;
    }
    .post-thumbnail img {
        margin: 0 10px 24px;
    }
    .site-content .has-post-thumbnail .entry-header {
        padding-top: 0;
    }
    .site-content footer.entry-meta {
        margin: 24px auto;
    }
    .entry-meta .tag-links a {
        color: #fff;
    }
    .singular .site-content .hentry.has-post-thumbnail {
        margin-top: 0;
    }
    .gallery-columns-1.gallery-size-medium,
    .gallery-columns-1.gallery-size-thumbnail,
    .gallery-columns-2.gallery-size-thumbnail,
    .gallery-columns-3.gallery-size-thumbnail {
        display: block;
    }
    .archive-title,
    .page-title {
        margin: 0 10px 48px;
    }
    .featured-content .hentry {
        margin-bottom: 48px;
    }
    .featured-content .post-thumbnail,
    .slider .featured-content .post-thumbnail {
        padding-top: 0;
    }
    .featured-content .post-thumbnail img {
        position: relative;
    }
    .featured-content .entry-header {
        padding: 0 10px 24px;
    }
    .featured-content .entry-meta {
        font-size: 9pt;
        margin-bottom: 11px;
    }
    .featured-content .cat-links {
        font-weight: 900;
    }
    .featured-content .entry-title {
        font-size: 25pt;
        line-height: 36px;
    }
}

/**
 * 13.0 Appended components (unsectioned legacy additions)
 * -----------------------------------------------------------------------------
 */

.post.masonry-brick {
    width: 24.8%;
    margin-right: 0.2%;
    margin-bottom: 0.2%;
}

.sml_subscribe {
    float: left;
    width: 100%;
}

p.sml_email {
    float: left;
    margin-top: 9px;
    width: 63%;
    height: 28px;
}

p.sml_email>label>input {
    background: #e7e7e7;
    width: 100%;
    border: 1px solid var(--lc-border-light);
    float: left;
    font-size: 11px;
    line-height: 13px;
    padding: 7px;
    margin-right: -10px;
    height: 30px;
}

p.sml_submit {
    float: left;
    width: 37%;
    margin-top: 9px;
}

p.sml_submit>input {
    background-color: var(--lc-blue);
    padding: 8px 9px 7px !important;
    font-size: 11px;
    float: left;
    border-bottom: 2px solid var(--lc-blue);
}

.tabs input[type=radio] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

.tabs {
    width: 100%;
    float: left;
    list-style: none;
    position: relative;
    padding: 0;
    margin: 10px 0px;
    display: block;
}

.tabs li {
    float: left;
    width: 180px;
}

.tabs label {
    display: block;
    padding: 8px 20px 12px;
    border-radius: 3px 3px 0 0;
    color: var(--lc-blue-alt);
    font-size: 13px;
    font-weight: normal;
    margin-right: 3px;
    cursor: pointer;
    position: relative;
    top: 7px;
    transition: all 0.2s ease-in-out;
    background: #f8f8f8;
}

.tabs label:hover {
    background: rgba(255, 255, 255, 0.5);
}

[id^=tab]:checked+label {
    background: var(--lc-blue);
    color: white;
    font-size: 13px;
    font-weight: 300;
}

[id^=tab]:checked~[id^=tab-content] {
    display: block;
}

.tab-content {
    z-index: 2;
    display: none;
    text-align: left;
    width: 732px;
    font-size: 14px;
    line-height: 140%;
    padding-top: 10px;
    background: #fff;
    padding: 15px;
    color: rgb(78, 78, 78);
    position: relative;
    top: 0px;
    left: 0;
    box-sizing: border-box;
    animation-duration: 0.5s;
    border: 1px solid var(--lc-blue-alt);
    border-top-right-radius: 2px;
}

.tab-content ul {
    float: left;
}

.tab-content table {
    border-spacing: 3px;
    border-collapse: separate;
    border: none;
}

.tab-content li {
    width: 44%;
    margin-right: 2%;
    margin-left: 2%;
}

#tab-content2 {
    margin-left: -180px;
}

#tab-content3 {
    margin-left: -360px;
}

#tab-content4 {
    margin-left: -540px;
}

.page-header h1 {
    width: 100%;
    font-weight: 300;
}

#stabs {
    width: 100%;
    height: 29px;
    border-bottom: solid 1px var(--lc-border-light);
    padding-right: 2px;
    margin-top: 0px;
}

#stabs li {
    float: left;
    list-style: none;
    border-left: 1px solid var(--lc-border-light);
    border-right: 1px solid var(--lc-border-light);
    margin-right: -1px;
    outline: none;
}

#stabs li a {
    color: #5685bc;
    padding-top: 0px;
    padding-left: 2px;
    padding-right: 2px;
    padding-bottom: 0px;
    display: block;
    background: #fff;
    text-decoration: none;
    outline: none;
}

#stabs li a.inactive {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 2px;
    padding-right: 2px;
    color: #fff;
    background: var(--lc-blue);
    outline: none;
}

#stabs li a:hover,
#stabs li a.inactive:hover {
    color: #5685bc;
    outline: none;
}

.scontainer {
    clear: both;
    width: 100%;
}

/*
 * The theme never shipped Foundation's Reveal plugin, so these rules only ever
 * set the panel's colour and width - nothing hid it. Every .reveal-modal
 * therefore rendered as visible page content, which is why the distributor
 * enquiry form appeared behind the tab content. Hidden by default here, and
 * opened by the handler in js/functions.js.
 */
.reveal-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    box-sizing: border-box;
    width: 300px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 20px;
    background: #fff !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, .3);
}

.reveal-modal.is-open {
    display: block;
}

.reveal-modal-bg {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: rgba(0, 0, 0, .45);
}

.reveal-modal-bg.is-open {
    display: block;
}

.reveal-modal .close-reveal-modal {
    position: absolute;
    top: 6px;
    right: 12px;
    font-size: 22px;
    line-height: 1;
    color: #666;
    text-decoration: none;
    cursor: pointer;
}

article {
    float: left;
    width: 100%;
    padding: 5px 15px 10px;
    box-sizing: border-box;
    background: #fff;
}


#custom-bg {
    margin: 15px 0px;
}

/*
 * The global `img` rule caps width at 100% but never sets height: auto, so an
 * image whose width attribute exceeds its column would keep the attribute's
 * height and distort. Pairing them here lets the browser derive the aspect
 * ratio from the attributes and hold the hero's space before it decodes.
 */
#custom-bg img {
    max-width: 100%;
    height: auto;
}

/*
 * The hero matches the text column rather than the full card.
 *
 * .fullcontent is width: 70% with 1% padding-right and is content-box, so its
 * text measures 70% of the article width; the hero was spanning the whole
 * 1294px and overhanging the column by nearly 400px.
 */
#custom-bg {
    width: 70%;
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
Article right-hand rail (.articleSide, cpost.php)

One wrapper around the contents list and the promo stack, so the column is a
single box instead of two floats finding their own way down the page.

It is placed above the hero in cpost.php and floated right. That ordering is
what lets it start level with the hero: #custom-bg is a block, it claims its
own line, and a float that comes after a block begins below it - which is why
the rail used to start only once the image had ended.

.labcritics-toc belongs to the TOC plugin and arrives by JS, inserted directly
before .articleBar. Because .articleBar now lives in here, the list lands in
here too. Both carry their own `width: 28%; float: left` for the old layout,
overridden below - two classes beats the single-class originals, so load order
between the plugin sheet and this file does not matter.
--------------------------------------------------------------------------- */
.articleSide {
    float: right;
    width: 28%;
    box-sizing: border-box;
    margin: 2em 0 1em 0;
}

.articleSide .articleBar,
.articleSide .labcritics-toc {
    width: 100%;
    float: none;
    margin: 0 0 16px;
}

/*
 * .articleBar used to be a float, and a float contains its own floated
 * children. Dropping the float to stack it in the rail took that away, so the
 * promos and the references card - all of which float - escaped and the box
 * collapsed from 4845px to 26px, losing its padding and background with it.
 * flow-root restores the containment without putting the float back; the same
 * fix the events and tools promos already use.
 */
.articleSide .articleBar {
    display: flow-root;
}

.articleSide > *:last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 860px) {
    /*
     * Source order puts the rail before the article so it can float level with
     * the hero. Stacked on a phone that would read as ads and a contents list
     * ahead of the piece itself, so the article becomes a flex column here and
     * the children are ordered explicitly.
     *
     * Explicitly, rather than just pushing the rail last: last would drop it
     * below the author bio, and a table of contents at the very bottom of the
     * page is no use to anyone. These numbers reproduce the stacking order the
     * page had before the rail moved. The decorative .corner span and the
     * clear div keep order 0 and sort ahead of everything, which is where the
     * first already was and the second costs nothing at zero height.
     */
    article.with-brdr2 {
        display: flex;
        flex-direction: column;
    }

    article.with-brdr2 > .headline { order: 1; }
    article.with-brdr2 > #custom-bg { order: 2; }
    article.with-brdr2 > .fullcontent { order: 3; }
    article.with-brdr2 > .articleSide { order: 4; }
    article.with-brdr2 > .lc-share { order: 5; }
    article.with-brdr2 > .author-bio { order: 6; }

    .articleSide {
        float: none;
        width: 100%;
        margin: 0 0 1em;
    }

    #custom-bg {
        width: 100%;
    }
}


.textSec {
    float: left;
    width: 100%;
}

.textSec h1 {
    font-weight: 300;
    margin-top: 0.8em;
}

.video-frame {
    float: left;
    width: 35%;
}

.video-frame iframe {
    float: right;
}

.termsCond {
    padding: 20px;
}

#compareA {
    width: 45.5%;
    float: left;
    margin: 1%;
    padding: 1%;
    background: #fff;
    margin-top: 6px;
    border-radius: 3px;
    position: relative;
    display: block;
    height: auto;
    min-height: 200px;
    border: 1px solid #f3f3f3;
    font-size: 13px;
    margin-bottom: 9px;
}

#compareA h2 {
    font-weight: 300;
    margin-top: 3px;
    text-align: center;
    margin-bottom: 21px;
}

#compareA table {
    background: #f5f5f5;
}

#compareA table tr td {
    font-size: 15px;
    text-align: center;
}

#sectionB h3 {
    margin-top: 0px;
    font-size: 15px;
    font-weight: 500;
}

.comprHead {
    width: 100%;
    float: left;
    border-bottom: 1px solid #e9e9e9;
    margin-bottom: 22px;
    background: #f7f7f7;
}

.comprHead h1 {
    margin-top: 9px;
    padding-left: 15px;
    font-weight: 300;
    margin-bottom: 13px;
}

.sideNav {
    width: 100%;
    float: left;
    margin-bottom: 16px;
    margin-top: 17px;
}

.markerly-icon {
    display: none !important;
}

.breadcrumbs {
    font-size: 12px;
    margin: 16px;
}

.events {
    width: 98.4%;
}

.button-event {
    float: right;
    width: auto;
    border: 1px solid var(--lc-border);
    padding: 2px 10px;
    text-align: center;
    bottom: 0px;
    font-size: 11px;
    letter-spacing: 1px;
    background: #109af8;
    color: #fff;
    margin-right: 3px;
}

p.date {
    font-size: 12px;
    color: #545454b3;
    font-weight: 500;
    text-transform: uppercase;
}

.page-header {
    width: 94%;
    height: 28px;
    max-width: none;
    margin: 1em 2.4% 1em;
    background-color: #e2e2e2;
    padding: 1%;
    border-left: 3px solid var(--lc-blue);
}

.search .post-thumbnail,
.archive .post-thumbnail {
    float: left;
    width: 16%;
    margin-right: 3%;
}

.search .entry-header,
.archive .entry-header {
    width: 80%;
    float: left;
}

.search .entry-summary,
.archive .entry-summary {
    float: left;
    margin: 0px;
    padding: 0px !important;
    width: 78%;
    font-size: 13px;
}

@media screen and (max-width: 43.75em) {
    .articleDiv {
        width: 95%;
        display: block;
    }
    .morePosts {
        float: none;
        width: 97%;
    }
    .content-area {
        padding-top: 0px;
    }
    .floating-header {
        width: 100%;
        margin: 0px auto;
    }
    .fixed-footer {
        float: left;
        position: relative;
    }
    #sectionA {
        width: 96%;
        float: left;
    }
    #sectionB {
        float: left;
        width: 95%;
        margin-left: 1.5%;
    }
    .tabs li {
        width: 100%;
        font-size: 10px;
    }
    .tab-content {
        width: 99.2%;
        margin-left: 0px !important;
        padding: 1%;
    }

    .ptitle {
        width: 100%;
        display: block;
    }
    .prod-logo {
        width: 10%;
        float: left;
    }

    .prod-details {
        width: 100%;
        float: left;
    }
    .desc-title {
        font-size: 14px;
    }

    .prod-details .pbadge {
        width: 100%;
        float: left;
    }

    .prod-details .labcritics-votes-wrap {
        display: block;
    }

    .prod-details .labcritics-upvote-buttons,.prod-details .labcritics-downvote-buttons {
        display: inline-flex;
        transition: border-color 0.2s;
        width: 48%;
    }
    .productTable {
        font-size: 12px;
    }

    .tool-content-area {
        width: 100%;
        display: block;
    }

    .full-desc {
        font-size: 20px;
        width: 100%;
        padding: 1% 1% 0% 0%;
    }

    .lc-tab-container {
        display: inline-flex;

        width: 100%;
    }
    .lc-tab-item {
        padding: 10px 16px;
        font-size: 14px;
        width: 25%;
    }
    .lc-content-area {
        width: 100%;
        box-sizing: border-box;
        font-size: 15px;
    }

    .tool-content-area .sidebar {
        width: 100%;
        float: left;
    }

}


.marginzero {
    margin: 0px !important;
}

.form-full-story .header-fiend {
    font-size: 16px;
    line-height: 1.5;
}

@media screen and (max-width:980px) {
    .panel-row-style-wide-grey {
        background: #32a346 url(http://localhost/nai/wp-content/uploads/2016/02/ipad.png) no-repeat 77.5% -16%;
    }
}

/* Author Bio Box */
.author-bio {
    display: flex;
    gap: 20px;
    padding: 20px;
    margin: 30px 0;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fafafa;
}
.author-bio .author-avatar img {
    border-radius: 50%;
}
.author-bio .author-info {
    flex: 1;
}
.author-bio .author-name {
    margin: 0 0 6px;
    font-size: 16px;
}
.author-bio .author-name a {
    color: var(--lc-text);
    text-decoration: none;
}
.author-bio .author-name a:hover {
    color: var(--lc-accent);
}
.author-bio .author-description {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.5;
    color: #555;
}
.author-bio .author-link {
    font-size: 13px;
    color: var(--lc-accent);
    text-decoration: none;
}
.author-bio .author-link:hover {
    text-decoration: underline;
}


/* Related Articles */
.related-articles {
    margin: 30px 0;
    padding: 25px 0 0;
    border-top: 1px solid #e0e0e0;
}
.related-articles h3 {
    font-size: 18px;
    margin: 0 0 18px;
    color: var(--lc-text);
}
.related-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.related-article-item a {
    text-decoration: none;
    color: inherit;
    display: block;
}
.related-article-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}
.related-article-item h4 {
    font-size: 15px;
    margin: 10px 0 4px;
    line-height: 1.4;
    color: var(--lc-text);
}
.related-article-item a:hover h4 {
    color: var(--lc-accent);
}
.related-article-date {
    font-size: 12px;
    color: #888;
}
@media screen and (max-width: 768px) {
    .related-articles-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .related-article-item img {
        height: 180px;
    }
}

/* ---------------------------------------------------------------------------
Labs Reach promo block (inc/promo-labsreach.php)

Rendered at ~190px in article sidebars and ~1100px on the home page, at the
same viewport width, so media queries cannot tell the two apart. Everything
scales with container query units instead.

Each fluid property is preceded by a static fallback: if `cqi` is unsupported
the fluid declaration is dropped and the compact values stand, which is a valid
layout in its own right.
--------------------------------------------------------------------------- */
/* Placement wrappers, 2026-09-07.

.labsreach-promo floats, so each host needs a block that contains it. Without
one the promo escapes its parent's padding box: on the events archive it would
sit on .aboutus-new's bottom border, and in the tools rail the "Browse by
category" card would ride up alongside it. flow-root establishes the context
without the clearfix pseudo-element the rest of this file uses.

They also clear. A flow-root box may not overlap a float, so it shrinks into
whatever horizontal space the float leaves - and .toolSide .articleBar is a
100%-wide float, which left the tools promo measuring 0px wide against the right
edge of the rail. Clearing drops it below the alerts block, where it belongs. */
.eventsPromo {
    display: flow-root;
    clear: both;
    margin-top: 26px;
}

/* Matches the .articleBar / .toolSideCard gutter directly above and below it. */
.toolSidePromo {
    display: flow-root;
    clear: both;
    margin: 2em 0 1em 1%;
}

.labsreach-promo {
    container-type: inline-size;
    container-name: lrpromo;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    float: left;
    width: 100%;
    /* .ad-full is a two-column grid; span it (the .adBlock class used to do this) */
    grid-column: 1 / -1;
    margin: 0;
    text-align: left;
    /* Brand mint gradient. The Labs Reach wordmark is near-black artwork, so the
       backdrop stays light to keep the logo and heading high-contrast. */
    background:
        radial-gradient(115% 135% at 88% 8%, rgba(2, 195, 154, 0.30) 0%, rgba(2, 195, 154, 0) 58%),
        linear-gradient(135deg, #f2fbf7 0%, #ddf3ea 46%, #c4e9dc 100%);
}

.labsreach-promo__inner {
   position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    height: 100%;
    gap: 10px;
    gap: clamp(9px, 1.4cqi, 14px);
    padding: 14px;
    padding: clamp(11px, 2.2cqi, 13px);
    min-height: 0;
}

/* Oversized watermark ring, clipped by the card — depth without an image. */
.labsreach-promo__inner::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: -18%;
    bottom: -34%;
    width: 170px;
    width: clamp(110px, 21cqi, 230px);
    height: 170px;
    height: clamp(110px, 21cqi, 230px);
    border: 20px solid rgba(2, 195, 154, 0.13);
    border-width: clamp(14px, 2.3cqi, 24px);
    border-radius: 50%;
    pointer-events: none;
}

.labsreach-promo__body {
    position: relative;
    z-index: 1;
}

.labsreach-promo__title {
    margin: 0 0 3px;
    margin-bottom: clamp(4px, 0.5cqi, 4px);
    max-width: 34em;
    color: var(--lc-green-dark);
    font-weight: 600;
    font-size: 17px;
    font-size: clamp(15px, 4.2cqi, 24px);
    line-height: 1.3;
    letter-spacing: -0.015em;
    text-transform: none;
}

.labsreach-promo__lead {
    margin: 0;
    max-width: 32em;
    color: #3f544c;
    font-size: 13px;
    font-size: clamp(12.5px, 1.9cqi, 14.5px);
    line-height: 1;
    width: 70%;
}

.labsreach-promo__footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    gap: clamp(10px, 1.8cqi, 24px);
}

/* Logo — bottom left */
.labsreach-promo__logo {
    display: block;
    min-width: 0;
    padding: 0;
    line-height: 0;
    transition: opacity 0.15s ease;
}

.labsreach-promo__logo img {
    display: block;
    width: 96px;
    width: clamp(76px, 16cqi, 124px);
    height: auto;
    max-width: 100%;
}

.labsreach-promo__logo:hover,
.labsreach-promo__logo:focus {
    opacity: 0.72;
}

/* Arrow — bottom right corner.
   The supplied icon carries its own squircle container, so the link itself is
   unstyled; colour and motion are applied to the SVG through currentColor. */
.labsreach-promo__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--lc-blue);
    line-height: 0;
    text-decoration: none;
    transition: color 0.18s ease;
    width: 30px;
}

.labsreach-promo__arrow {
    display: block;
    width: 40px;
    width: clamp(34px, 6.4cqi, 46px);
    height: 40px;
    height: clamp(34px, 6.4cqi, 46px);
    transition: transform 0.18s ease;
}

.labsreach-promo__cta:hover,
.labsreach-promo__cta:focus {
    color: var(--lc-green);
    text-decoration: none;
}

.labsreach-promo__cta:hover .labsreach-promo__arrow,
.labsreach-promo__cta:focus .labsreach-promo__arrow {
    transform: translate(2px, -2px);
}

.labsreach-promo__cta:focus-visible {
    outline: 2px solid var(--lc-green-dark);
    outline-offset: 4px;
    border-radius: 30%;
}

@media (prefers-reduced-motion: reduce) {
    .labsreach-promo__cta,
    .labsreach-promo__arrow,
    .labsreach-promo__logo {
        transition: none;
    }
    .labsreach-promo__cta:hover .labsreach-promo__arrow,
    .labsreach-promo__cta:focus .labsreach-promo__arrow {
        transform: none;
    }
}


/* ---------------------------------------------------------------------------
ACHEMA 2027 banner (inc/promo-achema.php)

A supplied square creative shown in two rails: the home page sidebar stack,
under EVENTS, and .articleBar on articles, under the Labs Reach promo.

float/clear are here for .articleBar. That column floats its children, and the
block directly above this one - .labsreach-promo - is a 100%-wide float, so an
uncleared box shrinks into the space the float leaves and measures 0px wide.
That is exactly how the tools rail placement failed on 2026-09-07; .refCard
below carries the same pair for the same reason. Inside .sidebarTop both
declarations are inert: it is a flex container, and float and clear do not
apply to flex items.
--------------------------------------------------------------------------- */
.achemaPromo {
    clear: both;
    float: left;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
}

/* .sidebarTop spaces its children with gap: 17px; the article rail has no
   such mechanism, so the offset is added only there. */
.articleBar .achemaPromo {
    margin-top: 18px;
}

.achemaPromo__link {
    display: block;
    /* The image is the only child; without this its inline descender leaves a
       few px of white between the artwork and the border. */
    line-height: 0;
    border: 1px solid var(--lc-border);
    /* Matches the creative's own backdrop, so the box does not flash white
       against the dark artwork while the file is still arriving. */
    background: #0b1b33;
    transition: border-color 0.18s ease;
}

.achemaPromo__link:hover,
.achemaPromo__link:focus {
    border-color: var(--lc-blue);
}

.achemaPromo__link:focus-visible {
    outline: 2px solid var(--lc-blue);
    outline-offset: 2px;
}

.achemaPromo__img {
    display: block;
    width: 100%;
    height: auto;
}

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


/* ---------------------------------------------------------------------------
Promoted event ribbon (inc/event-promoted.php)

Drawn on two listing surfaces: the EVENTS box in the home sidebar and the TEC
list view on /upcoming-events/. The single event page has no thumbnail to carry
a corner ribbon and uses .lc-event__badge--promoted in css/events.css instead.

It lives here rather than in css/events.css because that file only loads on
events views, and the home sidebar is not one.

The band is a single pseudo-element rotated across the corner and clipped by the
image box's own overflow, so no wrapper element is needed. That is what lets the
list view - whose markup belongs to the plugin - produce the identical ribbon
from nothing but a class on the card.

Geometry: --run is how far along each edge the band crosses. The band must be
centred on the box's diagonal or it lands crooked, which is what the two calc()
offsets maintain - top and left both resolve to run/2 at the band's centre.
--------------------------------------------------------------------------- */
.lc-event--promoted .img-event,
.lc-event--promoted .tribe-events-calendar-list__event-featured-image-wrapper {
    position: relative;
    overflow: hidden;
}

.lc-event--promoted .img-event::before,
.lc-event--promoted .tribe-events-calendar-list__event-featured-image-wrapper::before {
    content: "Promoted";
    position: absolute;
    z-index: 2;
    top: calc(var(--lc-ribbon-run) / 2 - var(--lc-ribbon-depth) / 2);
    left: calc(var(--lc-ribbon-run) / 2 - var(--lc-ribbon-width) / 2);
    width: var(--lc-ribbon-width);
    transform: rotate(-45deg);
    background: var(--lc-blue);
    color: #fff;
    text-align: center;
    font-size: var(--lc-ribbon-font);
    font-weight: 700;
    line-height: var(--lc-ribbon-depth);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 1px 3px rgba(15, 36, 52, 0.35);
    pointer-events: none;
}

/* Home sidebar: the image slot is only ~84x73, so the band is scaled to clear
   the corner without swallowing the thumbnail. */
.lc-event--promoted .img-event {
    --lc-ribbon-run: 46px;
    --lc-ribbon-depth: 13px;
    --lc-ribbon-width: 110px;
    --lc-ribbon-font: 7px;
}

/* List view: a much larger image, so the band can take its full size. */
.lc-event--promoted .tribe-events-calendar-list__event-featured-image-wrapper {
    --lc-ribbon-run: 78px;
    --lc-ribbon-depth: 19px;
    --lc-ribbon-width: 160px;
    --lc-ribbon-font: 10px;
}

/*
 * No thumbnail, no ribbon - TEC's featured-image partial returns before it
 * emits a wrapper, and 24 of the 100 published events have no artwork. Those
 * cards never receive has-post-thumbnail, so the flag falls back to a badge
 * beside the title rather than disappearing.
 */
.lc-event--promoted:not(.has-post-thumbnail) .tribe-events-calendar-list__event-title::before {
    content: "Promoted";
    display: inline-block;
    margin-right: 8px;
    padding: 2px 8px;
    vertical-align: middle;
    background: var(--lc-blue);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------------------------
Advertise page — responsive fixes (template-advertise.php)
--------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
WP core block: fixed-layout table override
--------------------------------------------------------------------------- */
.wp-block-table .has-fixed-layout {
    table-layout: fixed;
    width: 100%;
    line-height: 1.5;
    font-size: 75%;
}

/* ---------------------------------------------------------------------------
Advertise page — 2026 refresh (template-advertise.php)
--------------------------------------------------------------------------- */
.advertise-page {
    font-size: 100%;
    float: none;
    max-width: 1080px;
    margin: 20px auto;
}
.advertise-page .advertise-head {
    padding: 30px 0px 30px;
    text-align: left;
    background: #fff;
}
.advertise-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lc-green);
    background: rgba(10, 166, 110, 0.08);
    border: 1px solid rgba(10, 166, 110, 0.18);
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 14px;
}
.advertise-head h1 {
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-weight: 700;
    color: var(--lc-green-dark);
    margin: 0 0 12px;
}
.advertise-head p {
    font-size: 16px;
    line-height: 1.55;
    color: #4a5b55;
    margin: 0;
    max-width: 720px;
}

.advertise-hero {
    position: relative;
    height: 260px;
    background-position: center center;
    background-size: cover;
    background-color: var(--lc-blue);
}
.advertise-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(12, 30, 56, 0.35) 0%, rgba(12, 30, 56, 0) 60%);
    pointer-events: none;
}
.advertise-hero .hero-right {
    position: relative;
    z-index: 1;
    background: rgba(12, 152, 248, 0.9);
    color: #fff;
    height: 100%;
    width: 260px;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.35;
    text-align: right;
    padding: 22px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.advertise-page .aboutus-text {
    padding: 28px 32px 8px;
    background: #fff;
}
.advertise-section {
    padding: 20px 0 28px;
    border-bottom: 1px solid var(--lc-green-tint);
}
.advertise-section:last-of-type {
    border-bottom: 0;
}
.advertise-page .advertise-section h2 {
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    font-weight: 700;
    color: var(--lc-green-dark);
    margin: 0 0 12px;
}
.advertise-section > p,
.advertise-section__lead {
    font-size: 16px;
    line-height: 1.6;
    color: #4a5b55;
    margin: 0 0 20px;
    max-width: 760px;
}

.advertise-stats {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.advertise-stats li {
    background: linear-gradient(180deg, #fff 0%, #f7fbf9 100%);
    border: 1px solid #e3ece8;
    border-radius: 0;
    padding: 18px 16px;
    position: relative;
}
.advertise-stats li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 2px;
    background: var(--lc-green);
}
.advertise-stats strong {
    display: block;
    font-size: 24px;
    line-height: 1.15;
    color: var(--lc-green-dark);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}
.advertise-stats span {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: #5a6b65;
}

.advertise-breakup {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 8px;
    float: none;
}
.advertise-breakup__col {
    float: none;
    width: auto;
    background: #fbfcfc;
    border: 1px solid var(--lc-green-tint);
    padding: 18px 18px 14px;
    box-sizing: border-box;
}
.advertise-page .advertise-breakup__col h4 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lc-green);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--lc-green-tint);
}
.advertise-breakup__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.advertise-breakup__col ul li {
    font-size: 14px;
    line-height: 1.45;
    color: #4a5b55;
    padding: 6px 0;
    border-bottom: 1px dashed #eef2f0;
}
.advertise-breakup__col ul li:last-child {
    border-bottom: 0;
}

.advertise-mediakit {
    margin: 8px 0 28px;
}
.advertise-mediakit__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: var(--lc-green-dark);
    color: #fff;
    padding: 22px 26px;
    position: relative;
    overflow: hidden;
}
.advertise-mediakit__inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--lc-green) 0%, #14c98a 50%, var(--lc-green) 100%);
}
.advertise-mediakit__copy h3 {
    font-size: 20px;
    line-height: 1.25;
    color: #fff;
    font-weight: 700;
    margin: 0 0 4px;
}
.advertise-mediakit__copy p {
    font-size: 14px;
    line-height: 1.5;
    color: #b7c4bf;
    margin: 0;
    max-width: 520px;
}

.advertise-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--lc-green);
    color: #fff;
    padding: 12px 22px;
    border-radius: 0;
    border: 1px solid var(--lc-green);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.advertise-cta .dashicons {
    transition: transform 0.15s ease;
}
.advertise-cta:hover,
.advertise-cta:focus {
    background: #14c98a;
    border-color: #14c98a;
    color: #fff;
    text-decoration: none;
}
.advertise-cta:hover .dashicons,
.advertise-cta:focus .dashicons {
    transform: translateX(3px);
}

.advertise-contact {
    scroll-margin-top: 80px;
}
.advertise-page .formbox {
    background: #fbfcfc;
    border: 1px solid var(--lc-green-tint);
    padding: 22px;
    margin-top: 8px;
}

@media screen and (max-width: 960px) {
    .aboutus-new {
        float: none;
        margin: 10px;
        width: auto;
    }
    .aboutus-new .aboutus-head {
        width: auto;
        margin: 0;
        padding: 16px 18px;
    }
    .aboutus-head h1 {
        font-size: 26px;
    }
    .aboutus-head h2 {
        font-size: 24px;
    }
    .aboutus-hero {
        height: 220px;
        background-position: center center;
    }
    .aboutus-hero .hero-right {
        float: none;
        width: 100%;
        height: auto;
        box-sizing: border-box;
        text-align: center;
        line-height: 1.3;
        font-size: 18px;
        padding: 14px 16px;
    }
    .aboutus-text {
        padding: 18px;
        font-size: 16px;
    }
    .aboutus-text h2 {
        font-size: 22px;
        line-height: 1.3;
    }
    .aboutus-text .row {
        float: none;
        margin: 0 0 24px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px 20px;
    }
    .aboutus-text .col-md-4 {
        float: none;
        width: calc(50% - 10px);
        box-sizing: border-box;
    }
    .contactInner .aboutus-text {
        display: block;
    }
    .media-kit {
        text-align: center;
    }
    .media-kit a {
        display: inline-block;
    }
    .aboutus-text .formbox {
        margin-top: 20px;
    }

    .advertise-page .advertise-head {
        padding: 22px 20px;
    }
    .advertise-head h1 {
        font-size: 26px;
    }
    .advertise-hero {
        height: 220px;
    }
    .advertise-hero .hero-right {
        width: 100%;
        text-align: center;
        justify-content: center;
        font-size: 18px;
        padding: 16px;
    }
    .advertise-page .aboutus-text {
        padding: 22px 20px 6px;
    }
    .advertise-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .advertise-breakup {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .advertise-mediakit__inner {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

@media screen and (max-width: 600px) {
    .author-bio {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .aboutus-new {
        margin: 8px 6px;
        font-size: 100%;
    }
    .aboutus-new .aboutus-head {
        padding: 14px 14px;
    }
    .aboutus-head h1 {
        font-size: 22px;
        line-height: 1.25;
    }
    .aboutus-head h2 {
        font-size: 20px;
    }
    .aboutus-head p {
        font-size: 14px;
        line-height: 1.45;
    }
    .aboutus-hero {
        height: 160px;
    }
    .aboutus-hero .hero-right {
        font-size: 16px;
        padding: 12px;
    }
    .aboutus-text {
        padding: 14px;
        font-size: 15px;
    }
    .aboutus-text h2 {
        font-size: 19px;
        margin-top: 10px;
    }
    .aboutus-text h3,
    .aboutus-text h4 {
        font-size: 16px;
    }
    .aboutus-text ul {
        padding-left: 0px;
        margin: 0 0 14px;
    }
    .aboutus-text ul li {
        font-size: 14.5px;
        line-height: 1.5;
        margin-bottom: 4px;
    }
    .aboutus-text .row {
        display: block;
        margin-bottom: 16px;
    }
    .aboutus-text .col-md-4 {
        width: 100%;
        margin-bottom: 14px;
    }
    .aboutus-text .col-md-4 h4 {
        margin-bottom: 6px;
    }
    .media-kit a {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
    .aboutus-text .formbox {
        margin-top: 16px;
    }
    .aboutus-text .wpforms-form input,
    .aboutus-text .wpforms-form textarea,
    .aboutus-text .wpforms-form select {
        max-width: 100%;
        box-sizing: border-box;
    }

    .advertise-page .advertise-head {
        padding: 18px 16px;
    }
    .advertise-head h1 {
        font-size: 22px;
    }
    .advertise-head p {
        font-size: 14.5px;
    }
    .advertise-hero {
        height: 160px;
    }
    .advertise-hero .hero-right {
        font-size: 16px;
        padding: 12px;
    }
    .advertise-page .aboutus-text {
        padding: 18px 16px 4px;
    }
    .advertise-page .advertise-section h2 {
        font-size: 20px;
    }
    .advertise-section > p,
    .advertise-section__lead {
        font-size: 14.5px;
    }
    .advertise-stats {
        grid-template-columns: 1fr;
    }
    .advertise-breakup {
        grid-template-columns: 1fr;
    }
    .advertise-mediakit__inner {
        padding: 18px 18px;
    }
    .advertise-mediakit__copy h3 {
        font-size: 18px;
    }
    .advertise-cta {
        width: 100%;
        justify-content: center;
        padding: 12px 0px;
    }
    .advertise-page .formbox {
        padding: 16px;
    }
}


/* ---------------------------------------------------------------------------
 * 14.0 Author profiles & team page
 * (author.php, page-templates/template-team.php)
 * ------------------------------------------------------------------------ */

/* Avatar with an initials fallback behind it. Several accounts resolve to a
   Gravatar served with d=blank (a transparent image); the initials show
   through so those cards do not read as empty circles. */
.lc-avatar {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border-radius: 50%;
    background: var(--lc-green-tint);
    line-height: 0;
}

.lc-avatar__initials {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lc-green-dark);
    /* set per-size below; a % here would resolve against the inherited
       font-size, not the avatar box */
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}

.lc-avatar__img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* ---- Archive and team page layout ---- */

/*
 * Twenty Fourteen reserves a sidebar track with
 * `.site-content { margin-right: 29.04761904% }` (see the min-width: 1008px
 * block above). These templates all call get_sidebar(), but no widgets are
 * assigned to it, so nothing renders there - the margin was simply holding
 * ~507px of empty space open at 1744px wide and pushing the whole page
 * off-centre to the left. Same fault the events views had.
 *
 * Width is matched to `.container` (1470px, centred - the rule near the top of
 * this file), which is the band the site header, the footer and the home page
 * all sit on. It was previously matched to .articleDiv (1324px) for the author
 * archive only, which centred the page but on its own centre line: the profile
 * card's left border landed ~73px inside the LABCRITICS logo.
 *
 * `padding: 0` is load-bearing. With border-box, any horizontal padding insets
 * the card's *border* from the container edge - which is the misalignment this
 * rule exists to remove.
 *
 * Events views are unaffected: css/events.css overrides `.site-content` for the
 * tribe body classes at equal specificity and is enqueued with
 * `twentyfourteen-style` as a dependency, so it still loads last and wins.
 * search.php never had the bug - it renders .articleDiv with no .site-content.
 */
.author .site-content,
.archive .site-content,
.category .site-content,
.tag .site-content,
.date .site-content,
.site-content.team-page {
    box-sizing: border-box;
    width: 100%;
    max-width: 1470px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

/*
 * .container carries no gutter, so below its own width it runs edge to edge.
 * That is fine for the home page, whose sections have their own padding, but
 * these pages put a bordered card flush against the band edge, which would
 * touch the viewport. They take a small gutter the home page does not need.
 */
@media screen and (max-width: 1470px) {
    .author .site-content,
    .archive .site-content,
    .category .site-content,
    .tag .site-content,
    .date .site-content,
    .site-content.team-page {
        padding: 0 12px;
    }
}

/* ---- Author archive header ---- */

.author-profile {
    display: flex;
    align-items: flex-start;
    gap: 26px;
    box-sizing: border-box;
    margin: 0 0 30px;
    padding: 28px 30px;
    border: 1px solid var(--lc-blue-border);
    background:
        radial-gradient(120% 160% at 90% 0%, rgba(12, 152, 248, 0.14) 0%, rgba(12, 152, 248, 0) 62%),
        linear-gradient(150deg, #f7fbff 0%, #eef5fd 100%);
}

.author-profile__avatar .lc-avatar {
    width: 112px;
    height: 112px;
}

.author-profile__avatar .lc-avatar__initials {
    font-size: 38px;
}

.author-profile__body {
    flex: 1 1 auto;
    min-width: 0;
}

.author-profile__role {
    margin: 0 0 4px;
    color: var(--lc-blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.author-profile__name {
    margin: 0 0 10px;
    color: var(--lc-blue-ink);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
}

.author-profile__bio {
    max-width: 62ch;
    margin: 0 0 14px;
    color: #5f6b76;
    font-size: 15px;
    line-height: 1.6;
}

.author-profile__bio p {
    margin: 0 0 8px;
}

.author-profile__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.author-profile__count {
    color: #778289;
    font-weight: 600;
}

.author-profile__link {
    color: var(--lc-blue-ink);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(15, 36, 52, 0.28);
}

.author-profile__link:hover,
.author-profile__link:focus {
    color: var(--lc-blue);
    border-bottom-color: var(--lc-blue);
}

.author-posts-heading {
    margin: 0 0 14px;
    color: var(--lc-text);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---- Team page ---- */

.team-head {
    margin: 0 0 28px;
}

.team-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 12px;
    border: 1px solid var(--lc-blue-border);
    border-radius: 999px;
    background: var(--lc-blue-tint);
    color: var(--lc-blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.team-title {
    margin: 0 0 10px;
    color: var(--lc-blue-ink);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.team-intro {
    max-width: 68ch;
    color: #5f6b76;
    font-size: 16px;
    line-height: 1.6;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    /* cards size to their own content instead of stretching to the tallest
       in the row, which left large gaps beside authors with no bio */
    align-items: start;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.team-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    box-sizing: border-box;
    margin: 0;
    padding: 20px;
    border: 1px solid #e3e8e6;
    background: #fff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.team-card:hover {
    border-color: var(--lc-blue-border);
    box-shadow: 0 6px 20px rgba(12, 34, 51, 0.09);
}

.team-card__avatar {
    flex: 0 0 auto;
    line-height: 0;
    text-decoration: none;
}

.team-card__avatar .lc-avatar {
    width: 72px;
    height: 72px;
}

.team-card__avatar .lc-avatar__initials {
    font-size: 25px;
}

.team-card__body {
    min-width: 0;
}

.team-card__role {
    margin: 0 0 3px;
    color: var(--lc-blue);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.team-card__name {
    margin: 0 0 7px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

.team-card__name a {
    color: var(--lc-blue-ink);
    text-decoration: none;
}

.team-card__name a:hover,
.team-card__name a:focus {
    color: var(--lc-blue);
}

.team-card__bio {
    margin: 0 0 10px;
    color: #5f6b76;
    font-size: 13.5px;
    line-height: 1.5;
}

.team-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.team-card__count,
.team-card__social {
    color: #778289;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(119, 130, 137, 0.3);
}

.team-card__count:hover,
.team-card__social:hover,
.team-card__count:focus,
.team-card__social:focus {
    color: var(--lc-blue);
    border-bottom-color: var(--lc-blue);
}

@media screen and (max-width: 600px) {
    .author-profile {
        flex-direction: column;
        gap: 16px;
        padding: 20px;
    }
    .author-profile__avatar .lc-avatar {
        width: 84px;
        height: 84px;
    }
    .author-profile__avatar .lc-avatar__initials {
        font-size: 29px;
    }
    .author-profile__name {
        font-size: 24px;
    }
    .team-title {
        font-size: 26px;
    }
    .team-grid {
        grid-template-columns: 1fr;
    }
}

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


/* ---------------------------------------------------------------------------
 * 15.0 About page (page-templates/template-about.php)
 * ------------------------------------------------------------------------ */

.about-page {
    box-sizing: border-box;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

.about-hero {
    padding: 34px 0 26px;
    border-bottom: 1px solid #e3e8e6;
}

.about-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    padding: 5px 12px;
    border: 1px solid #cfe9df;
    border-radius: 999px;
    background: var(--lc-green-tint);
    color: var(--lc-green);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.about-hero h1 {
    max-width: 20em;
    margin: 0 0 14px;
    color: var(--lc-green-dark);
    font-size: 38px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.about-lede {
    max-width: 62ch;
    margin: 0;
    color: #3f544c;
    font-size: 17px;
    line-height: 1.6;
}

/* Stats band — figures are counted live, see labcritics_site_stats() */
.about-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    margin: 0 0 34px;
    padding: 0;
    border: 1px solid #cfe9df;
    background: #cfe9df;
    list-style: none;
}

.about-stats li {
    margin: 0;
    padding: 20px 16px;
    background:
        radial-gradient(120% 160% at 90% 0%, rgba(2, 195, 154, 0.16) 0%, rgba(2, 195, 154, 0) 65%),
        linear-gradient(150deg, #f5fbf8 0%, #eaf6f1 100%);
    text-align: center;
}

.about-stats strong {
    display: block;
    margin-bottom: 4px;
    color: var(--lc-green-dark);
    font-size: 27px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.about-stats span {
    display: block;
    color: #5a6b65;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.about-section {
    margin: 0 0 30px;
}

.about-section h2 {
    margin: 0 0 10px;
    color: var(--lc-green-dark);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
}

.about-section p {
    max-width: 68ch;
    margin: 0 0 12px;
    color: #3f544c;
    font-size: 15.5px;
    line-height: 1.68;
    text-align: left;
}

.about-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 14px;
}

.about-links a {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #cfe9df;
    background: #fff;
    color: var(--lc-green-dark);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.about-links a:hover,
.about-links a:focus {
    border-color: var(--lc-green);
    background: var(--lc-green-tint);
    color: var(--lc-green);
    text-decoration: none;
}

.about-prompts {
    max-width: 60ch;
    margin: 0 0 14px;
    padding-left: 20px;
    color: #3f544c;
    font-size: 15px;
    line-height: 1.7;
}

.about-prompts li {
    margin-bottom: 3px;
}

.about-contact-line {
    font-weight: 600;
}

.about-contact-line a {
    color: var(--lc-green);
}

.about-extra {
    padding-top: 20px;
    border-top: 1px solid #e3e8e6;
}

@media screen and (max-width: 600px) {
    .about-page {
        padding: 0 14px 30px;
    }
    .about-hero h1 {
        font-size: 27px;
    }
    .about-lede {
        font-size: 15.5px;
    }
    .about-stats {
        grid-template-columns: 1fr 1fr;
    }
    .about-stats strong {
        font-size: 22px;
    }
    .about-section h2 {
        font-size: 18px;
    }
}

/* ==========================================================================
   Entity cards - Similar Companies / Similar Tools
   Used by inc/card-helpers.php. Replaces the bare link lists that
   .similar-tool-item produced (that class never had any styling).
   ========================================================================== */

.lc-card-section {
	margin: 32px 0 8px;
	padding-top: 24px;
}

.lc-card-section__title {
	font-size: 20px;
	margin: 0 0 18px;
}

.lc-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}

.lc-card {
	display: flex;
	position: relative;
	align-items: flex-start;
	gap: 14px;
	padding: 14px;
	border: 1px solid #e3e7ea;
	border-radius: 8px;
	background: #fff;
	text-decoration: none;
	transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.lc-card:hover,
.lc-card:focus {
	border-color: #0c98f8;
	box-shadow: 0 4px 14px rgba(12, 152, 248, .13);
	transform: translateY(-2px);
	text-decoration: none;
}

.lc-card__media {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	border-radius: 6px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f4f7f9;
}

.lc-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Monogram stands in when an entity has no artwork - most of them. Hue comes
   from the entity name so a given company is always the same colour. */
.lc-card__monogram {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	color: hsl(var(--lc-hue, 205), 62%, 34%);
	background: hsl(var(--lc-hue, 205), 68%, 93%);
}

.lc-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.lc-card__title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: #1a1a1a;
}

.lc-card:hover .lc-card__title {
	color: #0c98f8;
}

.lc-card__tagline {
	font-size: 13px;
	line-height: 1.45;
	color: #5d6b77;
}

.lc-card__meta {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #8a97a3;
}

@media screen and (max-width: 480px) {
	.lc-card-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Grouped search results - see inc/search-groups.php
   ========================================================================== */

.lc-search-summary {
	margin: 4px 0 0;
	font-size: 13px;
	color: #6b7780;
}

.lc-search-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 24px;
	padding: 0 0 12px;
	border-bottom: 1px solid #e3e7ea;
}

.lc-search-tab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border: 1px solid #e3e7ea;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: #47535d;
	text-decoration: none;
	background: #fff;
	transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.lc-search-tab:hover,
.lc-search-tab:focus {
	border-color: #0c98f8;
	color: #0c98f8;
	text-decoration: none;
}

.lc-search-tab.is-active {
	background: #0c98f8;
	border-color: #0c98f8;
	color: #fff;
}

.lc-search-tab__count {
	display: inline-block;
	min-width: 20px;
	padding: 1px 6px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .07);
	font-size: 11px;
	line-height: 1.6;
	text-align: center;
}

.lc-search-tab.is-active .lc-search-tab__count {
	background: rgba(255, 255, 255, .25);
}

.lc-search-results {
	margin-bottom: 28px;
}

/* ==========================================================================
   Company profile hero - see single-company.php
   .prod-logo bakes a grid background + border into the CSS, so an empty logo
   renders as a placeholder box. Companies use this instead, with a monogram
   fallback (no company currently has a logo).
   ========================================================================== */

.company-hero {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 4px 0 22px;
	border-bottom: 1px solid #e8ecef;
	margin-bottom: 22px;
}

.company-hero__mark {
	flex: 0 0 78px;
	width: 78px;
	height: 78px;
	border-radius: 10px;
	overflow: hidden;
	background: #f4f7f9;
	display: flex;
	align-items: center;
	justify-content: center;
}

.company-hero__mark img { width: 100%; height: 100%; object-fit: contain; display: block; }

.company-hero__monogram {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	color: hsl(var(--lc-hue, 205), 62%, 34%);
	background: hsl(var(--lc-hue, 205), 68%, 93%);
}

.company-hero__body { flex: 1 1 auto; min-width: 0; }

.company-profile .company-hero__body .entry-title {
	margin: 0 0 10px;
	font-size: 30px;
	line-height: 1.2;
}

.company-chips {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin: 0 0 14px; padding: 0; list-style: none;
}

.company-chip {
	display: inline-block;
	padding: 4px 11px;
	border-radius: 999px;
	background: #eef2f5;
	font-size: 12px;
	font-weight: 600;
	color: #4a5762;
}

.company-chip--type { background: #e3f1fd; color: #0b6fb8; }

.company-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

.company-btn {
	display: inline-block;
	padding: 9px 20px;
	border-radius: 5px;
	background: #0c98f8;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background .18s ease;
}

.company-btn:hover, .company-btn:focus { background: #0b83d6; color: #fff; text-decoration: none; }

.company-link { font-size: 13px; font-weight: 600; color: #5d6b77; text-decoration: none; }
.company-link:hover { color: #0c98f8; }

.company-profile__description { font-size: 15px; line-height: 1.65; color: #2f3a42; }

@media screen and (max-width: 560px) {
	.company-hero__mark { flex-basis: 56px; width: 56px; height: 56px; }
	.company-hero__monogram { font-size: 24px; }
	.company-profile .company-hero__body .entry-title { font-size: 23px; }
}

/* Company profile: two-column like an article (.fullcontent + .articleBar). */
.company-profile .company-profile__main {
	width: 70%;
	float: left;
	box-sizing: border-box;
	padding-right: 1.5em;
}

.company-profile .company-hero { clear: both; }

.company-profile::after { content: ""; display: table; clear: both; }

@media screen and (max-width: 860px) {
	.company-profile .company-profile__main { width: 100%; float: none; padding-right: 0; }
	.company-profile .articleBar { width: 100%; float: none; }
}

/* ==========================================================================
   Search results - see search.php / inc/search-groups.php
   ========================================================================== */

.search-results .search-header {
	padding: 4px 0 18px;
	border-bottom: 1px solid #e8ecef;
	margin-bottom: 22px;
}

.search-header__title {
	margin: 0 0 4px;
	font-size: 26px;
	line-height: 1.25;
}

.search-header__title em { font-style: normal; color: #0c98f8; }

.search-header__count {
	margin: 0 0 16px;
	font-size: 13px;
	color: #6b7780;
}

.search-results .search-header .lc-search-tabs {
	margin: 0;
	padding: 0;
	border-bottom: 0;
}

.search-results .search-results__main { width: 70%; float: left; box-sizing: border-box; padding-right: 1.5em; }
.search-results::after { content: ""; display: table; clear: both; }

.search-results__list { display: flex; flex-direction: column; gap: 22px; }

.search-result { display: flex; gap: 16px; align-items: flex-start; }

.search-result__media {
	flex: 0 0 116px;
	width: 116px;
	border-radius: 6px;
	overflow: hidden;
	display: block;
}

.search-result__media img {
	width: 100%;
	height: 78px;
	object-fit: cover;
	display: block;
	border-radius: 6px;
}

.search-result__body { flex: 1 1 auto; min-width: 0; }

.search-result__title { margin: 0 0 5px; font-size: 17px; line-height: 1.35; }
.search-result__title a { color: #1a1a1a; text-decoration: none; }
.search-result__title a:hover { color: #0c98f8; }

.search-result__meta {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: #8a97a3;
	margin-bottom: 6px;
}

.search-result__excerpt { margin: 0; font-size: 14px; line-height: 1.55; color: #5d6b77; }

.search-results__cards { margin-bottom: 24px; }

.search-empty { padding: 20px 0 30px; color: #5d6b77; }

@media screen and (max-width: 860px) {
	.search-results .search-results__main { width: 100%; float: none; padding-right: 0; }
	.search-results .articleBar { width: 100%; float: none; }
}

@media screen and (max-width: 520px) {
	.search-result { gap: 12px; }
	.search-result__media { flex-basis: 84px; width: 84px; }
	.search-result__media img { height: 60px; }
}

/* ==========================================================================
   Footer - logo left, two nav rows, subscribe right
   ========================================================================== */

.lc-footer {
	display: grid;
	grid-template-columns: minmax(220px, 1.1fr) minmax(280px, 1.4fr) minmax(240px, 1fr);
	gap: 40px;
	align-items: start;
	padding: 44px 0 32px;
	text-align: left;
}

.lc-footer__logo { display: inline-block; margin-bottom: 16px; }
.lc-footer__logo img { width: 104px; height: auto; display: block; }

.lc-footer__blurb {
	margin: 0 0 16px;
	font-size: 13px;
	line-height: 1.6;
	color: #7c8894;
}

.lc-footer__social { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; }
.lc-footer__social a { color: #8a97a3; transition: color .18s ease; }
.lc-footer__social a:hover { color: #0c98f8; }
.lc-footer__social .dashicons { font-size: 20px; width: 20px; height: 20px; }

.lc-footer__nav { display: flex; flex-wrap: wrap; gap: 32px 44px; }
.lc-footer__row { min-width: 150px; }

.lc-footer__heading {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #46525d;
}

.lc-footer__nav ul { margin: 0; padding: 0; list-style: none; }
.lc-footer__nav li { margin-bottom: 9px; }

.lc-footer__nav a {
	font-size: 13.5px;
	color: #7c8894;
	text-decoration: none;
	transition: color .18s ease;
}

.lc-footer__nav a:hover { color: #0c98f8; }

.lc-subscribe { display: flex; gap: 8px; margin-bottom: 9px; }

.lc-subscribe__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 9px 12px;
	border: 1px solid #d9e0e6;
	border-radius: 5px;
	background: #fff;
	font-size: 13px;
	color: #2f3a42;
}

.lc-subscribe__input:focus { outline: none; border-color: #0c98f8; }

.lc-subscribe__btn {
	flex: 0 0 auto;
	padding: 9px 18px;
	border: 0;
	border-radius: 5px;
	background: #0c98f8;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background .18s ease;
}

.lc-subscribe__btn:hover { background: #0b83d6; }

.lc-footer__fineprint { margin: 0; font-size: 11.5px; color: #9aa5b0; }

.lc-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	align-items: center;
	padding: 18px 0 24px;
	border-top: 1px solid #e6eaee;
	font-size: 12.5px;
	color: #8a97a3;
}

.lc-footer__legal a { color: #7c8894; text-decoration: none; }
.lc-footer__legal a:hover { color: #0c98f8; }

@media screen and (max-width: 900px) {
	.lc-footer { grid-template-columns: 1fr 1fr; gap: 32px; }
	.lc-footer__subscribe { grid-column: 1 / -1; }
}

@media screen and (max-width: 600px) {
	.lc-footer { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; }
	.lc-footer__nav { gap: 24px 32px; }
}

/* ==========================================================================
   About page - wider container, and styling for editor-managed content.
   The mission / coverage / standards copy now lives in the page body so it is
   editable in WordPress, so these rules target .about-editable output rather
   than the template markup that used to hold it.
   ========================================================================== */

.about-page {
	max-width: 1180px;
	padding: 0 28px 48px;
}

/* .aboutus-new floats narrow for the legacy about layout; the new page fills
   its column instead. */
.about-page.aboutus-new {
	float: none;
	width: auto;
	margin: 10px auto;
	font-size: 100%;
}

.about-editable { font-size: 15.5px; line-height: 1.7; color: #2f3a42; }

.about-editable h2 {
	margin: 34px 0 12px;
	font-size: 23px;
	line-height: 1.25;
	color: #1a1a1a;
}

.about-editable h2:first-child { margin-top: 6px; }

.about-editable p { margin: 0 0 15px; }

.about-editable ul { margin: 0 0 16px 1.1em; padding: 0; }
.about-editable li { margin-bottom: 7px; }

/* Link rows keep the pill-button look the hardcoded .about-links had. */
.about-editable p.about-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 18px;
}

.about-editable p.about-links a {
	display: inline-block;
	padding: 8px 15px;
	border: 1px solid #d9e0e6;
	border-radius: 5px;
	font-size: 13.5px;
	font-weight: 600;
	color: #2f3a42;
	text-decoration: none;
	transition: border-color .18s ease, color .18s ease;
}

.about-editable p.about-links a:hover {
	border-color: #0c98f8;
	color: #0c98f8;
}

@media screen and (max-width: 700px) {
	.about-page { padding: 0 16px 36px; }
	.about-editable h2 { font-size: 20px; }
}

/* About page: contain the card around all content, and let the editable body
   use the full column. .aboutus-new is a floated legacy card, so without a
   block formatting context the content escaped its border after the stats. */
.about-page.aboutus-new {
	display: flow-root;
	overflow: visible;
}

.about-editable,
.about-editable p,
.about-editable ul {
	max-width: none;
}

.about-editable p { max-width: 90ch; }

/*
 * Breadcrumb trail. Set in Poppins at meta scale so it reads as navigation
 * rather than as the opening line of the article, and muted so it never
 * competes with the h1 directly beneath it. Wraps rather than overflows on
 * narrow screens, since tool and company names run long.
 */
.lc-breadcrumb {
    font-family: 'Poppins',"Poppins Fallback", sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: var(--lc-text-muted);
    margin: 0 0 10px;
    /* No vertical padding, ever. The trail sits inside containers that already
       provide their own inset (#sectionA carries padding: 1%), so any padding
       here reads as an unexplained gap above the h1. Spacing below the trail is
       the margin above, which keeps it collapsible against sibling margins. */
    padding-top: 0;
    padding-bottom: 0;
    word-wrap: break-word;
}

.lc-breadcrumb a {
    color: var(--lc-text-muted);
    text-decoration: none;
}

.lc-breadcrumb a:hover {
    color: var(--lc-blue);
    text-decoration: underline;
}

/* Yoast wraps the current page in <span class="breadcrumb_last">. It is not a
 * link, so it carries the darker ink to mark where the reader actually is. */
.lc-breadcrumb .breadcrumb_last {
    color: var(--lc-text-soft);
    font-weight: 500;
}

/*
 * Share row, sitting between the article body and the author bio. Outlined
 * circles rather than filled brand colours: two saturated blue chips at the end
 * of a long read pull harder than the author credit beside them, which is the
 * more useful thing to notice.
 */
.lc-share {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 20px;
    clear: both;
}

.lc-share__label {
    font-family: 'Poppins',"Poppins Fallback", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--lc-text);
}

.lc-share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--lc-text);
    border-radius: 50%;
    color: var(--lc-text);
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: background-color .15s, color .15s, border-color .15s;
}

.lc-share__btn:hover,
.lc-share__btn:focus {
    background-color: var(--lc-text);
    border-color: var(--lc-text);
    color: #fff;
    text-decoration: none;
}

/* Keyboard focus must stay visible once hover styling inverts the colours. */
.lc-share__btn:focus-visible {
    outline: 2px solid var(--lc-blue);
    outline-offset: 2px;
}

/* Letterforms are text, not icon-font glyphs - see labcritics_share_buttons(). */
.lc-share__glyph {
    font-family: 'Poppins',"Poppins Fallback", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.01em;
}


/* ---------------------------------------------------------------------------
Editorial calendar (page-templates/template-editorial-calendar.php)

Inherits the advertise page shell - width, head, hero, section rhythm, media
kit band, contact form - and adds only what the calendar itself needs.
--------------------------------------------------------------------------- */

/* Sponsorship tiers and always-on programmes share one card shape. */
.edcal-tiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 4px;
}
.edcal-tiers--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.edcal-tier {
    background: #fbfcfc;
    border: 1px solid var(--lc-green-tint);
    padding: 18px 18px 16px;
    box-sizing: border-box;
}
.edcal-page .edcal-tier h4 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lc-green);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--lc-green-tint);
}
.edcal-tier p {
    font-size: 14px;
    line-height: 1.5;
    color: #4a5b55;
    margin: 0;
}
.edcal-tier ul {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
}
.edcal-tier ul li {
    font-size: 13px;
    line-height: 1.45;
    color: #5a6b65;
    padding: 5px 0 5px 16px;
    position: relative;
    border-bottom: 1px dashed #eef2f0;
}
.edcal-tier ul li:last-child {
    border-bottom: 0;
}
.edcal-tier ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 6px;
    height: 1px;
    background: var(--lc-green);
}

/* Guide cards. */
.edcal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 4px;
}
.edcal-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e3ece8;
    border-top: 2px solid var(--lc-green);
    padding: 20px 20px 18px;
    box-sizing: border-box;
}
/* A booked guide should read as closed, not as an equally live option. */
.edcal-card--sold {
    border-top-color: var(--lc-border-light);
    background: #fbfcfc;
}

.edcal-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.edcal-card__date {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.edcal-card__month {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lc-green-dark);
}
.edcal-card__year {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #8a9994;
}

.edcal-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.edcal-badge--open {
    color: var(--lc-green);
    background: rgba(10, 166, 110, 0.08);
    border: 1px solid rgba(10, 166, 110, 0.22);
}
.edcal-badge--limited {
    color: #a86400;
    background: rgba(214, 141, 0, 0.09);
    border: 1px solid rgba(214, 141, 0, 0.24);
}
.edcal-badge--sold {
    color: var(--lc-text-muted);
    background: #f2f4f3;
    border: 1px solid var(--lc-border);
}

.edcal-page .edcal-card__title {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--lc-green-dark);
    margin: 0 0 8px;
}
.edcal-card__summary {
    font-size: 14px;
    line-height: 1.55;
    color: #4a5b55;
    margin: 0 0 16px;
}

.edcal-page .edcal-card__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lc-green);
    margin: 0 0 8px;
}
.edcal-card__topics {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}
.edcal-card__topics li {
    font-size: 13px;
    line-height: 1.45;
    color: #5a6b65;
    padding: 5px 0 5px 16px;
    position: relative;
    border-bottom: 1px dashed #eef2f0;
}
.edcal-card__topics li:last-child {
    border-bottom: 0;
}
.edcal-card__topics li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 6px;
    height: 1px;
    background: var(--lc-green);
}

.edcal-card__meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 16px;
    padding-top: 14px;
    border-top: 1px solid var(--lc-green-tint);
}
.edcal-card__meta dt {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8a9994;
    margin: 0 0 3px;
}
.edcal-card__meta dd {
    font-size: 13px;
    line-height: 1.35;
    color: var(--lc-green-dark);
    font-weight: 600;
    margin: 0;
}

/* Pushed to the card foot so CTAs line up across a row of uneven cards. */
.edcal-card__cta {
    display: inline-block;
    margin-top: auto;
    align-self: flex-start;
    background: var(--lc-green);
    color: #fff;
    border: 1px solid var(--lc-green);
    padding: 10px 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.edcal-card__cta:hover,
.edcal-card__cta:focus {
    background: #14c98a;
    border-color: #14c98a;
    color: #fff;
    text-decoration: none;
}
.edcal-card__cta:focus-visible {
    outline: 2px solid var(--lc-green-dark);
    outline-offset: 2px;
}
.edcal-card--sold .edcal-card__cta {
    background: transparent;
    color: var(--lc-green-dark);
    border-color: var(--lc-border);
}
.edcal-card--sold .edcal-card__cta:hover,
.edcal-card--sold .edcal-card__cta:focus {
    background: var(--lc-green-dark);
    border-color: var(--lc-green-dark);
    color: #fff;
}

/* Deadlines table. Scrolls in its own box rather than widening the page. */
.edcal-tablewrap {
    overflow-x: auto;
    border: 1px solid var(--lc-green-tint);
}
.edcal-table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
    margin: 0;
    background: #fff;
}
.edcal-table th,
.edcal-table td {
    text-align: left;
    font-size: 13px;
    line-height: 1.45;
    padding: 11px 14px;
    border-bottom: 1px solid #eef2f0;
    vertical-align: middle;
}
.edcal-table thead th {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lc-green);
    background: #fbfcfc;
    border-bottom: 1px solid var(--lc-green-tint);
    white-space: nowrap;
}
.edcal-table tbody th {
    font-weight: 600;
    color: var(--lc-green-dark);
}
.edcal-table tbody td {
    color: #5a6b65;
    white-space: nowrap;
}
.edcal-table tbody tr:last-child th,
.edcal-table tbody tr:last-child td {
    border-bottom: 0;
}

/*
 * Link through to the calendar from the advertise page. It sits on the dark
 * media-kit band, where the surrounding copy is muted #b7c4bf - so it needs its
 * own colour to read as a link at all.
 */
.advertise-mediakit__copy p a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.advertise-mediakit__copy p a:hover,
.advertise-mediakit__copy p a:focus {
    color: #14c98a;
    border-bottom-color: #14c98a;
    text-decoration: none;
}

@media screen and (max-width: 960px) {
    .edcal-tiers,
    .edcal-tiers--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .edcal-grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 600px) {
    .edcal-tiers,
    .edcal-tiers--four {
        grid-template-columns: 1fr;
    }
    .edcal-card {
        padding: 16px 16px 16px;
    }
    .edcal-card__meta {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .edcal-page .edcal-card__title {
        font-size: 17px;
    }
}


/* ---------------------------------------------------------------------------
Buying guides (page-templates/template-buying-guides.php)

Reader-facing counterpart to the editorial calendar. Shares the advertise page
shell and the .edcal-tier card, and adds a lighter three-up card for the guides
themselves - no deadlines, no CTA, because nothing is published yet.
--------------------------------------------------------------------------- */
.bguides-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 4px;
}
.bguides-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e3ece8;
    border-top: 2px solid var(--lc-green);
    padding: 20px 20px 18px;
    box-sizing: border-box;
}

.bguides-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.bguides-card__date {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.bguides-card__month {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lc-green-dark);
}
.bguides-card__year {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #8a9994;
}

/*
 * Muted rather than green: it repeats on every card, so it is a status note and
 * should not compete with the guide titles for attention.
 */
.bguides-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
    color: var(--lc-text-muted);
    background: #f2f4f3;
    border: 1px solid var(--lc-border);
}

.bguides-page .bguides-card__title {
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--lc-green-dark);
    margin: 0 0 8px;
}
.bguides-card__summary {
    font-size: 14px;
    line-height: 1.55;
    color: #4a5b55;
    margin: 0 0 16px;
}

.bguides-page .bguides-card__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lc-green);
    margin: 0 0 8px;
    padding-top: 14px;
    border-top: 1px solid var(--lc-green-tint);
}
.bguides-card__topics {
    list-style: none;
    padding: 0;
    margin: 0;
}
.bguides-card__topics li {
    font-size: 13px;
    line-height: 1.45;
    color: #5a6b65;
    padding: 5px 0 5px 16px;
    position: relative;
    border-bottom: 1px dashed #eef2f0;
}
.bguides-card__topics li:last-child {
    border-bottom: 0;
}
.bguides-card__topics li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 6px;
    height: 1px;
    background: var(--lc-green);
}

/* Links inside the "in the meantime" tiles. */
.bguides-page .edcal-tier p a {
    color: var(--lc-green);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(10, 166, 110, 0.35);
}
.bguides-page .edcal-tier p a:hover,
.bguides-page .edcal-tier p a:focus {
    color: #14c98a;
    border-bottom-color: #14c98a;
    text-decoration: none;
}

/*
 * The one advertiser route out of a reader page, so it is deliberately quiet -
 * a footnote under the content rather than a second call to action.
 */
.bguides-advertiser {
    font-size: 13px;
    line-height: 1.5;
    color: var(--lc-text-muted);
    margin: 4px 0 20px;
    padding-top: 16px;
    border-top: 1px solid var(--lc-green-tint);
}
.bguides-advertiser a {
    color: var(--lc-green);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(10, 166, 110, 0.35);
}
.bguides-advertiser a:hover,
.bguides-advertiser a:focus {
    color: #14c98a;
    border-bottom-color: #14c98a;
    text-decoration: none;
}

@media screen and (max-width: 960px) {
    .bguides-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 600px) {
    .bguides-grid {
        grid-template-columns: 1fr;
    }
    .bguides-card {
        padding: 16px;
    }
}

/*
 * Summaries vary in length, which left the "what it covers" rule at a different
 * height on every card. Grid stretches the cards to a common height, so letting
 * the summary absorb the slack lines the lists up across a row.
 */
.bguides-card__summary {
    flex-grow: 1;
}

/*
 * .edcal-tier is shared by both guide pages, but its heading rule was scoped to
 * .edcal-page, so the tiles on /buying-guides/ fell back to the theme's default
 * h4 and rendered as full-size dark headings. Scope it to the shared card
 * instead - the page class was never doing useful work here.
 */
.edcal-page .edcal-tier h4,
.bguides-page .edcal-tier h4 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lc-green);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--lc-green-tint);
}


/* ---------------------------------------------------------------------------
Guide decks and the full pipeline listing
--------------------------------------------------------------------------- */

/* Deck under a guide title, on both the calendar cards and the reader cards. */
.edcal-card__subtitle,
.bguides-card__subtitle {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--lc-green);
    margin: -4px 0 8px;
}

/*
 * The pipeline is 37 items, so it is a dense list rather than more cards - at
 * card size it would run several screens and bury the dated schedule above it.
 */
.edcal-cluster {
    margin: 0 0 28px;
}
.edcal-cluster:last-child {
    margin-bottom: 4px;
}
.edcal-page .edcal-cluster__name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lc-green);
    margin: 0 0 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--lc-green-tint);
}
.edcal-cluster__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(10, 166, 110, 0.1);
    border: 1px solid rgba(10, 166, 110, 0.2);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--lc-green);
}
.edcal-cluster__blurb {
    font-size: 14px;
    line-height: 1.55;
    color: #4a5b55;
    margin: 0 0 12px;
    max-width: 760px;
}

.edcal-pipeline {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #e3ece8;
}
.edcal-pipe {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid #eef2f0;
}
.edcal-pipe:last-child {
    border-bottom: 0;
}
.edcal-pipe:nth-child(even) {
    background: #fbfcfc;
}
.edcal-pipe__main {
    min-width: 0;
}
.edcal-page .edcal-pipe__title {
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--lc-green-dark);
    margin: 0 0 3px;
}
.edcal-pipe__subtitle {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--lc-green);
    margin: 0 0 4px;
}
.edcal-pipe__note {
    font-size: 13px;
    line-height: 1.5;
    color: #5a6b65;
    margin: 0;
}

/* Already on the dated calendar above - green, so the eye can pair the two. */
.edcal-badge--scheduled {
    color: var(--lc-green);
    background: rgba(10, 166, 110, 0.08);
    border: 1px solid rgba(10, 166, 110, 0.22);
}
/* Undated. Neutral, because "no date yet" is not a lesser product. */
.edcal-badge--planning {
    color: var(--lc-text-muted);
    background: #f2f4f3;
    border: 1px solid var(--lc-border);
}

@media screen and (max-width: 600px) {
    .edcal-pipe {
        flex-direction: column;
        gap: 8px;
    }
}


/* ---------------------------------------------------------------------------
Editorial calendar - "Reserve a Guide"

The form shipped at ~990px tall: 17px labels, 50px inputs, a 200px textarea and
every field stacked full width, so the last thing a convinced buyer saw was a
wall of empty boxes. This pairs it with an aside answering "what happens if I
send this", and compresses the form itself to roughly half its height.

Scoped to .edcal-page throughout - the same form renders on /advertise/ and on
other pages, and must keep its existing styling there.
--------------------------------------------------------------------------- */
.edcal-reserve__grid {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/*
 * Light tint rather than another dark panel: the media-kit band directly above
 * is already dark green, and two heavy blocks in a row flatten the hierarchy.
 */
.edcal-reserve__aside {
    background: #fbfcfc;
    border: 1px solid var(--lc-green-tint);
    padding: 20px 20px 16px;
    box-sizing: border-box;
}
.edcal-page .edcal-reserve__aside h4 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lc-green);
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--lc-green-tint);
}

/* Counter rather than list-style, so the numerals can carry brand colour. */
.edcal-reserve__steps {
    list-style: none;
    counter-reset: lc-step;
    padding: 0;
    margin: 0 0 16px;
}
.edcal-reserve__steps li {
    counter-increment: lc-step;
    position: relative;
    padding: 0 0 12px 30px;
    font-size: 13px;
    line-height: 1.5;
    color: #5a6b65;
}
.edcal-reserve__steps li:last-child {
    padding-bottom: 0;
}
.edcal-reserve__steps li::before {
    content: counter( lc-step );
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba( 10, 166, 110, 0.1 );
    border: 1px solid rgba( 10, 166, 110, 0.22 );
    color: var(--lc-green);
    font-size: 11px;
    font-weight: 700;
}
.edcal-reserve__steps strong {
    color: var(--lc-green-dark);
    font-weight: 600;
}

.edcal-reserve__direct {
    font-size: 13px;
    line-height: 1.5;
    color: #5a6b65;
    margin: 0 0 10px;
    padding-top: 14px;
    border-top: 1px solid var(--lc-green-tint);
}
.edcal-reserve__direct a {
    color: var(--lc-green);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba( 10, 166, 110, 0.35 );
}
.edcal-reserve__direct a:hover,
.edcal-reserve__direct a:focus {
    color: #14c98a;
    border-bottom-color: #14c98a;
    text-decoration: none;
}
.edcal-reserve__note {
    font-size: 12px;
    line-height: 1.45;
    color: var(--lc-text-muted);
    margin: 0;
}

.edcal-page .formbox {
    background: #fff;
    border: 1px solid #e3ece8;
    padding: 20px;
    margin-top: 0;
}

/*
 * Ninja Forms wraps each field in a custom <nf-field> element, which is inline
 * by default - that is the grid row, not .nf-field-container.
 */
.edcal-page .formbox nf-fields-wrap {
    display: grid;
    grid-template-columns: repeat( 2, minmax(0, 1fr) );
    column-gap: 16px;
}
.edcal-page .formbox nf-field {
    display: block;
    grid-column: 1 / -1;
}

/*
 * Name and email share a row. Written with :has() so it keys off the field type
 * rather than a position - where :has() is unsupported the fields simply stay
 * full width, which is the layout as it was.
 */
.edcal-page .formbox nf-field:has( > .textbox-container:not( .recaptcha-container ):not( .submit-container ) ),
.edcal-page .formbox nf-field:has( > .email-container ) {
    grid-column: span 1;
}

.edcal-page .formbox .nf-field-container {
    margin-bottom: 14px;
}
.edcal-page .formbox .nf-field-label {
    margin: 0 0 5px;
}
.edcal-page .formbox .nf-field-label label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lc-green-dark);
    margin: 0;
    line-height: 1.3;
}
.edcal-page .formbox .ninja-forms-req-symbol {
    color: var(--lc-green);
}

.edcal-page .formbox .ninja-forms-field {
    height: 42px;
    padding: 9px 12px;
    font-size: 14px;
    line-height: 1.4;
    background: #fff;
    border: 1px solid #dfe7e4;
    border-radius: 0;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.edcal-page .formbox textarea.ninja-forms-field {
    height: auto;
    min-height: 104px;
    resize: vertical;
}
.edcal-page .formbox .ninja-forms-field:focus {
    border-color: var(--lc-green);
    box-shadow: 0 0 0 2px rgba( 10, 166, 110, 0.12 );
    outline: none;
}

/* Submit inherits the page's CTA styling rather than the plugin's grey slab. */
.edcal-page .formbox .submit-container .ninja-forms-field {
    width: auto;
    height: auto;
    padding: 12px 26px;
    background: var(--lc-green);
    border: 1px solid var(--lc-green);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}
.edcal-page .formbox .submit-container .ninja-forms-field:hover,
.edcal-page .formbox .submit-container .ninja-forms-field:focus {
    background: #14c98a;
    border-color: #14c98a;
    box-shadow: none;
}

/* The plugin's own success and error states, brought into the palette. */
.edcal-page .formbox .nf-error .ninja-forms-field {
    border-color: #d64545;
}
.edcal-page .formbox .nf-error-msg {
    font-size: 12px;
    line-height: 1.4;
    color: #d64545;
    margin-top: 4px;
}
.edcal-page .formbox .nf-response-msg {
    font-size: 14px;
    line-height: 1.55;
    color: var(--lc-green-dark);
}

@media screen and (max-width: 960px) {
    .edcal-reserve__grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 600px) {
    .edcal-page .formbox nf-fields-wrap {
        grid-template-columns: 1fr;
    }
    .edcal-page .formbox nf-field {
        grid-column: 1 / -1;
    }
    .edcal-page .formbox {
        padding: 16px;
    }
}

/*
 * "RECAPTCHA V2" is the plugin's internal field name, not a label anyone needs -
 * the widget explains itself. Hidden visually, still announced to screen readers
 * via the label element the plugin ties to the field.
 */
.edcal-page .formbox .recaptcha-container .nf-field-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect( 0, 0, 0, 0 );
    white-space: nowrap;
    border: 0;
}

/*
 * Tier and aside headings moved from h4 to h3 so the outline no longer jumps
 * h2 -> h4. The old rules keyed off the element, so they are restated against
 * the class - which also stops the styling depending on a heading level again.
 */
.edcal-page .edcal-tier__name,
.bguides-page .edcal-tier__name,
.edcal-page .edcal-reserve__title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lc-green);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--lc-green-tint);
}
.edcal-page .edcal-reserve__title {
    margin-bottom: 14px;
}

/* Links inside the always-on tiles, matching the reader page's tile links. */
.edcal-page .edcal-tier p a {
    color: var(--lc-green);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba( 10, 166, 110, 0.35 );
}
.edcal-page .edcal-tier p a:hover,
.edcal-page .edcal-tier p a:focus {
    color: #14c98a;
    border-bottom-color: #14c98a;
    text-decoration: none;
}

/* The new reciprocal link sits inside a section lead. */
.edcal-page .advertise-section__lead a {
    color: var(--lc-green);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba( 10, 166, 110, 0.35 );
}
.edcal-page .advertise-section__lead a:hover,
.edcal-page .advertise-section__lead a:focus {
    color: #14c98a;
    border-bottom-color: #14c98a;
    text-decoration: none;
}


/* ---------------------------------------------------------------------------
Enquire buttons - cards and pipeline rows
--------------------------------------------------------------------------- */

/*
 * The card button now reads just "Enquire" and sits bottom-right. margin-top
 * stays auto so it still pins to the foot of an uneven card; align-self moves
 * it to the trailing edge.
 */
.edcal-card__cta {
    align-self: flex-end;
    padding: 8px 16px;
    font-size: 11px;
}

/*
 * Badge over button, both hugging the right edge. margin-left keeps the pair
 * clear of a long title before the row wraps.
 */
.edcal-pipe__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}

/*
 * Outline rather than solid: there are 52 of these, and 52 filled green
 * buttons would read as the loudest thing on the page and drown the ten guides
 * that actually have dates.
 */
.edcal-pipe__cta {
    align-self: auto;
    margin-top: 0;
    padding: 6px 14px;
    font-size: 10px;
    background: transparent;
    color: var(--lc-green);
    border-color: rgba( 10, 166, 110, 0.4 );
}
.edcal-pipe__cta:hover,
.edcal-pipe__cta:focus {
    background: var(--lc-green);
    border-color: var(--lc-green);
    color: #fff;
}

/* Each button says only "Enquire", so the topic name is carried for screen
   readers - 62 identical link names would otherwise be unusable out of context. */
.edcal-page .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect( 0, 0, 0, 0 );
    white-space: nowrap;
    border: 0;
}

@media screen and (max-width: 600px) {
    /* The row stacks here, so let the pair sit left with the text. */
    .edcal-pipe__side {
        flex-direction: row;
        align-items: center;
        margin-left: 0;
    }
}


/* ---------------------------------------------------------------------------
Editorial calendar - "Recommend a Custom Topic"

Sits directly after the pipeline, which is where a buyer who has just read 52
titles without finding theirs is looking for a way out.
--------------------------------------------------------------------------- */
.edcal-custom__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: 20px;
    align-items: start;
}

.edcal-custom__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.edcal-custom__list li {
    position: relative;
    padding: 8px 0 8px 18px;
    font-size: 14px;
    line-height: 1.55;
    color: #4a5b55;
    border-bottom: 1px dashed #eef2f0;
}
.edcal-custom__list li:last-child {
    border-bottom: 0;
}
.edcal-custom__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    width: 8px;
    height: 1px;
    background: var(--lc-green);
}
.edcal-custom__list strong {
    color: var(--lc-green-dark);
    font-weight: 600;
}

/*
 * Green-tinted rather than dark: the media-kit band further down is already a
 * dark slab, and this should read as a sidebar to the list, not compete with it.
 */
.edcal-custom__panel {
    background: var(--lc-green-tint);
    border: 1px solid rgba( 10, 166, 110, 0.18 );
    padding: 20px;
    box-sizing: border-box;
}
.edcal-page .edcal-custom__panel h3 {
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--lc-green-dark);
    margin: 0 0 10px;
}
.edcal-custom__panel p {
    font-size: 13px;
    line-height: 1.55;
    color: #4a5b55;
    margin: 0 0 12px;
}

/* The independence promise is the load-bearing sentence here, so it is set
   apart rather than buried as a third paragraph. */
.edcal-custom__caveat {
    padding-top: 12px;
    border-top: 1px solid rgba( 10, 166, 110, 0.22 );
    color: #5a6b65;
}

.edcal-custom__cta {
    align-self: auto;
    margin-top: 4px;
    padding: 11px 22px;
    font-size: 12px;
}

@media screen and (max-width: 960px) {
    .edcal-custom__grid {
        grid-template-columns: 1fr;
    }
}


/* ---------------------------------------------------------------------------
Jobs page (page-templates/template-jobs.php)

Uses the contact page's shell, so most of the styling is inherited. What is here
adjusts the split for content that is listings rather than a form, and cleans up
the legacy .jobs rules that assumed a full-width float.
--------------------------------------------------------------------------- */

/*
 * Contact splits 50/50 because a form needs the room. Job listings are the
 * substance here and the panel is a short aside, so the weight is reversed.
 */
.jobs-page .left-box {
    width: 62%;
}
.jobs-page .right-box {
    width: 38%;
    align-self: flex-start;
}

.jobs-page .aboutus-head {
    margin-bottom: 6px;
}
.jobs-page__standfirst {
    font-size: 17px;
    line-height: 1.55;
    color: var(--lc-text-soft);
    margin: 6px 0 0;
    max-width: 700px;
}

/* Was float:left with a hard border-bottom; inside a flex column it just needs
   separating from the next listing. */
.jobs-page .jobs {
    float: none;
    width: auto;
    border-bottom: 0;
    margin: 0 0 34px;
    padding-bottom: 6px;
}
.jobs-page .jobs:last-child {
    margin-bottom: 8px;
}
.jobs-page .jobs h2 {
    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--lc-text);
    margin: 0 0 6px;
}
.jobs-page .jobs p {
    width: auto;
    font-size: 15px;
    line-height: 1.65;
    color: var(--lc-text-soft);
    margin: 0 0 16px;
}

/* Position and location read as data, so they are set as a pair of labelled
   fields rather than bolded run-in text. */
.jobs__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin: 0 0 18px;
    padding: 14px 0;
    border-top: 1px solid var(--lc-border);
    border-bottom: 1px solid var(--lc-border);
}
.jobs__meta dt {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lc-text-muted);
    margin: 0 0 3px;
}
.jobs__meta dd {
    font-size: 15px;
    font-weight: 600;
    color: var(--lc-text);
    margin: 0;
}

.jobs-page .jobs__subhead {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lc-text-muted);
    margin: 0 0 10px;
}
.jobs__duties {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}
.jobs__duties li {
    position: relative;
    padding: 6px 0 6px 18px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--lc-text-soft);
}
.jobs__duties li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15px;
    width: 8px;
    height: 1px;
    background: var(--lc-blue);
}

/* Was float:right, which dropped it out of flow and left it hanging under the
   listing above. */
.jobs-page .jobs__apply {
    display: inline-block;
    float: none;
    margin: 0;
    padding: 11px 22px;
    background: var(--lc-blue);
    border: 1px solid var(--lc-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.jobs-page .jobs__apply:hover,
.jobs-page .jobs__apply:focus {
    background: var(--lc-blue-hover);
    border-color: var(--lc-blue-hover);
    color: #fff;
    text-decoration: none;
}

.jobs-page .right-box h3 {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--lc-text);
    margin: 0 0 10px;
}
.jobs-page .right-box p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--lc-text-soft);
    margin: 0 0 14px;
}
.jobs-page__email a {
    font-size: 15px;
    font-weight: 600;
    color: var(--lc-blue);
    text-decoration: none;
    word-break: break-all;
}
.jobs-page__email a:hover,
.jobs-page__email a:focus {
    color: var(--lc-blue-hover);
    text-decoration: underline;
}

@media screen and (max-width: 782px) {
    /* .contactInner .aboutus-text is inline-flex, so the columns have to be
       told to stack rather than squeeze. */
    .jobs-page .aboutus-text {
        display: block;
    }
    .jobs-page .left-box,
    .jobs-page .right-box {
        width: auto;
    }
    .jobs-page .right-box {
        margin: 1.5em 0 0;
    }
}

/*
 * .right-box carries 4% padding on a content-box, so its 38% width rendered at
 * ~46% and squeezed the listings. Border-box makes the declared widths mean what
 * they say.
 */
.jobs-page .left-box,
.jobs-page .right-box {
    box-sizing: border-box;
}
.jobs-page .left-box {
    width: 66%;
}
.jobs-page .right-box {
    width: 34%;
    padding: 26px 24px;
}


/* ---------------------------------------------------------------------------
Secondary page shell (inc/page-shell.php)

One container, one heading treatment, one prose measure for every secondary
page. The shell reuses .articleDiv and .with-brdr, so most of the look is
inherited - these rules only add the standfirst and the body typography.
--------------------------------------------------------------------------- */
.lc-page {
    padding: 1em 30px 34px;
}

.lc-page .aboutus-head {
    padding-bottom: 14px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--lc-border);
}

.lc-page__standfirst {
    font-size: 17px;
    line-height: 1.55;
    color: var(--lc-text-soft);
    margin: 8px 0 0;
    max-width: 760px;
}

/*
 * Body copy is capped at a readable measure rather than the full container
 * width. The pages on the default template were running the full column and
 * arriving justified, which on a narrow viewport opens rivers between words.
 */
.lc-page__body {
    max-width: 820px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--lc-text);
    text-align: left;
}

.lc-page__body p,
.lc-page__body ul,
.lc-page__body ol {
    text-align: left;
    margin: 0 0 16px;
}
.lc-page__body ul,
.lc-page__body ol {
    padding-left: 1.15em;
}
.lc-page__body li {
    margin-bottom: 7px;
}

.lc-page__body h2 {
    font-size: 23px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--lc-text);
    margin: 32px 0 10px;
}
.lc-page__body h3 {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--lc-text);
    margin: 26px 0 8px;
}
.lc-page__body h2:first-child,
.lc-page__body h3:first-child {
    margin-top: 0;
}

.lc-page__body a {
    color: var(--lc-blue);
    text-decoration: none;
    border-bottom: 1px solid rgba( 12, 152, 248, 0.35 );
}
.lc-page__body a:hover,
.lc-page__body a:focus {
    color: var(--lc-blue-hover);
    border-bottom-color: var(--lc-blue-hover);
    text-decoration: none;
}

/* Vendor pages carry the company logo as a featured image; keep it from
   stretching to the full measure. */
.lc-page__body .post-thumbnail img,
.lc-page__body img {
    max-width: 100%;
    height: auto;
}

.lc-page__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 18px;
    font-size: 14px;
}
.lc-page__body th,
.lc-page__body td {
    text-align: left;
    padding: 9px 12px;
    border-bottom: 1px solid #eef2f0;
}

.lc-page .edit-link {
    display: block;
    margin-top: 18px;
    font-size: 13px;
}

/* FAQ keeps its question/answer rhythm, now inside the shared shell. */
.lc-page--faq .faqQ h3 {
    font-size: 19px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--lc-text);
    margin: 26px 0 6px;
}
.lc-page--faq .faqQ h3:first-child {
    margin-top: 0;
}
.lc-page--faq .faqQ p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--lc-text-soft);
    max-width: 820px;
    margin: 0 0 6px;
}

/* The terms page renders the editor content through its own wrapper. */
.lc-page--prose .termsCond,
.lc-page--prose .termsCond .blog-post {
    float: none;
    width: auto;
    max-width: 820px;
}
.lc-page--prose .termsCond {
    font-size: 16px;
    line-height: 1.7;
}

@media screen and (max-width: 782px) {
    .lc-page {
        padding: 1em 18px 26px;
    }
    .lc-page__standfirst {
        font-size: 15px;
    }
}


/* ===========================================================================
 * Tools of the Trade - directory page (page-templates/template-tools.php)
 *
 * Added 2026-08-10 with the page redesign. Uses the --lc-* tokens so the page
 * inherits brand colour changes rather than hard-coding hex values.
 * ======================================================================== */

/*
 * White canvas. The theme paints .site #f7f7f7 site-wide; this page reads as a
 * reference document rather than a feed, so it gets a flat white ground and
 * relies on rules and spacing for structure instead of panel fills.
 */
body.page-template-template-tools .site,
body.page-template-template-tools .site-content,
body.page-template-template-tools .main-content {
    background: #fff;
}

.toolsPage {
    padding: 0 10px 30px;
    box-sizing: border-box;
    background: #fff;
    /*
     * flow-root, not block: .toolsContent and .toolSide are both floated, so
     * this container had nothing to establish its height against and collapsed
     * to the hero. The white panel stopped under the filter row and the whole
     * directory below it sat on the page background, with the 30px bottom
     * padding landing in the wrong place. Same treatment .homeCard already
     * uses for its floated children.
     */
    display: flow-root;
}

/*
 * The site-wide corner-bracket motif (.with-brdr) was removed from .toolsContent
 * and .articleBar in the template: at 10px on a 1000px-wide panel the four ticks
 * read as rendering artefacts rather than framing. The motif is reused below on
 * .toolsCta, where the element is small enough for it to land as deliberate.
 */

/* --- Hero ---------------------------------------------------------------- */
.toolsHero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin: 18px 0 6px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--lc-border);
}

.toolsHero__main {
    flex: 1 1 460px;
    min-width: 0;
}

.toolsHero__title {
    margin: 0 0 8px;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 300;
    color: #414141;
}

.toolsHero__lead {
    margin: 0;
    max-width: 62em;
    color: var(--lc-text-soft);
    font-size: 14px;
    line-height: 1.55;
}

.toolsHero__stats {
    display: flex;
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 0 0 auto;
}

.toolsHero__stats li {
    text-align: left;
}

.toolsHero__stats strong {
    display: block;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 600;
    color: var(--lc-blue);
}

.toolsHero__stats span {
    display: block;
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--lc-text-muted);
}

/* --- Intro copy ---------------------------------------------------------- */
.toolsIntro {
    margin: 4px 0 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--lc-text);
}

.toolsIntro__heading {
    margin: 18px 0 6px;
    font-size: 16px;
    font-weight: 600;
    color: #414141;
}

.toolsIntro__heading:first-child {
    margin-top: 0;
}

.toolsIntro p {
    margin: 0 0 10px;
    max-width: 70em;
}

.toolsIntro__criteria {
    margin: 0;
    padding-left: 18px;
}

.toolsIntro__criteria li {
    margin-bottom: 5px;
    max-width: 68em;
}

/* --- Filter bar ---------------------------------------------------------- */
.toolsFilter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    margin: 0 0 14px;
    padding: 12px 14px;
    background: #f7f9fb;
    border: 1px solid var(--lc-border);
    border-radius: 3px;
}

.toolsFilter__group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.toolsFilter label {
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--lc-text-muted);
}

.toolsFilter select {
    min-width: 210px;
    max-width: 100%;
    height: 34px;
    padding: 4px 8px;
    font-size: 13px;
    background: #fff;
    border: 1px solid var(--lc-border-light);
    border-radius: 2px;
}

.toolsFilter__reset {
    margin-bottom: 7px;
    font-size: 12px;
    color: var(--lc-blue);
}

.toolsCount {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--lc-text-muted);
}

/* --- Result rows --------------------------------------------------------- */
/*
 * The old .pCat rendered the category as vertical text pinned to the row edge,
 * clipped to 80% height, so it showed as truncated fragments ("PUBLI", "ANALY").
 * Categories now sit inline under the title as ordinary tags.
 */
.toolsContent .prodSingle {
    align-items: center;
    padding: 12px 4px;
    gap: 14px;
}

.toolsContent .prodImg {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    margin: 0;
    background: #fff;
    border: 1px solid var(--lc-border);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toolsContent .prodImg img {
    max-width: 88%;
    max-height: 88%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.toolsContent .prodImg--empty {
    background: #f2f6f9;
}

.toolsContent .prodImg--empty span {
    font-size: 24px;
    font-weight: 600;
    color: var(--lc-blue);
    opacity: 0.6;
}

.toolsContent .nonImg {
    width: auto;
    flex: 1 1 auto;
    float: none;
    padding: 0;
    min-width: 0;
}

.toolsContent .nonImg h4 {
    margin: 0 0 3px;
    font-size: 16px;
    line-height: 1.25;
}

/*
 * float/width are reset deliberately. `.nonImg p` (declared earlier, top level)
 * sets `float: left; width: 100%`, and a later `.nonImg p { display: none }`
 * hides descriptions entirely. The higher-specificity rules here restore the
 * text, but the inherited float still shunted the .prodMeta row beside the
 * floated paragraph and out over the sidebar - hence the explicit float: none
 * here and clear: both below.
 */
.toolsContent .prodDesc {
    display: block;
    float: none;
    width: auto;
    margin: 0 0 6px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--lc-text-soft);
}

.toolsContent .prodMeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    clear: both;
    width: 100%;
    box-sizing: border-box;
    gap: 6px;
}

.prodTag {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--lc-blue);
    background: #eef6fd;
    border-radius: 2px;
}

.prodTag:hover,
.prodTag:focus {
    background: var(--lc-blue);
    color: #fff;
    text-decoration: none;
}

.prodPrice {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--lc-text-muted);
    background: #f1f1f1;
    border-radius: 2px;
}

/* --- Buttons ------------------------------------------------------------- */
.toolsBtn {
    display: inline-block;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    background: var(--lc-blue);
    border-radius: 3px;
    text-align: center;
    transition: background 0.15s ease;
}

.toolsBtn:hover,
.toolsBtn:focus {
    background: var(--lc-blue-hover);
    color: #fff;
    text-decoration: none;
}

.toolsBtn--ghost {
    background: transparent;
    color: var(--lc-blue);
    border: 1px solid var(--lc-blue);
}

.toolsBtn--ghost:hover,
.toolsBtn--ghost:focus {
    background: var(--lc-blue);
    color: #fff;
}

.toolsBtn--lg {
    padding: 12px 26px;
    font-size: 14px;
}

.toolsBtn--block {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* --- Empty state --------------------------------------------------------- */
.toolsEmpty {
    padding: 26px 18px;
    text-align: center;
    background: #f7f9fb;
    border: 1px solid var(--lc-border);
    border-radius: 3px;
    font-size: 14px;
}

.toolsEmpty .toolsBtn {
    margin: 6px 4px 0;
}

/* --- Request-a-listing CTA ---------------------------------------------- */
/*
 * This is where the corner-bracket motif earns its place: a compact, bounded
 * block where two diagonal brackets frame the content instead of floating at
 * the edges of a full-width panel.
 */
.toolsCta {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 30px 0 10px;
    padding: 24px 26px;
    background: #f7fbff;
    border: 1px solid #dceaf6;
    border-radius: 3px;
}

.toolsCta::before,
.toolsCta::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    pointer-events: none;
}

.toolsCta::before {
    top: -1px;
    left: -1px;
    border-top: 2px solid var(--lc-blue);
    border-left: 2px solid var(--lc-blue);
}

.toolsCta::after {
    right: -1px;
    bottom: -1px;
    border-right: 2px solid var(--lc-blue);
    border-bottom: 2px solid var(--lc-blue);
}

.toolsCta__body {
    flex: 1 1 380px;
    min-width: 0;
}

.toolsCta__title {
    margin: 0 0 6px;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 600;
    color: #1d3d55;
}

.toolsCta__lead {
    margin: 0;
    max-width: 52em;
    font-size: 13.5px;
    line-height: 1.55;
    color: #3d5567;
}

.toolsCta__actions {
    flex: 0 0 auto;
    text-align: center;
}

.toolsCta__note {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--lc-text-muted);
}

/* --- Sidebar cards ------------------------------------------------------- */
.toolSideCard {
    margin: 2em 0 1em 1%;
    padding: 1em;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--lc-border);
    border-radius: 3px;
    font-size: 13px;
    color: #666;
}

.toolSideCard h3 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: #414141;
}

.toolSideCard p {
    margin: 0 0 10px;
    line-height: 1.5;
}

.toolSideCard--cta {
    background: #f3f9ff;
    border-color: #d8e8f5;
}

/* Editorial-standards card, sits directly under the CTA. */
.toolSideCriteria {
    margin: 0;
    padding: 0;
    list-style: none;
}

.toolSideCriteria li {
    position: relative;
    margin-bottom: 8px;
    padding-left: 13px;
    font-size: 12.5px;
    line-height: 1.5;
}

.toolSideCriteria li:last-child {
    margin-bottom: 0;
}

.toolSideCriteria li::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--lc-blue);
}

.toolSideCriteria strong {
    color: #414141;
}

/* Explanatory card at the foot of the column - quieter than the CTA above it. */
.toolSideCard--about {
    background: #fafafa;
}

.toolSideCard--about p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
}

.toolSideCats {
    margin: 0;
    padding: 0;
    list-style: none;
}

.toolSideCats li {
    border-bottom: 1px solid #f0f0f0;
}

.toolSideCats li:last-child {
    border-bottom: 0;
}

.toolSideCats a {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    font-size: 12.5px;
    color: var(--lc-text-soft);
}

.toolSideCats a:hover,
.toolSideCats a:focus {
    color: var(--lc-blue);
    text-decoration: none;
}

.toolSideCats span {
    color: var(--lc-text-muted);
    font-size: 11px;
}

/* --- Responsive ---------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    .toolsHero__stats {
        gap: 20px;
    }
}

@media screen and (max-width: 782px) {
    .toolsHero {
        align-items: flex-start;
    }

    .toolsHero__title {
        font-size: 24px;
    }

    .toolsFilter select {
        min-width: 0;
        width: 100%;
    }

    .toolsFilter__group {
        flex: 1 1 100%;
    }

    .toolsCta {
        padding: 18px;
    }

    .toolsCta__actions {
        flex: 1 1 100%;
        text-align: left;
    }

    .toolSideCard {
        margin-left: 0;
    }
}

@media screen and (max-width: 520px) {
    .toolsHero__stats {
        gap: 16px;
    }

    .toolsHero__stats strong {
        font-size: 19px;
    }

    .toolsContent .prodImg {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
    }
}


/* ---------------------------------------------------------------------------
Editorial calendar - "Recommend a Custom Topic"

Sits directly after the pipeline, which is where a buyer who has just read 52
titles without finding theirs is looking for a way out.
--------------------------------------------------------------------------- */
.edcal-custom__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: 20px;
    align-items: start;
}

.edcal-custom__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.edcal-custom__list li {
    position: relative;
    padding: 8px 0 8px 18px;
    font-size: 14px;
    line-height: 1.55;
    color: #4a5b55;
    border-bottom: 1px dashed #eef2f0;
}
.edcal-custom__list li:last-child {
    border-bottom: 0;
}
.edcal-custom__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    width: 8px;
    height: 1px;
    background: var(--lc-green);
}
.edcal-custom__list strong {
    color: var(--lc-green-dark);
    font-weight: 600;
}

/*
 * Green-tinted rather than dark: the media-kit band further down is already a
 * dark slab, and this should read as a sidebar to the list, not compete with it.
 */
.edcal-custom__panel {
    background: var(--lc-green-tint);
    border: 1px solid rgba( 10, 166, 110, 0.18 );
    padding: 20px;
    box-sizing: border-box;
}
.edcal-page .edcal-custom__panel h3 {
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--lc-green-dark);
    margin: 0 0 10px;
}
.edcal-custom__panel p {
    font-size: 13px;
    line-height: 1.55;
    color: #4a5b55;
    margin: 0 0 12px;
}

/* The independence promise is the load-bearing sentence here, so it is set
   apart rather than buried as a third paragraph. */
.edcal-custom__caveat {
    padding-top: 12px;
    border-top: 1px solid rgba( 10, 166, 110, 0.22 );
    color: #5a6b65;
}

.edcal-custom__cta {
    align-self: auto;
    margin-top: 4px;
    padding: 11px 22px;
    font-size: 12px;
}

@media screen and (max-width: 960px) {
    .edcal-custom__grid {
        grid-template-columns: 1fr;
    }
}


/* ===========================================================================
 * Tools of the Trade - visual refinement pass (2026-08-10)
 * Flat white ground, so hierarchy comes from type scale, rules and hover
 * feedback rather than stacked grey panels.
 * ======================================================================== */

/* Hero: heavier rule under the header, tighter stat block. */
.toolsPage .toolsHero {
    margin: 22px 0 0;
    padding-bottom: 20px;
    border-bottom: 2px solid #ededed;
}

.toolsPage .toolsHero__title {
    letter-spacing: -0.2px;
    color: #23303a;
}

.toolsPage .toolsHero__lead {
    font-size: 14.5px;
    color: #5a6b76;
}

.toolsPage .toolsHero__stats {
    padding: 2px 0 0;
    border-left: 1px solid #ededed;
    padding-left: 26px;
}

/* Content column: no panel, just breathing room. */
.toolsPage .toolsContent {
    padding-top: 22px;
    margin-bottom: 2.5em;
}

/* Filter bar: white with a rule, not a grey slab. */
.toolsPage .toolsFilter {
    background: #fff;
    border: 0;
    border-bottom: 1px solid #ededed;
    border-radius: 0;
    padding: 0 0 16px;
    margin-bottom: 16px;
}

.toolsPage .toolsFilter select {
    height: 36px;
    border-color: #dcdcdc;
    border-radius: 3px;
    color: #33414a;
}

.toolsPage .toolsFilter select:focus {
    outline: none;
    border-color: var(--lc-blue);
    box-shadow: 0 0 0 2px rgba(12, 152, 248, 0.14);
}

.toolsPage .toolsCount {
    margin-bottom: 4px;
    font-size: 12.5px;
}

/* Rows: hairline separators, hover tint, no boxes. */
.toolsPage .prodSingle {
    border-bottom: 1px solid #f0f0f0;
    padding: 14px 10px;
    margin: 0 -10px;
    border-radius: 3px;
    transition: background 0.14s ease;
}

.toolsPage .prodSingle:hover {
    background: #fafcfe;
}

.toolsPage .prodImg {
    border-color: #ececec;
    border-radius: 4px;
}

.toolsPage .prodImg--empty {
    background: #f6f9fb;
    border-style: solid;
}

.toolsPage .nonImg h4 a {
    color: #23303a;
}

.toolsPage .nonImg h4 a:hover,
.toolsPage .nonImg h4 a:focus {
    color: var(--lc-blue);
    text-decoration: none;
}

.toolsPage .prodDesc {
    color: #61707a;
}

/* Sidebar: consistent cards, accented headings, no double borders. */
.toolsPage .toolSideCard,
.toolsPage .articleBar {
    margin: 0 0 16px 1%;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 3px;
    box-shadow: none;
}

.toolsPage .toolSide {
    padding-top: 22px;
}

.toolsPage .toolSideCard h3 {
    position: relative;
    margin: 0 0 10px;
    padding-bottom: 8px;
    font-size: 14px;
    letter-spacing: 0.2px;
    color: #23303a;
    border-bottom: 1px solid #f0f0f0;
}

.toolsPage .toolSideCard h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 28px;
    height: 2px;
    background: var(--lc-blue);
}

/* The CTA card is the one deliberately tinted surface in the column. */
.toolsPage .toolSideCard--cta {
    background: #f7fbff;
    border-color: #dceaf6;
}

.toolsPage .toolSideCard--about {
    background: #fff;
}

.toolsPage .toolSideCard--about p {
    color: #61707a;
}

.toolsPage .toolSideCats a {
    padding: 7px 0;
}

.toolsPage .toolSideCats li {
    border-bottom-color: #f4f4f4;
}

/* Pagination sits on white, so give it room rather than a border. */
.toolsPage .pagination {
    padding: 18px 0 0;
}

.toolsPage .fz-pagination a,
.toolsPage .fz-pagination span {
    color: var(--lc-blue);
}

/* Buttons: slightly softer radius to match the flatter surfaces. */
.toolsPage .toolsBtn {
    border-radius: 3px;
    letter-spacing: 0.2px;
}

@media screen and (max-width: 782px) {
    .toolsPage .toolsHero__stats {
        padding-left: 0;
        border-left: 0;
    }

    .toolsPage .toolSideCard,
    .toolsPage .articleBar {
        margin-left: 0;
    }
}


/* ---------------------------------------------------------------------------
Jobs page (page-templates/template-jobs.php)

Uses the contact page's shell, so most of the styling is inherited. What is here
adjusts the split for content that is listings rather than a form, and cleans up
the legacy .jobs rules that assumed a full-width float.
--------------------------------------------------------------------------- */

/*
 * Contact splits 50/50 because a form needs the room. Job listings are the
 * substance here and the panel is a short aside, so the weight is reversed.
 */
.jobs-page .left-box {
    width: 62%;
}
.jobs-page .right-box {
    width: 38%;
    align-self: flex-start;
}

.jobs-page .aboutus-head {
    margin-bottom: 6px;
}
.jobs-page__standfirst {
    font-size: 17px;
    line-height: 1.55;
    color: var(--lc-text-soft);
    margin: 6px 0 0;
    max-width: 700px;
}

/* Was float:left with a hard border-bottom; inside a flex column it just needs
   separating from the next listing. */
.jobs-page .jobs {
    float: none;
    width: auto;
    border-bottom: 0;
    margin: 0 0 34px;
    padding-bottom: 6px;
}
.jobs-page .jobs:last-child {
    margin-bottom: 8px;
}
.jobs-page .jobs h2 {
    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--lc-text);
    margin: 0 0 6px;
}
.jobs-page .jobs p {
    width: auto;
    font-size: 15px;
    line-height: 1.65;
    color: var(--lc-text-soft);
    margin: 0 0 16px;
}

/* Position and location read as data, so they are set as a pair of labelled
   fields rather than bolded run-in text. */
.jobs__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin: 0 0 18px;
    padding: 14px 0;
    border-top: 1px solid var(--lc-border);
    border-bottom: 1px solid var(--lc-border);
}
.jobs__meta dt {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lc-text-muted);
    margin: 0 0 3px;
}
.jobs__meta dd {
    font-size: 15px;
    font-weight: 600;
    color: var(--lc-text);
    margin: 0;
}

.jobs-page .jobs__subhead {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lc-text-muted);
    margin: 0 0 10px;
}
.jobs__duties {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}
.jobs__duties li {
    position: relative;
    padding: 6px 0 6px 18px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--lc-text-soft);
}
.jobs__duties li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15px;
    width: 8px;
    height: 1px;
    background: var(--lc-blue);
}

/* Was float:right, which dropped it out of flow and left it hanging under the
   listing above. */
.jobs-page .jobs__apply {
    display: inline-block;
    float: none;
    margin: 0;
    padding: 11px 22px;
    background: var(--lc-blue);
    border: 1px solid var(--lc-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.jobs-page .jobs__apply:hover,
.jobs-page .jobs__apply:focus {
    background: var(--lc-blue-hover);
    border-color: var(--lc-blue-hover);
    color: #fff;
    text-decoration: none;
}

.jobs-page .right-box h3 {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--lc-text);
    margin: 0 0 10px;
}
.jobs-page .right-box p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--lc-text-soft);
    margin: 0 0 14px;
}
.jobs-page__email a {
    font-size: 15px;
    font-weight: 600;
    color: var(--lc-blue);
    text-decoration: none;
    word-break: break-all;
}
.jobs-page__email a:hover,
.jobs-page__email a:focus {
    color: var(--lc-blue-hover);
    text-decoration: underline;
}

@media screen and (max-width: 782px) {
    /* .contactInner .aboutus-text is inline-flex, so the columns have to be
       told to stack rather than squeeze. */
    .jobs-page .aboutus-text {
        display: block;
    }
    .jobs-page .left-box,
    .jobs-page .right-box {
        width: auto;
    }
    .jobs-page .right-box {
        margin: 1.5em 0 0;
    }
}

/*
 * .right-box carries 4% padding on a content-box, so its 38% width rendered at
 * ~46% and squeezed the listings. Border-box makes the declared widths mean what
 * they say.
 */
.jobs-page .left-box,
.jobs-page .right-box {
    box-sizing: border-box;
}
.jobs-page .left-box {
    width: 66%;
}
.jobs-page .right-box {
    width: 34%;
    padding: 26px 24px;
}

/*
 * Subscribe button in the tools sidebar. The theme leaves it inline, so the
 * final words of the blurb ran alongside - and under - the button. Given its
 * own line it also matches the "Request a listing" button in the card above.
 */
.toolsPage .articleBar .js-subscribe-modal {
    display: block;
    width: 100%;
    margin: 12px 0 0;
    padding: 9px 12px;
    box-sizing: border-box;
    border: 0;
    border-radius: 3px;
    line-height: 1.25;
    cursor: pointer;
}

.toolsPage .articleBar .js-subscribe-modal span {
    float: none;
    display: block;
    width: auto;
}


/* ---------------------------------------------------------------------------
FAQ (page-templates/template-faq.php)
--------------------------------------------------------------------------- */

/*
 * .contactInner .aboutus-text is inline-flex, which is right for the two-column
 * contact and jobs layouts and catastrophic anywhere else - it turned every FAQ
 * question and answer into a column of one long row. Any other page landing in
 * the shell now gets block flow back.
 */
.lc-page .aboutus-text {
    display: block;
}
.lc-page--contact .aboutus-text,
.jobs-page .aboutus-text {
    display: inline-flex;
}

.faq-list {
    max-width: 840px;
}

.faq-group {
    margin: 0 0 34px;
}
.faq-group:last-child {
    margin-bottom: 10px;
}
.lc-page--faq .faq-group__name {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lc-blue);
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--lc-border);
}

.faq-item {
    margin: 0 0 20px;
}
.faq-item:last-child {
    margin-bottom: 0;
}
.lc-page--faq .faq-item__q {
    font-size: 17px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--lc-text);
    margin: 0 0 6px;
}
.faq-item__a {
    font-size: 15px;
    line-height: 1.7;
    color: var(--lc-text-soft);
    margin: 0;
}
.faq-item__a a {
    color: var(--lc-blue);
    text-decoration: none;
    border-bottom: 1px solid rgba( 12, 152, 248, 0.35 );
}
.faq-item__a a:hover,
.faq-item__a a:focus {
    color: var(--lc-blue-hover);
    border-bottom-color: var(--lc-blue-hover);
    text-decoration: none;
}

.faq-more {
    max-width: 840px;
    margin: 8px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--lc-border);
    font-size: 15px;
    line-height: 1.6;
    color: var(--lc-text-soft);
}
.faq-more a {
    color: var(--lc-blue);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba( 12, 152, 248, 0.35 );
}
.faq-more a:hover,
.faq-more a:focus {
    color: var(--lc-blue-hover);
    border-bottom-color: var(--lc-blue-hover);
    text-decoration: none;
}


/* ---------------------------------------------------------------------------
Advertise page - "Ways to Work With Us"
--------------------------------------------------------------------------- */
.adv-options {
    display: grid;
    grid-template-columns: repeat( 3, minmax(0, 1fr) );
    gap: 16px;
    margin: 0 0 8px;
}

.adv-option {
    display: flex;
    flex-direction: column;
    background: #fbfcfc;
    border: 1px solid var(--lc-green-tint);
    border-top: 2px solid var(--lc-green);
    padding: 20px 20px 18px;
    box-sizing: border-box;
}

/*
 * Cost per lead is the commercially distinctive offer of the three, so it gets
 * the tinted treatment rather than sitting as a third identical card.
 */
.adv-option--highlight {
    background: var(--lc-green-tint);
    border-color: rgba( 10, 166, 110, 0.22 );
}

.adv-option__tag {
    display: inline-block;
    align-self: flex-start;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lc-green);
    background: rgba( 10, 166, 110, 0.09 );
    border: 1px solid rgba( 10, 166, 110, 0.2 );
    padding: 3px 9px;
    border-radius: 999px;
    margin-bottom: 12px;
}
.adv-option--highlight .adv-option__tag {
    background: #fff;
}

.advertise-page .adv-option h3 {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--lc-green-dark);
    margin: 0 0 10px;
}
.adv-option p {
    font-size: 14px;
    line-height: 1.6;
    color: #4a5b55;
    margin: 0 0 12px;
}
.adv-option p a {
    color: var(--lc-green);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba( 10, 166, 110, 0.35 );
}
.adv-option p a:hover,
.adv-option p a:focus {
    color: #14c98a;
    border-bottom-color: #14c98a;
    text-decoration: none;
}

/* margin-top:auto keeps the links aligned across cards of uneven copy. */
.adv-option__link {
    margin-top: auto;
    align-self: flex-start;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lc-green);
    text-decoration: none;
    border-bottom: 1px solid rgba( 10, 166, 110, 0.4 );
    padding-bottom: 2px;
}
.adv-option__link:hover,
.adv-option__link:focus {
    color: #14c98a;
    border-bottom-color: #14c98a;
    text-decoration: none;
}

/* Audience-breakdown headings moved h4 -> h3 to close the outline gap; the old
   rule keyed off the element, so it is restated against the class. */
.advertise-page .advertise-breakup__name {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lc-green);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--lc-green-tint);
}

/* The terms page content sits in a legacy .blog-post grid cell that carried a
   left inset, pushing it out of line with the heading above it. */
.lc-page--prose .termsCond .blog-post {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
}

@media screen and (max-width: 960px) {
    .adv-options {
        grid-template-columns: 1fr;
    }
}


/* ===========================================================================
 * Header / footer spacing adjustment (2026-08-12)
 * ======================================================================== */

/*
 * Trim the gap between the fixed header and the first block of page content.
 * The page wrappers each carried a 10px top margin; 4px keeps them clear of the
 * masthead without the dead band.
 */
#main.site-main > .container:first-child,
#main.site-main > .aboutus-new:first-child,
#main.site-main > .apps-content:first-child,
#main.site-main > #primary:first-child {
    margin-top: 4px;
}

.toolsPage .toolsHero {
    margin-top: 10px;
}



/* Article byline row: date/author left, categories right. */
.entry-meta__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 4px 10px;
    width: 100%;
}

/* auto margin keeps categories hard right without spreading the byline spans. */
.entry-meta__cats {
    margin-left: auto;
    text-align: right;
}

.entry-meta__cats a {
    color: var(--lc-blue);
}

.entry-meta__cats a:hover,
.entry-meta__cats a:focus {
    color: var(--lc-blue-hover);
    text-decoration: underline;
}

@media screen and (max-width: 600px) {
    .entry-meta__cats {
        margin-left: 0;
        text-align: left;
        width: 100%;
    }
}


/* ---------------------------------------------------------------------------
   "New" corner badge

   Marks a recently released tool. Driven by labcritics_tool_is_new(), which
   reads a `released_on` date and falls back to the post date.

   Absolutely positioned, so it never changes the height of a card or the
   alignment of the row it sits in - the tools directory is a list of fixed
   64px rows and a badge in the flow would push every one of them out. Both
   hosts already establish a containing block (.prodSingle was already
   position: relative; .lc-card is given it above).

   pointer-events: none keeps the badge from swallowing clicks meant for the
   card link underneath it.
--------------------------------------------------------------------------- */

.lc-new {
	position: absolute;
	z-index: 2;
	top: 8px;
	right: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 40px;
	border-radius: 3px;
	overflow: hidden;
	background: var(--lc-blue);
	color: #fff;
	line-height: 1;
	text-transform: uppercase;
	pointer-events: none;
}

.lc-new__label {
	display: block;
	padding: 3px 7px 2px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .09em;
}

/* The year sits on its own band so the two read as one stamp rather than as a
   label with a number stuck to it. */
.lc-new__year {
	display: block;
	width: 100%;
	padding: 2px 7px 3px;
	background: rgba(0, 0, 0, .22);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* The directory row is only 64px tall and its right edge is empty, so the
   badge tucks against the top-right without crowding the description. */
.toolsContent .prodSingle > .lc-new {
	top: 10px;
	right: 6px;
}

/* On a card the border-radius means a flush corner would clip, so it sits
   just inside. */
.lc-card > .lc-new {
	top: 10px;
	right: 10px;
}

/* Homepage tools row: the vote widget occupies the full right edge of the card
   (measured x1089-1250 on a card ending at 1250), so the badge is rendered
   inside the content block and anchors to that corner instead. No magic
   offset, and nothing shifts if the vote widget is restyled. */
.toolsRow .prodSingle .nonImg {
	position: relative;
}

.toolsRow .prodSingle .nonImg > .lc-new {
	top: 2px;
	right: 4px;
}

@media (max-width: 600px) {
	.lc-new {
		min-width: 34px;
	}

	.lc-new__label {
		font-size: 9px;
		padding: 2px 5px 1px;
	}

	.lc-new__year {
		font-size: 8.5px;
		padding: 1px 5px 2px;
	}
}

/* ---------------------------------------------------------------------------
   Events archive: country filter

   Sits in the views' components/filter-bar slot, above the list. Styled to
   match the tools directory filter rather than The Events Calendar's own
   controls, which are scoped under .tribe-common and would drag a second
   type scale into the page.
--------------------------------------------------------------------------- */

.lcEventFilter {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 18px;
	padding: 12px 14px;
	background: #f7f9fb;
	border: 1px solid var(--lc-border);
	border-radius: 3px;
}

.lcEventFilter__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--lc-text-muted);
	margin: 0;
}

.lcEventFilter__select {
	font-size: 14px;
	padding: 6px 10px;
	max-width: 100%;
	border: 1px solid var(--lc-border);
	border-radius: 3px;
	background: #fff;
	color: var(--lc-text);
}

.lcEventFilter__select:focus {
	outline: 2px solid var(--lc-blue);
	outline-offset: 1px;
}

.lcEventFilter__clear,
.lcEventFilter__go {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 5px 10px;
	border: 1px solid var(--lc-border);
	border-radius: 3px;
	background: #fff;
	color: var(--lc-blue);
	cursor: pointer;
}

.lcEventFilter__clear:hover,
.lcEventFilter__clear:focus {
	border-color: var(--lc-blue);
	text-decoration: none;
}

@media (max-width: 600px) {
	.lcEventFilter {
		gap: 8px;
		padding: 10px;
	}

	.lcEventFilter__select {
		flex: 1 1 100%;
	}
}

/* ---------------------------------------------------------------------------
   Category archives

   The template renders the same .homepost card as the home page, so cards need
   no styling of their own here - only a grid to sit in, and the float that
   card carries for the home page layout has to be neutralised or the grid
   cells collapse.
--------------------------------------------------------------------------- */

/* Horizontal padding sits on the container, not the header, so the header and
   the card grid below it share one left edge. */
.catArchive {
	max-width: 1324px;
	margin: 0 auto;
	padding: 0 24px 48px;
	background: #fff;
}

.catHeader {
	padding: 32px 0 26px;
	border-bottom: 1px solid var(--lc-border);
	margin-bottom: 26px;
}

.catHeader__title {
	font-size: 30px;
	line-height: 1.2;
	margin: 6px 0 0;
	color: var(--lc-text);
}

.catHeader__desc {
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--lc-text-soft);
}

.catHeader__count {
	margin: 10px 0 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--lc-text-muted);
}

.catGrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px 17px;
	/* Cards size to their own content. Left to stretch, every card in a row
	   takes the height of the longest headline in it, which on a mixed archive
	   left ~180px of white under the short ones. */
	align-items: start;
}

.catGrid .homepost {
	float: none;
	width: 100%;
}

/*
 * flow-root, not block: the card's inner span holds floated children and was
 * measuring 0 high, so the card had no content height of its own and only
 * looked right while the grid was stretching it. Establishing a block
 * formatting context makes it contain those floats, which is what lets
 * align-items: start above work instead of collapsing the cards.
 */
.catGrid .homepost > span {
	display: flow-root;
}

.catEmpty {
	padding: 30px 2px 50px;
	color: var(--lc-text-soft);
}

.catEmpty h2 {
	font-size: 20px;
	margin: 0 0 8px;
}

@media (max-width: 1000px) {
	.catGrid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 665px) {
	.catArchive {
		padding: 0 14px 32px;
	}

	.catGrid {
		grid-template-columns: 1fr;
	}

	.catHeader {
		padding: 22px 0 18px;
	}

	.catHeader__title {
		font-size: 24px;
	}
}

/* ---------------------------------------------------------------------------
   Comic modal

   Reuses the subscribe modal's .modal / .modal-content / .modal-header shell so
   both dialogs look like the same thing. Only the width and the body differ:
   a comic needs more room than a signup form, but not the whole viewport.
--------------------------------------------------------------------------- */

.comicModal .modal-content {
	width: 720px;
	max-width: 92%;
	padding: 0;
}

.comicModal .modal-header {
	padding: 14px 44px 14px 18px;
	text-align: left;
}

.comicModal .modal-header h2 {
	font-size: 16px;
	margin: 0;
	line-height: 1.3;
}

.comicModal .modal-header .close {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: #fff;
}

.comicModal .modal-header .close:hover,
.comicModal .modal-header .close:focus {
	opacity: .75;
	outline: none;
}

.comicModal__body {
	padding: 14px;
	background: #fff;
}

/* Capped against the viewport so a tall comic cannot push the dialog off
   screen on a laptop - the whole panel stays visible without scrolling. */
.comicModal__body img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 78vh;
	object-fit: contain;
	margin: 0 auto;
}

.comicItem a {
	display: block;
	cursor: zoom-in;
}

/* ---------------------------------------------------------------------------
   AIxBio

   The hub reuses .catArchive / .catHeader from the category pages, so only the
   card grid is new. Individual category archives reuse the shared entity card
   through labcritics_card_grid() and need nothing here.
--------------------------------------------------------------------------- */

.aixGrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	align-items: start;
}

.aixCard {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 18px 16px;
	border: 1px solid var(--lc-border);
	border-radius: 4px;
	background: #fff;
	text-decoration: none;
	color: var(--lc-text);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.aixCard:hover,
.aixCard:focus {
	border-color: var(--lc-blue);
	box-shadow: 0 4px 14px rgba(12, 152, 248, .13);
	transform: translateY(-2px);
	text-decoration: none;
}

.aixCard__num {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--lc-blue);
}

.aixCard__head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.aixCard__title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--lc-text-soft);
}

.aixCard__desc {
	font-size: 14px;
	line-height: 1.55;
	color: var(--lc-text);
}

/* The failure mode matters as much as the capability, so it is on the card
   rather than buried on the archive behind it. */
.aixCard__risk {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--lc-text-muted);
	border-top: 1px solid var(--lc-border);
	padding-top: 8px;
	margin-top: 2px;
}

.aixCard__risk strong {
	color: var(--lc-text-soft);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: 11px;
	margin-right: 4px;
}

.aixCard__count {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--lc-text-muted);
}

.aixMaturity {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 2px 7px;
	border-radius: 2px;
	white-space: nowrap;
}

.aixMaturity--proven   { background: #e4f1ea; color: #2c7a51; }
.aixMaturity--emerging { background: #f6eeda; color: #8a6410; }
.aixMaturity--frontier { background: #f8e7e5; color: #a5382f; }

.aixEyebrow {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.aixRisk {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--lc-text-muted);
}

.aixRisk strong {
	color: var(--lc-text-soft);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: 11px;
	margin-right: 6px;
}

@media (max-width: 1000px) {
	.aixGrid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 665px) {
	.aixGrid { grid-template-columns: 1fr; }
}