/*
Theme Name: TC2
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Normalize
2.0 Accessibility
3.0 Alignments
4.0 Clearings
5.0 Typography
6.0 Forms
7.0 Formatting
8.0 Lists
9.0 Tables
10.0 Links
11.0 Featured Image Hover
12.0 Navigation
13.0 Layout
   13.1 Header
   13.2 Front Page
   13.3 Regular Content
   13.4 Posts
   13.5 Pages
   13.6 Footer
14.0 Comments
15.0 Widgets
16.0 Media
   16.1 Galleries
17.0 Customizer
18.0 SVGs Fallbacks
19.0 Media Queries
20.0 Print
--------------------------------------------------------------*/


/*--------------------------------------------------------------
2.0 Accessibility
--------------------------------------------------------------*/

/* Text meant only for screen readers. */

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

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

/*--------------------------------------------------------------
3.0 Alignments
--------------------------------------------------------------*/

.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

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

/*--------------------------------------------------------------
4.0 Clearings
--------------------------------------------------------------*/

.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.entry-footer:before,
.entry-footer:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after,
.nav-links:before,
.nav-links:after,
.pagination:before,
.pagination:after,
.comment-author:before,
.comment-author:after,
.widget-area:before,
.widget-area:after,
.widget:before,
.widget:after,
.comment-meta:before,
.comment-meta:after {
	content: "";
	display: table;
	table-layout: fixed;
}

.clear:after,
.entry-content:after,
.entry-footer:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after,
.nav-links:after,
.pagination:after,
.comment-author:after,
.widget-area:after,
.widget:after,
.comment-meta:after {
	clear: both;
}

/*--------------------------------------------------------------
5.0 Typography
--------------------------------------------------------------*/

body,
button,
input,
select,
textarea {
	color: #333;
	font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
	font-size: 15px;
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.66;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	line-height: 1.4;
	margin: 0 0 0.75em;
	padding: 1.5em 0 0;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
	padding-top: 0;
}

h1 {
	font-size: 24px;
	font-size: 1.5rem;
	font-weight: 300;
}

h2,
.home.blog .entry-title {
	color: #666;
	font-size: 20px;
	font-size: 1.25rem;
	font-weight: 300;
}

h3 {
	color: #333;
	font-size: 18px;
	font-size: 1.125rem;
	font-weight: 300;
}

h4 {
	color: #333;
	font-size: 16px;
	font-size: 1rem;
	font-weight: 800;
}

h5 {
	color: #767676;
	font-size: 13px;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

h6 {
	color: #333;
	font-size: 15px;
	font-size: 0.9375rem;
	font-weight: 800;
}

p {
	margin: 0 0 1.5em;
	padding: 0;
}

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

blockquote {
	color: #666;
	font-size: 18px;
	font-size: 1.125rem;
	font-style: italic;
	line-height: 1.7;
	margin: 0;
	overflow: hidden;
	padding: 0;
}

blockquote cite {
	display: block;
	font-style: normal;
	font-weight: 600;
	margin-top: 0.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	font-size: 15px;
	font-size: 0.9375rem;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #eee;
	text-decoration: none;
}

big {
	font-size: 125%;
}

blockquote {
	quotes: "" "";
}

q {
	quotes: "“" "”" "‘" "’";
}

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

:focus {
	outline: none;
}

/*--------------------------------------------------------------
6.0 Forms
--------------------------------------------------------------*/

label {
    color: #333;
    display: block;
    font-weight: 800;
    margin-bottom: 0.5em;
}

fieldset {
    margin-bottom: 1em;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
    color: #666;
    background: #fff;
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
    border: 1px solid #bbb;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    display: block;
    padding: 0.7em;
    width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
    color: #222;
    border-color: #333;
}

select {
    border: 1px solid #bbb;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    height: 3em;
    max-width: 100%;
}

input[type="radio"],
input[type="checkbox"] {
    margin-right: 0.5em;
}

input[type="radio"] + label,
input[type="checkbox"] + label {
    font-weight: 400;
}

button,
input[type="button"],
input[type="submit"] {
    background-color: #222;
    border: 0;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1;
    padding: 1em 2em;
    text-shadow: none;
    -webkit-transition: background 0.2s;
    transition: background 0.2s;
}

input + button,
input + input[type="button"],
input + input[type="submit"] {
    padding: 0.75em 2em;
}

button.secondary,
input[type="reset"],
input[type="button"].secondary,
input[type="reset"].secondary,
input[type="submit"].secondary {
    background-color: #ddd;
    color: #222;
}

button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
    background: #767676;
}

button.secondary:hover,
button.secondary:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="button"].secondary:hover,
input[type="button"].secondary:focus,
input[type="reset"].secondary:hover,
input[type="reset"].secondary:focus,
input[type="submit"].secondary:hover,
input[type="submit"].secondary:focus {
    background: #bbb;
}

/* Placeholder text color -- selectors need to be separate to work. */
::-webkit-input-placeholder {
    color: #333;
    font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
}

:-moz-placeholder {
    color: #333;
    font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
}

::-moz-placeholder {
    color: #333;
    font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
    opacity: 1;
    /* Since FF19 lowers the opacity of the placeholder by default */
}

:-ms-input-placeholder {
    color: #333;
    font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
}

/*--------------------------------------------------------------
7.0 Formatting
--------------------------------------------------------------*/

hr {
	background-color: #bbb;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
8.0 Lists
--------------------------------------------------------------*/

ul,
ol {
	margin: 0 0 1.5em;
	padding: 0;
}

ul {
	list-style: disc;
}


li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/*--------------------------------------------------------------
9.0 Tables
--------------------------------------------------------------*/

table {
	border-collapse: collapse;
	margin: 0 0 1.5em;
	width: 100%;
}

thead th {
	border-bottom: 2px solid #bbb;
	padding-bottom: 0.5em;
}

th {
	padding: 0.4em;
	text-align: left;
}

tr {
	border-bottom: 1px solid #eee;
}

td {
	padding: 0.4em;
}


/*--------------------------------------------------------------
10.0 Links
--------------------------------------------------------------*/

a {
	color: #222;
	text-decoration: none;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	color: #000;
	outline: 0;
}

/* Hover effects */

.entry-content a,
.entry-summary a,
.widget a,
.site-footer .widget-area a,
.posts-navigation a,
.widget_authors a strong {
	-webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);
	box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);
	-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
}

.entry-title a,
.entry-meta a,
.page-links a,
.page-links a .page-number,
.entry-footer a,
.entry-footer .cat-links a,
.entry-footer .tags-links a,
.edit-link a,
.post-navigation a,
.logged-in-as a,
.comment-navigation a,
.comment-metadata a,
.comment-metadata a.comment-edit-link,
.comment-reply-link,
a .nav-title,
.pagination a,
.comments-pagination a,
.site-info a,
.widget .widget-title a,
.widget ul li a,
.site-footer .widget-area ul li a,
.site-footer .widget-area ul li a {
	-webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);
	text-decoration: none;
	-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
}

.entry-content a:focus,
.entry-content a:hover,
.entry-summary a:focus,
.entry-summary a:hover,
.widget a:focus,
.widget a:hover,
.site-footer .widget-area a:focus,
.site-footer .widget-area a:hover,
.posts-navigation a:focus,
.posts-navigation a:hover,
.comment-metadata a:focus,
.comment-metadata a:hover,
.comment-metadata a.comment-edit-link:focus,
.comment-metadata a.comment-edit-link:hover,
.comment-reply-link:focus,
.comment-reply-link:hover,
.widget_authors a:focus strong,
.widget_authors a:hover strong,
.entry-title a:focus,
.entry-title a:hover,
.entry-meta a:focus,
.entry-meta a:hover,
.page-links a:focus .page-number,
.page-links a:hover .page-number,
.entry-footer a:focus,
.entry-footer a:hover,
.entry-footer .cat-links a:focus,
.entry-footer .cat-links a:hover,
.entry-footer .tags-links a:focus,
.entry-footer .tags-links a:hover,
.post-navigation a:focus,
.post-navigation a:hover,
.pagination a:not(.prev):not(.next):focus,
.pagination a:not(.prev):not(.next):hover,
.comments-pagination a:not(.prev):not(.next):focus,
.comments-pagination a:not(.prev):not(.next):hover,
.logged-in-as a:focus,
.logged-in-as a:hover,
a:focus .nav-title,
a:hover .nav-title,
.edit-link a:focus,
.edit-link a:hover,
.site-info a:focus,
.site-info a:hover,
.widget .widget-title a:focus,
.widget .widget-title a:hover,
.widget ul li a:focus,
.widget ul li a:hover {
	color: #000;
	-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);
	box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);
}

/* Fixes linked images */
.entry-content a img,
.widget a img {
	-webkit-box-shadow: 0 0 0 8px #fff;
	box-shadow: 0 0 0 8px #fff;
}

.post-navigation a:focus .icon,
.post-navigation a:hover .icon {
	color: #222;
}

/*--------------------------------------------------------------
12.0 Navigation
--------------------------------------------------------------*/

.navigation-top {
	background: #fff;
	border-bottom: 1px solid #eee;
	border-top: 1px solid #eee;
	font-size: 16px;
	font-size: 1rem;
	position: relative;
}

.navigation-top .wrap {
	max-width: 1000px;
	padding: 0;
}

.navigation-top a {
	color: #222;
	font-weight: 600;
	-webkit-transition: color 0.2s;
	transition: color 0.2s;
}

.navigation-top .current-menu-item > a,
.navigation-top .current_page_item > a {
	color: #767676;
}

.main-navigation {
	clear: both;
	display: block;
}

.main-navigation ul {
	background: #fff;
	list-style: none;
	margin: 0;
	padding: 0 1.5em;
	text-align: left;
}

/* Hide the menu on small screens when JavaScript is available.
 * It only works with JavaScript.
 */

.js .main-navigation ul,
.main-navigation .menu-item-has-children > a > .icon,
.main-navigation .page_item_has_children > a > .icon,
.main-navigation ul a > .icon {
	display: none;
}

.main-navigation > div > ul {
	border-top: 1px solid #eee;
	padding: 0.75em 1.695em;
}

.js .main-navigation.toggled-on > div > ul {
	display: block;
}

.main-navigation ul ul {
	padding: 0 0 0 1.5em;
}

.main-navigation ul ul.toggled-on {
	display: block;
}

.main-navigation ul ul a {
	letter-spacing: 0;
	padding: 0.4em 0;
	position: relative;
	text-transform: none;
}

.main-navigation li {
	border-bottom: 1px solid #eee;
	position: relative;
}

.main-navigation li li,
.main-navigation li:last-child {
	border: 0;
}

.main-navigation a {
	display: block;
	padding: 0.5em 0;
	text-decoration: none;
}

.main-navigation a:hover {
	color: #767676;
}

/* Menu toggle */

.menu-toggle {
	background-color: transparent;
	border: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
	color: #222;
	display: none;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: 800;
	line-height: 1.5;
	margin: 1px auto 2px;
	padding: 1em;
	text-shadow: none;
}

/* Display the menu toggle when JavaScript is available. */

.js .menu-toggle {
	display: block;
}

.main-navigation.toggled-on ul.nav-menu {
	display: block;
}

.menu-toggle:hover,
.menu-toggle:focus {
	background-color: transparent;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.menu-toggle:focus {
	outline: thin solid;
}

.menu-toggle .icon {
	margin-right: 0.5em;
	top: -2px;
}

.toggled-on .menu-toggle .icon-bars,
.menu-toggle .icon-close {
	display: none;
}

.toggled-on .menu-toggle .icon-close {
	display: inline-block;
}

/* Dropdown Toggle */

.dropdown-toggle {
	background-color: transparent;
	border: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
	color: #222;
	display: block;
	font-size: 16px;
	right: -0.5em;
	line-height: 1.5;
	margin: 0 auto;
	padding: 0.5em;
	position: absolute;
	text-shadow: none;
	top: 0;
}

.dropdown-toggle:hover,
.dropdown-toggle:focus {
	background: transparent;
}

.dropdown-toggle:focus {
	outline: thin dotted;
}

.dropdown-toggle.toggled-on .icon {
	-ms-transform: rotate(-180deg); /* IE 9 */
	-webkit-transform: rotate(-180deg); /* Chrome, Safari, Opera */
	transform: rotate(-180deg);
}

/* Scroll down arrow */

.site-header .menu-scroll-down {
	display: none;
}

/*--------------------------------------------------------------
13.0 Layout
--------------------------------------------------------------*/

html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

*,
*:before,
*:after {
	/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

body {
	background: #fff;
	/* Fallback for when there is no custom background color defined. */
}

#page {
	position: relative;
	word-wrap: break-word;
}

.wrap {
	margin-left: auto;
	margin-right: auto;
	max-width: 700px;
	padding-left: 2em;
	padding-right: 2em;
}

.wrap:after {
	clear: both;
	content: "";
	display: block;
}

/*--------------------------------------------------------------
13.1 Header
--------------------------------------------------------------*/

#masthead .wrap {
	position: relative;
}

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

/* Site branding */

.site-branding {
	padding: 1em 0;
	position: relative;
	-webkit-transition: margin-bottom 0.2s;
	transition: margin-bottom 0.2s;
	z-index: 3;
}

.site-branding a {
	text-decoration: none;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
}

.site-branding a:hover,
.site-branding a:focus {
	opacity: 0.7;
}


.site-title {
	clear: none;
	font-size: 24px;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0.08em;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

.site-title,
.site-title a {
	color: #222;
	opacity: 1; /* Prevent opacity from changing during selective refreshes in the customize preview */
}

.site-description {
	color: #666;
	font-size: 13px;
	font-size: 0.8125rem;
	margin-bottom: 0;
}

.custom-logo-link {
	display: inline-block;
	padding-right: 1em;
	vertical-align: middle;
	width: auto;
}

.custom-logo-link img {
	display: inline-block;
	max-height: 80px;
	width: auto;
}

.custom-logo-link a:hover,
.custom-logo-link a:focus {
	opacity: 0.9;
}

body:not(.title-tagline-hidden) .site-branding-text {
	display: inline-block;
	vertical-align: middle;
}



/*--------------------------------------------------------------
13.2 Front Page
--------------------------------------------------------------*/

.twentyseventeen-front-page .site-content {
	padding: 0;
}

.twentyseventeen-panel {
	overflow: hidden;
	position: relative;
}

.twentyseventeen-front-page article:not(.has-post-thumbnail):not(:first-child) {
	border-top: 1px solid #ddd;
}

.panel-content {
	position: relative;
}

.panel-content .wrap {
	padding-bottom: 0.5em;
/*	padding-top: 1.75em; */
}

/* Front Page - Recent Posts */

.twentyseventeen-front-page .panel-content .recent-posts article {
	border: 0;
	color: #333;
	margin-bottom: 3em;
}

.recent-posts .entry-header {
	margin-bottom: 1.2em;
}

.page .panel-content .recent-posts .entry-title {
	font-size: 20px;
	font-size: 1.25rem;
	font-weight: 300;
	letter-spacing: 0;
	text-transform: none;
}

/*--------------------------------------------------------------
13.3 Regular Content
--------------------------------------------------------------*/

.site-content-contain {
	background-color: #fff;
	position: relative;
}

.site-content {
	padding: 2.5em 0 0;
}

/*--------------------------------------------------------------
13.4 Posts
--------------------------------------------------------------*/

/* Post Landing Page */

.post:not(.sticky) .icon-thumb-tack {
	display: none;
}


.entry-header .entry-title {
	margin-bottom: 0.25em;
}

.entry-title a {
	color: #333;
	text-decoration: none;
	margin-left: -2px;
}

.entry-title:not(:first-child) {
	padding-top: 0;
}

.entry-meta {
	color: #767676;
	font-size: 11px;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.1818em;
	padding-bottom: 0.25em;
	text-transform: uppercase;
}

.entry-meta a {
	color: #767676;
}

.byline,
.updated:not(.published) {
	display: none;
}

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

.pagination,
.comments-pagination {
	border-top: 1px solid #eee;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: 800;
	padding: 2em 0 3em;
	text-align: center;
}

.pagination .icon,
.comments-pagination .icon {
	width: 0.666666666em;
	height: 0.666666666em;
}

.comments-pagination {
	border: 0;
}

.page-numbers {
	display: none;
	padding: 0.5em 0.75em;
}

.page-numbers.current {
	color: #767676;
	display: inline-block;
}

.page-numbers.current .screen-reader-text {
	clip: auto;
	height: auto;
	overflow: auto;
	position: relative !important;
	width: auto;
}

.prev.page-numbers,
.next.page-numbers {
	background-color: #ddd;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	display: inline-block;
	font-size: 24px;
	font-size: 1.5rem;
	line-height: 1;
	padding: 0.25em 0.5em 0.4em;
}

.prev.page-numbers,
.next.page-numbers {
	-webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
	transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
}

.prev.page-numbers:focus,
.prev.page-numbers:hover,
.next.page-numbers:focus,
.next.page-numbers:hover {
	background-color: #767676;
	color: #fff;
}

.prev.page-numbers {
	float: left;
}

.next.page-numbers {
	float: right;
}

/* Aligned blockquotes */

.entry-content blockquote.alignleft,
.entry-content blockquote.alignright {
	color: #666;
	font-size: 13px;
	font-size: 0.8125rem;
	width: 48%;
}

/* Blog landing, search, archives */

.blog .site-main > article,
.archive .site-main > article,
.search .site-main > article {
	padding-bottom: 2em;
}

body:not(.twentyseventeen-front-page) .entry-header {
	padding: 1em 0;
}

body:not(.twentyseventeen-front-page) .entry-header,
body:not(.twentyseventeen-front-page) .entry-content,
body:not(.twentyseventeen-front-page) #comments {
	margin-left: auto;
	margin-right: auto;
}

body:not(.twentyseventeen-front-page) .entry-header {
	padding-top: 0;
}

.blog .entry-meta a.post-edit-link,
.archive .entry-meta a.post-edit-link,
.search .entry-meta a.post-edit-link {
	color: #222;
	display: inline-block;
	margin-left: 1em;
	white-space: nowrap;
}

.search .page .entry-meta a.post-edit-link {
	margin-left: 0;
	white-space: nowrap;
}

.taxonomy-description {
	color: #666;
	font-size: 13px;
	font-size: 0.8125rem;
}

/* More tag */

.entry-content .more-link:before {
	content: "";
	display: block;
	margin-top: 1.5em;
}

/* Single Post */

.single-post:not(.has-sidebar) #primary,
.page.page-one-column:not(.twentyseventeen-front-page) #primary,
.archive.page-one-column:not(.has-sidebar) .page-header,
.archive.page-one-column:not(.has-sidebar) #primary {
	margin-left: auto;
	margin-right: auto;
	max-width: 1200px; /* 740px; */
}

.single-featured-image-header {
	background-color: #fafafa;
	border-bottom: 1px solid #eee;
}

.single-featured-image-header img {
	display: block;
	margin: auto;
}

.page-links {
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: 800;
	padding: 2em 0 3em;
}

.page-links .page-number {
	color: #767676;
	display: inline-block;
	padding: 0.5em 1em;
}

.page-links a {
	display: inline-block;
}

.page-links a .page-number {
	color: #222;
}

/* Entry footer */

.entry-footer {
	border-bottom: 1px solid #eee;
	border-top: 1px solid #eee;
	margin-top: 2em;
	padding: 2em 0;
}

.entry-footer .cat-links,
.entry-footer .tags-links {
	display: block;
	font-size: 11px;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.1818em;
	padding-left: 2.5em;
	position: relative;
	text-transform: uppercase;
}

.entry-footer .cat-links + .tags-links {
	margin-top: 1em;
}

.entry-footer .cat-links a,
.entry-footer .tags-links a {
	color: #333;
}

.entry-footer .cat-links .icon,
.entry-footer .tags-links .icon {
	color: #767676;
	left: 0;
	margin-right: 0.5em;
	position: absolute;
	top: 2px;
}

.entry-footer .edit-link {
	display: inline-block;
}

.entry-footer .edit-link a.post-edit-link {
	background-color: #222;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	-webkit-box-shadow: none;
	box-shadow: none;
	color: #fff;
	display: inline-block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: 800;
	margin-top: 2em;
	padding: 0.7em 2em;
	-webkit-transition: background-color 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out;
	white-space: nowrap;
}

.entry-footer .edit-link a.post-edit-link:hover,
.entry-footer .edit-link a.post-edit-link:focus {
	background-color: #767676;
}

/* Post Formats */

.blog .format-status .entry-title,
.archive .format-status .entry-title,
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
	display: none;
}

.format-quote blockquote {
	color: #333;
	font-size: 20px;
	font-size: 1.25rem;
	font-weight: 300;
	overflow: visible;
	position: relative;
}

.format-quote blockquote .icon {
	display: block;
	height: 20px;
	left: -1.25em;
	position: absolute;
	top: 0.4em;
	-webkit-transform: scale(-1, 1);
	-ms-transform: scale(-1, 1);
	transform: scale(-1, 1);
	width: 20px;
}

/* Post Navigation */

.post-navigation {
	font-weight: 800;
	margin: 3em 0;
}

.post-navigation .nav-links {
	padding: 1em 0;
}

.nav-subtitle {
	background: transparent;
	color: #767676;
	display: block;
	font-size: 11px;
	font-size: 0.6875rem;
	letter-spacing: 0.1818em;
	margin-bottom: 1em;
	text-transform: uppercase;
}

.nav-title {
	color: #333;
	font-size: 15px;
	font-size: 0.9375rem;
}

.post-navigation .nav-next {
	margin-top: 1.5em;
}

.nav-links .nav-previous .nav-title .nav-title-icon-wrapper {
	margin-right: 0.5em;
}

.nav-links .nav-next .nav-title .nav-title-icon-wrapper {
	margin-left: 0.5em;
}

/*--------------------------------------------------------------
13.5 Pages
--------------------------------------------------------------*/

.page-header {
	padding-bottom: 2em;
}

.page .entry-header .edit-link {
	font-size: 14px;
	font-size: 0.875rem;
}

.search .page .entry-header .edit-link {
	font-size: 11px;
	font-size: 0.6875rem;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

.page:not(.home) #content {
	padding-bottom: 1.5em;
}

/* 404 page */

.error404 .page-content {
	padding-bottom: 4em;
}

.error404 .page-content .search-form,
.search .page-content .search-form {
	margin-bottom: 3em;
}

/*--------------------------------------------------------------
13.6 Footer
--------------------------------------------------------------*/

.site-footer {
	border-top: 1px solid #eee;
}

.site-footer .wrap {
	padding-bottom: 1.5em;
	padding-top: 2em;
}

/* Footer widgets */

.site-footer .widget-area {
	padding-bottom: 2em;
	padding-top: 2em;
}

/* Site info */

.site-info {
	font-size: 14px;
	font-size: 0.875rem;
	margin-bottom: 1em;
}

.site-info a {
	color: #666;
}

.site-info .sep {
	margin: 0;
	display: block;
	visibility: hidden;
	height: 0;
	width: 100%;
}


/* Search */

.search-form {
	position: relative;
}

.search-form .search-submit {
	bottom: 3px;
	padding: 0.5em 1em;
	position: absolute;
	right: 3px;
	top: 3px;
}

.search-form .search-submit .icon {
	height: 24px;
	height: 1.5rem;
	top: -2px;
	width: 24px;
	width: 1.5rem;
}


/*--------------------------------------------------------------
16.0 Media
--------------------------------------------------------------*/

img,
video {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
}

img.alignleft,
img.alignright {
	float: none;
	margin: 0;
}

.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

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

embed,
iframe,
object {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption,
.gallery-caption {
	color: #666;
	font-size: 13px;
	font-size: 0.8125rem;
	font-style: italic;
	margin-bottom: 1.5em;
	max-width: 100%;
}

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

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}


/*--------------------------------------------------------------
19.0 Media Queries
--------------------------------------------------------------*/


@media screen and (min-width: 30em) {

	/* Typography */

	body,
	button,
	input,
	select,
	textarea {
		font-size: 18px;
		font-size: 1.125rem;
	}

	h1 {
		font-size: 30px;
		font-size: 1.875rem;
	}

	h2,
	.home.blog .entry-title {
		font-size: 26px;
		font-size: 1.625rem;
	}

	h3 {
		font-size: 22px;
		font-size: 1.375rem;
	}

	h4 {
		font-size: 18px;
		font-size: 1.125rem;
	}

	h5 {
		font-size: 13px;
		font-size: 0.8125rem;
	}

	h6 {
		font-size: 16px;
		font-size: 1rem;
	}

	.entry-content blockquote.alignleft,
	.entry-content blockquote.alignright {
		font-size: 14px;
		font-size: 0.875rem;
	}

	/* Fix image alignment */
	img.alignleft {
		float: left;
		margin-right: 1.5em;
	}

	img.alignright {
		float: right;
		margin-left: 1.5em;
	}

	/* Site Branding */

	.site-branding {
		padding: 1em 0;
	}

	/* Front Page */

	.panel-content .wrap {
		padding-bottom: 2em;
/*		padding-top: 3.5em; */
	}

	.page-one-column .panel-content .wrap {
		max-width: 1200px; /* 740px; */
	}

	.panel-content .entry-header {
		margin-bottom: 4.5em;
	}

	.panel-content .recent-posts .entry-header {
		margin-bottom: 0;
	}

	/* Blog Index, Archive, Search */

	.taxonomy-description {
		font-size: 14px;
		font-size: 0.875rem;
	}

	.page-numbers.current {
		font-size: 16px;
		font-size: 1rem;
	}

	/* Site Footer */

	.site-footer {
		font-size: 16px;
		font-size: 1rem;
	}

}

@media screen and (min-width: 48em) {

	/* Typography */

	body,
	button,
	input,
	select,
	textarea {
		font-size: 16px;
		font-size: 1rem;
		line-height: 1.5;
	}

	.entry-content blockquote.alignleft,
	.entry-content blockquote.alignright {
		font-size: 13px;
		font-size: 0.8125rem;
	}

	/* Layout */

	.wrap {
		max-width: 1200px;
		padding-left: 3em;
		padding-right: 3em;
	}

	.has-sidebar:not(.error404) #primary {
		float: left;
		width: 58%;
	}

	.has-sidebar #secondary {
		float: right;
		padding-top: 0;
		width: 36%;
	}

	.error404 #primary {
		float: none;
	}

	/* Site Branding */

	.site-branding {
		margin-bottom: 0;
	}



	.custom-logo-link {
		padding-right: 2em;
	}

	.custom-logo-link img {
		max-width: 350px;
	}

	.site-title {
		font-size: 36px;
		font-size: 2.25rem;
	}

	.site-description {
		font-size: 16px;
		font-size: 1rem;
	}

	/* Navigation */

	.navigation-top {
/*		bottom: 0; */
		font-size: 14px;
		font-size: 0.875rem;
/*		left: 0;
		position: absolute;
		right: 0;
*/
		width: 100%;
		z-index: 3;
	}

	.navigation-top .wrap {
		max-width: 1200px;
		/* The font size is 14px here and we need 50px padding in ems */
		padding: 0.75em 3.4166666666667em;
	}

	.navigation-top nav {
		margin-left: -1.25em;
	}

	.site-navigation-fixed.navigation-top {
		bottom: auto;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
		z-index: 7;
	}

	.admin-bar .site-navigation-fixed.navigation-top {
		top: 32px;
	}

	/* Main Navigation */

	.js .menu-toggle,
	.js .dropdown-toggle {
		display: none;
	}

	.main-navigation {
		width: auto;
	}

	.js .main-navigation ul,
	.js .main-navigation ul ul,
	.js .main-navigation > div > ul {
		display: block;
	}

	.main-navigation ul {
		background: transparent;
		padding: 0;
	}

	.main-navigation > div > ul {
		border: 0;
		margin-bottom: 0;
		padding: 0;
	}

	.main-navigation li {
		border: 0;
		display: inline-block;
	}

	.main-navigation li li {
		display: block;
	}

	.main-navigation a {
		padding: 1em 1.25em;
	}

	.main-navigation ul ul {
		background: #fff;
		border: 1px solid #bbb;
		left: -999em;
		padding: 0;
		position: absolute;
		top: 100%;
		z-index: 99999;
	}

	.main-navigation ul li.menu-item-has-children:before,
	.main-navigation ul li.menu-item-has-children:after,
	.main-navigation ul li.page_item_has_children:before,
	.main-navigation ul li.page_item_has_children:after {
		border-style: solid;
		border-width: 0 6px 6px;
		content: "";
		display: none;
		height: 0;
		position: absolute;
		right: 1em;
		bottom: -1px;
		width: 0;
		z-index: 100000;
	}

	.main-navigation ul li.menu-item-has-children.focus:before,
	.main-navigation ul li.menu-item-has-children:hover:before,
	.main-navigation ul li.menu-item-has-children.focus:after,
	.main-navigation ul li.menu-item-has-children:hover:after,
	.main-navigation ul li.page_item_has_children.focus:before,
	.main-navigation ul li.page_item_has_children:hover:before,
	.main-navigation ul li.page_item_has_children.focus:after,
	.main-navigation ul li.page_item_has_children:hover:after {
		display: block;
	}

	.main-navigation ul li.menu-item-has-children:before,
	.main-navigation ul li.page_item_has_children:before {
		border-color: transparent transparent #bbb;
		bottom: 0;
	}

	.main-navigation ul li.menu-item-has-children:after,
	.main-navigation ul li.page_item_has_children:after {
		border-color: transparent transparent #fff;
	}

	.main-navigation ul ul li:hover > ul,
	.main-navigation ul ul li.focus > ul {
		left: 100%;
		right: auto;
	}

	.main-navigation ul ul a {
		padding: 0.75em 1.25em;
		width: 16em;
	}

	.main-navigation li li {
		-webkit-transition: background-color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out;
	}

	.main-navigation li li:hover,
	.main-navigation li li.focus {
		background: #767676;
	}

	.main-navigation li li a {
		-webkit-transition: color 0.3s ease-in-out;
		transition: color 0.3s ease-in-out;
	}

	.main-navigation li li.focus > a,
	.main-navigation li li:focus > a,
	.main-navigation li li:hover > a,
	.main-navigation li li a:hover,
	.main-navigation li li a:focus,
	.main-navigation li li.current_page_item a:hover,
	.main-navigation li li.current-menu-item a:hover,
	.main-navigation li li.current_page_item a:focus,
	.main-navigation li li.current-menu-item a:focus {
		color: #fff;
	}

	.main-navigation ul li:hover > ul,
	.main-navigation ul li.focus > ul {
		left: 0.5em;
		right: auto;
	}

	.main-navigation .menu-item-has-children > a > .icon,
	.main-navigation .page_item_has_children > a > .icon {
		display: inline;
		left: 5px;
		position: relative;
		top: -1px;
	}

	.main-navigation ul ul .menu-item-has-children > a > .icon,
	.main-navigation ul ul .page_item_has_children > a > .icon {
		margin-top: -9px;
		left: auto;
		position: absolute;
		right: 1em;
		top: 50%;
		-webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
		-ms-transform: rotate(-90deg); /* IE 9 */
		transform: rotate(-90deg);
	}

	.main-navigation ul ul ul {
		left: -999em;
		margin-top: -1px;
		top: 0;
	}

	.main-navigation ul ul li.menu-item-has-children.focus:before,
	.main-navigation ul ul li.menu-item-has-children:hover:before,
	.main-navigation ul ul li.menu-item-has-children.focus:after,
	.main-navigation ul ul li.menu-item-has-children:hover:after,
	.main-navigation ul ul li.page_item_has_children.focus:before,
	.main-navigation ul ul li.page_item_has_children:hover:before,
	.main-navigation ul ul li.page_item_has_children.focus:after,
	.main-navigation ul ul li.page_item_has_children:hover:after {
		display: none;
	}

	.site-header .site-navigation-fixed .menu-scroll-down {
		display: none;
	}

	/* Scroll down arrow */

	.site-header .menu-scroll-down {
		display: block;
		padding: 1em;
		position: absolute;
		right: 0;
	}

	.site-header .menu-scroll-down .icon {
		-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
		-ms-transform: rotate(90deg); /* IE 9 */
		transform: rotate(90deg);
	}

	.site-header .menu-scroll-down {
		color: #fff;
		top: 2em;
	}

	.site-header .navigation-top .menu-scroll-down {
		color: #767676;
		top: 0.7em;
	}


	.menu-scroll-down:focus {
		outline: thin dotted;
	}

	.menu-scroll-down .icon {
		height: 18px;
		width: 18px;
	}

	/* Front Page */


	.panel-content .wrap {
		padding-bottom: 4.5em;
/*		padding-top: 6em; */
	}

	.panel-image {
		height: 100vh;
		max-height: 1200px;
	}

	/* With panel images 100% of the screen height, we're going to fix the background image where supported to create a parallax-like effect. */
	.background-fixed .panel-image {
		background-attachment: fixed;
	}

	.page-two-column .panel-content .entry-header {
		float: left;
		width: 36%;
	}

	.page-two-column .panel-content .entry-content {
		float: right;
		width: 58%;
	}

	/* Front Page - Recent Posts */

	.page-two-column .panel-content .recent-posts {
		clear: right;
		float: right;
		width: 58%;
	}

	.panel-content .recent-posts article {
		margin-bottom: 4em;
	}

	.panel-content .recent-posts .entry-header,
	.page-two-column #primary .panel-content .recent-posts .entry-header,
	.panel-content .recent-posts .entry-content,
	.page-two-column #primary .panel-content .recent-posts .entry-content {
		float: none;
		width: 100%;
	}

	.panel-content .recent-posts .entry-header {
		margin-bottom: 1.5em;
	}

	.page .panel-content .recent-posts .entry-title {
		font-size: 26px;
		font-size: 1.625rem;
	}

	/* Posts */

	.site-content {
/*		padding: 5.5em 0 0; */
	}

	.single-post .entry-title,
	.page .entry-title {
		font-size: 26px;
		font-size: 1.625rem;
	}
	.page-template-template-sensors .entry-title {
		font-size: 30px;
		font-size: 1.875rem;
	}



	.comments-pagination,
	.post-navigation {
		clear: both;
	}

	.post-navigation .nav-previous {
		float: left;
		width: 50%;
	}

	.post-navigation .nav-next {
		float: right;
		text-align: right;
		width: 50%;
	}

	.nav-next,
	.post-navigation .nav-next {
		margin-top: 0;
	}

	/* Blog, archive, search */


	body:not(.has-sidebar):not(.page-one-column) .page-header,
	body.has-sidebar.error404 #primary .page-header,
	body.page-two-column:not(.archive) #primary .entry-header,
	body.page-two-column.archive:not(.has-sidebar) #primary .page-header {
		float: left;
		width: 36%;
	}

	.blog:not(.has-sidebar) #primary article,
	.archive:not(.page-one-column):not(.has-sidebar) #primary article,
	.search:not(.has-sidebar) #primary article,
	.error404:not(.has-sidebar) #primary .page-content,
	.error404.has-sidebar #primary .page-content,
	body.page-two-column:not(.archive) #primary .entry-content,
	body.page-two-column #comments {
		float: right;
		width: 58%;
	}

	.blog .site-main > article,
	.archive .site-main > article,
	.search .site-main > article {
		padding-bottom: 4em;
	}

	.navigation.pagination {
		clear: both;
		float: right;
		width: 58%;
	}

	.has-sidebar .navigation.pagination,
	.archive.page-one-column:not(.has-sidebar) .navigation.pagination {
		float: none;
		width: 100%;
	}

	.entry-footer {
		display: table;
		width: 100%;
	}

	.entry-footer .cat-tags-links {
		display: table-cell;
		vertical-align: middle;
		width: 100%;
	}

	.entry-footer .edit-link {
		display: table-cell;
		text-align: right;
		vertical-align: middle;
	}

	.entry-footer .edit-link a.post-edit-link {
		margin-top: 0;
		margin-left: 1em;
	}

	/* Entry content */

	/* without sidebar */

	:not(.has-sidebar) .entry-content blockquote.alignleft {
		margin-left: -17.5%;
		width: 48%;
	}

	:not(.has-sidebar) .entry-content blockquote.alignright {
		margin-right: -17.5%;
		width: 48%;
	}


	/* blog and archive */

	.blog:not(.has-sidebar) .entry-content blockquote.alignleft,
	.twentyseventeen-front-page.page-two-column .entry-content blockquote.alignleft,
	.archive:not(.has-sidebar) .entry-content blockquote.alignleft,
	.page-two-column .entry-content blockquote.alignleft {
		margin-left: -72.5%;
		width: 62%;
	}

	.blog:not(.has-sidebar) .entry-content blockquote.alignright,
	.twentyseventeen-front-page.page-two-column .entry-content blockquote.alignright,
	.archive:not(.has-sidebar) .entry-content blockquote.alignright,
	.page-two-column .entry-content blockquote.alignright {
		margin-right: 0;
		width: 36%;
	}

	/* Post formats */

	.format-quote blockquote .icon {
		left: -1.5em;
	}

	/* Pages */

	.page.page-one-column .entry-header,
	.twentyseventeen-front-page.page-one-column .entry-header,
	.archive.page-one-column:not(.has-sidebar) .page-header {
/*		margin-bottom: 4em; */
	}

	.page:not(.home) #content {
		padding-bottom: 3.25em;
	}

	/* 404 page */

	.error404 .page-content {
		padding-bottom: 9em;
	}

	/* Comments */

	#comments {
		padding-top: 5em;
	}

	.comments-title {
		margin-bottom: 2.5em;
	}

	ol.children .children {
		padding-left: 2em;
	}

	/* Posts pagination */

	.nav-links .nav-title {
		position: relative;
	}

	.nav-title-icon-wrapper {
		position: absolute;
		text-align: center;
		width: 2em;
	}

	.nav-links .nav-previous .nav-title .nav-title-icon-wrapper {
		left: -2em;
	}

	.nav-links .nav-next .nav-title .nav-title-icon-wrapper {
		right: -2em;
	}

	/* Secondary */

	#secondary {
		font-size: 14px;
		font-size: 0.875rem;
		line-height: 1.6;
	}

	/* Widgets */

	h2.widget-title {
		font-size: 11px;
		font-size: 0.6875rem;
		margin-bottom: 2em;
	}

	/* Footer */

	.site-footer {
		font-size: 14px;
		font-size: 0.875rem;
		line-height: 1.6;
		margin-top: 3em;
	}


	.site-info {
		float: left;
		padding: 0.7em 0 0;
		width: 58%;
	}


	.site-info .sep {
		margin: 0 0.5em;
		display: inline;
		visibility: visible;
		height: auto;
		width: auto;
	}

}

@media screen and ( min-width: 67em ) {

	/* Layout */

	/* Navigation */
	.navigation-top .wrap {
		padding: 0.25em 1em;
	}

	.navigation-top nav {
		margin-left: 0;
	}


	/* Pagination */

	.page-numbers {
		display: inline-block;
	}

	.page-numbers.current {
		font-size: 15px;
		font-size: 0.9375rem;
	}

	.page-numbers.current .screen-reader-text {
		clip: rect(1px, 1px, 1px, 1px);
		height: 1px;
		overflow: hidden;
		position: absolute !important;
		width: 1px;
	}

	/* Comments */

	.comment-body {
		margin-left: 0;
	}


}

@media screen and ( min-width: 79em ) {

	.has-sidebar .entry-content blockquote.alignleft {
		margin-left: -20%;
	}

	.blog:not(.has-sidebar) .entry-content blockquote.alignright,
	.archive:not(.has-sidebar) .entry-content blockquote.alignright,
	.page-two-column .entry-content blockquote.alignright,
	.twentyseventeen-front-page .entry-content blockquote.alignright {
		margin-right: -20%;
	}
}

@media screen and ( max-width: 48.875em ) and ( min-width: 48em ) {

	.admin-bar .site-navigation-fixed.navigation-top,
	.admin-bar .site-navigation-hidden.navigation-top {
		top: 46px;
	}
}

/*--------------------------------------------------------------
20.0 Print
--------------------------------------------------------------*/

@media print {

	/* Hide elements */

	form,
	button,
	input,
	select,
	textarea,
	.navigation-top,
	.social-navigation,
	#secondary,
	.content-bottom-widgets,
	.header-image,
	.panel-image-prop,
	.icon-thumb-tack,
	.page-links,
	.edit-link,
	.post-navigation,
	.pagination.navigation,
	.comments-pagination,
	.comment-respond,
	.comment-edit-link,
	.comment-reply-link,
	.comment-metadata .edit-link,
	.pingback .edit-link,
	.site-footer aside.widget-area,
	.site-info {
		display: none !important;
	}

	.entry-footer,
	#comments,
	.site-footer,
	.single-featured-image-header {
		border: 0;
	}

	/* Font sizes */

	body {
		font-size: 12pt;
	}

	h1 {
		font-size: 24pt;
	}

	h2 {
		font-size: 22pt;
	}

	h3 {
		font-size: 17pt;
	}

	h4 {
		font-size: 12pt;
	}

	h5 {
		font-size: 11pt;
	}

	h6 {
		font-size: 12pt;
	}

	.page .panel-content .entry-title,
	.page-title,
	body.page:not(.twentyseventeen-front-page) .entry-title {
		font-size: 10pt;
	}

	/* Layout */

	.wrap {
		padding-left: 5% !important;
		padding-right: 5% !important;
		max-width: none;
	}

	/* Site Branding */

	.site-header {
		background: transparent;
		padding: 0;
	}

	.custom-header-media {
		padding: 0;
	}


	.site-branding {
		margin-top: 0;
		margin-bottom: 1.75em !important; /* override styles added by JavaScript */
	}

	.site-title {
		font-size: 25pt;
	}

	.site-description {
		font-size: 12pt;
		opacity: 1;
	}

	/* Posts */

	.single-featured-image-header {
		background: transparent;
	}

	.entry-meta {
		font-size: 9pt;
	}

	/* Colors */

	body,
	.site {
		background: none !important; /* Brute force since user agents all print differently. */
	}

	body,
	a,
	.site-title a {
		color: #222 !important; /* Make sure color schemes don't affect to print */
	}

	h2,
	h5,
	blockquote,
	.site-description,
	.entry-meta,
	.entry-meta a {
		color: #777 !important; /* Make sure color schemes don't affect to print */
	}

	.entry-content blockquote.alignleft,
	.entry-content blockquote.alignright {
		font-size: 11pt;
		width: 34%;
	}

	.site-footer {
		padding: 0;
	}

	ins.adsbygoogle { display: none !important; }
	
}

/**********
 * Other Stuff
 ***********/

ins.adsbygoogle { background: none; }

.left-column {
	text-align: right;
        width: 300px; /* 160px; */
        display: inline-block;
        vertical-align: top;
        position: fixed;
}
.right-column {
        margin-left: 300px; /* 195px; */
}

.top-ad { display: none; }

.right-column .wrap { margin-left: 0; }

/* .custom-header { margin-bottom: 127.375px; } */

@media (max-width: 1000px) {

        .left-column { /* , .pcode-header-ad { */
                display: none;
        }
        .right-column {
                margin-left: 0;
        }
	.top-ad {
                display: none; /* block; */
        }
	.right-column .wrap { margin-left: auto; }

}



tr:nth-child(even) {background: #EEE}
tr:nth-child(odd) {background: #FFF}

body.single article a { text-decoration: underline; }

body.single article h2, 
body.page-template-template-sensors article h2,
body.page article h2 { border-top: 2px solid black; padding: .5em 0 0; }

body.single article h1.entry-title,
body.page-template-template-sensors article h1.entry-title,
body.page h1.entry-title { border-left: 5px solid black; padding: .5em 1em .5em; }
body.page h1.entry-title a { text-decoration: underline; }

img.avatar { border-radius: 50%; }

/* ---------------------------------------------------------------------------
 * Code table.
 *
 * This is the first thing every visitor sees - 93% of them on a phone, arriving
 * from the Torque app mid-diagnosis. It was <table cellpadding="6" border="1">,
 * a bevelled 1990s table squeezing three columns of prose onto a 360px screen.
 *
 * Below 620px the columns stack, each cell carrying its own label, so the fault
 * description and probable cause get full width instead of a few words per line.
 * ------------------------------------------------------------------------- */
.tc-code-table {
    width: 100%;
    max-width: 954px;
    margin: 0 auto 1.25em;
    border-collapse: collapse;
    text-align: left;
    font-size: 1rem;
    line-height: 1.5;
}
.tc-code-table th {
    background: #f2f1ed;
    color: #333;
    font-size: .72rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-weight: 600;
    padding: .55em .85em;
    border-bottom: 2px solid #d8d5cd;
}
.tc-code-table td {
    padding: .85em;
    border-bottom: 1px solid #e3e1db;
    vertical-align: top;
}
/* The code itself is the anchor of the page - make it read like one. */
.tc-code-table td:first-child {
    font-weight: 700;
    font-size: 1.15rem;
    white-space: nowrap;
}
.tc-code-table a { text-decoration: underline; }

@media (max-width: 620px) {
    .tc-code-table thead,
    .tc-code-table tr:first-child th { display: none; }
    .tc-code-table,
    .tc-code-table tbody,
    .tc-code-table tr,
    .tc-code-table td { display: block; width: 100%; }
    .tc-code-table tr {
        border: 1px solid #e3e1db;
        border-radius: 3px;
        margin-bottom: 1em;
        padding: .25em 0;
    }
    .tc-code-table td { border-bottom: 0; padding: .55em .9em; }
    .tc-code-table td + td { border-top: 1px solid #efeee9; }
    .tc-code-table td:first-child {
        font-size: 1.35rem;
        padding-bottom: .1em;
    }
    /* Label each stacked cell, since the header row is hidden. */
    .tc-code-table td:nth-child(2)::before { content: "Fault location"; }
    .tc-code-table td:nth-child(3)::before { content: "Probable cause"; }
    .tc-code-table td:nth-child(2)::before,
    .tc-code-table td:nth-child(3)::before {
        display: block;
        font-size: .68rem;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: #6c7671;
        margin-bottom: .25em;
    }
}

/* ---------------------------------------------------------------------------
 * Typography and rhythm for the article body.
 *
 * The pages had no deliberate type scale, so headings, table text and body copy
 * all competed at similar weights and the result read as an undifferentiated
 * wall. Sized for the 360px phone screen 93% of visitors are on.
 * ------------------------------------------------------------------------- */
/*
 * Type scale only - no max-width here. An earlier version capped paragraphs,
 * headings and lists at 680px with auto margins, which centred each element
 * independently inside the theme's 954px article: the title sat at left 243,
 * headings at 380, paragraphs at 400 and lists at 427. Four different left
 * edges. The theme's own container handles measure; this only sets rhythm.
 */
article { font-size: 1.02rem; line-height: 1.65; }
article p { margin: 0 0 1.1em; }

article h2 {
    font-size: 1.32rem;
    line-height: 1.25;
    margin: 1.9em 0 .55em;
    padding-top: .7em;
    border-top: 1px solid #e6e4de;
}
article h3 {
    font-size: 1.08rem;
    line-height: 1.3;
    margin: 1.5em 0 .4em;
}
article ul,
article ol { padding-left: 1.35em; margin-bottom: 1.2em; }
article li { margin-bottom: .45em; }
article img { height: auto; }

/* Ads: give them air and a quiet boundary so they read as ads rather than as
 * broken page furniture. Labelled because an unlabelled ad mid-article is the
 * single thing that makes a content site feel like a dump. */
.ad-desktop,
.ad-mobile {
    margin: 2em auto;
    padding-top: 1.1em;
    border-top: 1px solid #ececea;
    position: relative;
}
.ad-desktop::before,
.ad-mobile::before {
    content: "Advertisement";
    display: block;
    font-size: .62rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9a9a94;
    margin-bottom: .5em;
}

@media (max-width: 620px) {
    article { font-size: 1.05rem; }
    article h2 { font-size: 1.24rem; }
    article center { display: block; }
}

/* ---------------------------------------------------------------------------
 * Mobile header: get the content up the page.
 *
 * Measured on a 390x844 phone, the article title started 1,040px down and the
 * code table at 1,318px - a Torque user had to scroll one and a half screens
 * past the logo, a quotation, the header ad and a 429px stacked menu before
 * learning what their code meant.
 *
 * The theme ships .menu-toggle styles but never renders a toggle button, so the
 * eight-item menu is always fully expanded. Rather than add JS, the menu becomes
 * a single horizontally scrollable row of links - a familiar pattern, keyboard
 * and screen-reader friendly, and ~48px instead of 429px.
 * ------------------------------------------------------------------------- */
@media (max-width: 620px) {
    /* The Sherlock Holmes epigraph is charming on desktop and costs ~90px of
       first screen on a phone. Kept in the markup for desktop and for search. */
    .site-branding .site-description { display: none; }

    /* Header search hidden on mobile - see the sitewide rule below. */
}

/* The top menu sat left-aligned in a wider container, leaving ~99px of dead
 * space on the right and reading as off-balance. Centre the items. Mobile is
 * unaffected - there the menu is a horizontally scrolling strip and must start
 * at the left edge. */


/* Masthead alignment.
 *
 * Desktop had five different left edges - brand wrap 120, nav 134, logo and
 * tagline 168, content wrap 195, article 243 - so nothing lined up. The logo is
 * also centred on mobile but was left-aligned on desktop, so the breakpoints
 * disagreed. Centre the masthead to match the centred nav; mobile already
 * centres and is unchanged. */
@media (min-width: 621px) {
    .site-branding .site-title,
    .site-branding .site-description,
    .site-branding-text { text-align: center; }
    /* The tagline's PARENT (.site-branding-text) is inline-block, so it shrank to
     * its content (853px) and anchored left at 243 rather than filling the 954px
     * column - the tagline itself was never the problem. Block-level on the
     * parent lets text-align:center actually centre it. */
    /* Matches the theme's own selector specificity (0,2,1) - a plain
     * .site-branding .site-branding-text is (0,2,0) and loses to
     * body:not(.title-tagline-hidden) .site-branding-text at line ~1005. */
    body:not(.title-tagline-hidden) .site-branding-text { display: block; width: auto; }
    .site-branding .site-description { display: block; max-width: none; }
    .site-branding .site-title img { display: inline-block; }
}

/* One column.
 *
 * The theme nests five wrappers, each adding padding, so the masthead, nav and
 * article all started at different x - 120, 134, 168, 195, 243. The article is
 * already centred in the viewport at 954px wide, so that is the column; the
 * masthead and nav are constrained to match it. Bands still span full width,
 * only their inner content aligns. */
@media (min-width: 621px) {
    .site-branding .wrap,
    .main-navigation ul#top-menu {
        max-width: 954px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
    }
}

/* The logo and the "By BAT Auto" credit share one <p class="site-title"> and sit
 * inline together - that is deliberate, do not stack them. */

/* The eight menu items needed 1,073px at the theme's default padding, so once
 * the menu was constrained to the 954px content column they wrapped to two rows
 * and pushed the search box down. Tighten the horizontal padding so the row
 * fits the column - the alignment is worth more than the whitespace. */


/* Header search removed.
 *
 * It took 231px out of the navigation row on desktop and 48px of first screen on
 * mobile, on a site where 93% of visitors arrive from the Torque app at one
 * specific code and never search. One line to restore if the Clarity data shows
 * people hunting for it. The form itself still works everywhere else. */
.site-header .search-form { display: none; }

/* ---------------------------------------------------------------------------
 * Navigation: one treatment at every width.
 *
 * Pills on a single horizontally scrollable row. Below ~900px the eight items
 * no longer fit the column and previously wrapped to two rows, which pushed the
 * content down and looked accidental; scrolling is the same gesture people
 * already use on mobile and never changes the header's height.
 * ------------------------------------------------------------------------- */
.main-navigation ul#top-menu {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /*
     * space-between spreads the pills to both edges of the column when there is
     * room, so the row's ink matches the body text exactly. When the items
     * overflow there is no free space to distribute, so it silently becomes
     * flex-start and the row scrolls from the left as normal.
     */
    justify-content: space-between;
    margin: 0 auto;
    padding: .4em 0;
    gap: .5em;
    scrollbar-width: none;
    max-width: 954px;
}
.main-navigation ul#top-menu::-webkit-scrollbar { display: none; }
.main-navigation ul#top-menu > li {
    float: none;
    border: 0;
    flex: 0 0 auto;
    margin: 0;
}
.main-navigation ul#top-menu > li > a {
    display: block;
    padding: .45em .95em;
    white-space: nowrap;
    font-size: .92rem;
    border: 1px solid #dedcd5;
    border-radius: 999px;
    background: #fbfaf7;
}
@media (max-width: 620px) {
    /* Edge-to-edge on a phone so the scroll affordance is obvious. */
    .main-navigation ul#top-menu { padding: .35em .6em; }
}

/* The tagline wrapped raggedly between breakpoints - at 800px it broke to a
 * 54px orphan ("Holmes" alone on line two), at 640px to 591/98. text-wrap:
 * balance evens the line lengths on short blocks like this; browsers without it
 * simply ignore the declaration and wrap as before. The audience is 81% Chrome
 * on current Android, so it applies almost everywhere. */
.site-branding .site-description {
    text-wrap: balance;
    margin-left: auto;
    margin-right: auto;
}

/* ---------------------------------------------------------------------------
 * Callouts, panels and the Torque note.
 *
 * These were written with inline max-width:640px, so they sat 314px narrower
 * than the 954px column and floated centred while the body text ran full width.
 * Now they fill the column like everything else.
 * ------------------------------------------------------------------------- */
.tc-callout {
    margin: 1.1em 0;
    text-align: left;
    border-left: 4px solid #C97A12;
    padding: .7em 1em;
    background: #f7f4ee;
}
.tc-panel {
    margin: 1.5em 0;
    text-align: left;
    border: 1px solid #d8dcd8;
    padding: 1em 1.15em;
    background: #fbfaf7;
}
.tc-panel h2,
.tc-panel h3 { border-top: 0; padding-top: 0; margin-top: 1em; }
.tc-panel > :first-child { margin-top: 0; }
.tc-panel > :last-child { margin-bottom: 0; }

/* A one-line aside, not a heading - left-aligned with the body, quieter. */
.tc-torque-note {
    text-align: left;
    margin: 1.2em 0;
    font-size: .95rem;
    color: #4a4a45;
}
.tc-torque-note a { font-weight: 600; }

/* The title orphaned its last word at wide viewports (808/123). */
.entry-title { text-wrap: balance; }

/* The comments feed heading. The rest of this block - .tc-home-title,
 * .tc-code-index and its pills - was superseded by the index grids below and
 * removed: its .tc-code-index a margin-right made code pills 4px narrower than
 * make pills, and its 1.5rem .tc-home-title fought the shared heading rule. */
/* .tc-home-comments-title is styled with the other two section headings
 * below - it used to carry a border-top while they carried a border-bottom,
 * so the three section labels on one page did not match. */

/* ---------------------------------------------------------------------------
 * Index grids: code ranges (.tc-code-index) and makes (.tc-make-index).
 *
 * auto-fill, not auto-fit. auto-fit collapses the empty tracks, so a 4-item
 * group like the C codes would stretch four pills across the full width while
 * a 9-item group kept normal ones - same component, two different sizes. With
 * auto-fill the track width is identical in every group, and the P groups (9
 * items) land in a single row instead of orphaning P0800 onto a line of its own.
 * ------------------------------------------------------------------------- */
/* .tc-code-index itself stays a plain block. Making it a grid too turned each
 * child group into a single ~99px grid CELL, which is why every pill inside it
 * ended up stacked one per row. */
.tc-code-index > div,
.tc-make-index {
    display: grid;
    gap: 8px;
    margin: 0 0 8px;
}
/* Explicit column counts, not auto-fill.
 *
 * auto-fill lets the count land on whatever the width allows, and the groups
 * here hold 9, 9, 9, 6, 8, 4, 4 items - so at any width giving 8 columns a
 * 9-item group breaks as 8 + 1 and orphans a single pill on its own line. The
 * counts below are picked so no group ever leaves a remainder of exactly one:
 *   9 cols -> every group fits one row
 *   6 cols -> 9=6+3, 8=6+2, 6=6, 4=4
 *   3 cols -> 9=3+3+3, 8=3+3+2, 6=3+3
 * The B and C ranges are emitted as one 8-item group for this reason; as two
 * 4-item groups they would orphan at 3 columns. The make grids use the same
 * counts so a code pill and a make pill are always the same size.
 * Changing the group sizes means re-checking these. */
.tc-code-index > div { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.tc-make-index       { grid-template-columns: repeat(9, minmax(0, 1fr)); margin: 0 0 1.6em; }

/* The h1 and the notices are prose, not pills - let them span the whole grid. */
.tc-code-index > h1,
.tc-code-index > h4,
.tc-code-index > p,
.tc-code-index > div[align="center"]:not([style]) { grid-column: 1 / -1; }

.tc-code-index a,
.tc-make-index a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 2.6em;
    padding: .4em .5em;
    border: 1px solid #dedcd5;
    border-radius: 4px;
    background: #fbfaf7;
    color: #1a1a1a;
    font-size: 14px;
    line-height: 1.25;
    text-decoration: none;
    transition: background .12s, border-color .12s;
}
.tc-code-index a:hover, .tc-code-index a:focus,
.tc-make-index a:hover, .tc-make-index a:focus {
    background: #f0ede4;
    border-color: #c3bfb2;
    text-decoration: none;
}


@media (max-width: 899px) {
    .tc-code-index > div { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .tc-make-index       { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 619px) {
    .tc-code-index > div                 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tc-make-index                       { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tc-code-index a, .tc-make-index a   { font-size: 13px; }
}

/* Section headings on the home page. The h1 and the h2s are peer labels over
 * three index grids, so they get one identical treatment - left to the theme
 * defaults the h1 rendered at a different size and weight than its siblings. */
/* The site already has a heading convention - body.page article h2 draws a 2px
 * rule above - so the home page adopts it rather than inventing a second one.
 * The h1 needs it stated explicitly (that rule only matches h2), and the
 * selectors carry the element and body.page to outrank it at (0,3,2). */
body.page article h1.tc-home-title,
body.page article h2.tc-section-title,
body.page article h2.tc-home-comments-title {
    margin: 1.9em 0 .7em;
    padding: .5em 0 0;
    border-top: 2px solid #111;
    border-bottom: 0;
    font-size: 1.15em;
    color: #222;
    text-wrap: balance;
}

/* ---------------------------------------------------------------------------
 * Recent comments.
 *
 * These are the only editorial links from the home page into the code archive,
 * so each card leads with the code page and treats the byline as metadata. The
 * question itself is the largest text: it is what tells a visitor the site is
 * answered by people.
 * ------------------------------------------------------------------------- */
.tc-comments {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 1.6em;
    padding: 0;
    list-style: none;
}
.tc-comment {
    display: flex;
    flex-direction: column;
    gap: .35em;
    margin: 0;
    padding: .8em .9em;
    border: 1px solid #e2dfd6;
    border-left: 3px solid #b9b3a3;
    border-radius: 4px;
    background: #fbfaf7;
}
.entry-content a.tc-comment-code {
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.3;
    color: #5a3d0a;
    text-decoration: none;
    /* The theme underlines links with an inset box-shadow on ".entry-content a",
     * which spans the whole element - and this link is display:block, so it drew
     * a rule across the card. The selector above carries .entry-content to
     * outrank it at (0,3,0). */
    box-shadow: none;
}
.entry-content a.tc-comment-code:hover,
.entry-content a.tc-comment-code:focus { text-decoration: underline; }
.tc-comment-text {
    margin: 0;
    font-size: .95rem;
    line-height: 1.4;
    color: #222;
}
.tc-comment-text::before { content: "\201C"; }
.tc-comment-text::after  { content: "\201D"; }
.tc-comment-meta {
    margin: 0;
    font-size: .78rem;
    color: #6b6b6b;
    font-variant-numeric: tabular-nums;
}
.tc-comment-author { font-weight: 600; color: #444; }
/* A trailing space after a CSS escape is eaten as the escape terminator,
 * so the separator is written literally rather than as \00B7. */
.tc-comment-author + .tc-comment-date::before { content: " \2009\00B7\2009"; }

/* Six comments fill three even rows. If that number ever changes and leaves a
 * single card on the last row, it spans the full width rather than sitting
 * alone beside a gap. */
.tc-comment:last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (max-width: 619px) {
    .tc-comments { grid-template-columns: 1fr; }
    .tc-comment:last-child:nth-child(odd) { grid-column: auto; }
}

/* ---------------------------------------------------------------------------
 * Reserve space for our own ad slots.
 *
 * Clarity reports CLS 0.12 from 397 real pageviews - just over the 0.1 "good"
 * threshold. Five of the thirteen slots on a code page render collapsed and
 * expand when filled, which shoves the text down while someone is reading it.
 * Measured filled heights on /pcodes/p0420/: ~368px mobile, ~248px desktop.
 *
 * Two things to know about this fix:
 *   - It covers only the four slots this theme emits. The other nine are Auto
 *     Ads injected by Google and are not ours to size.
 *   - It cannot be verified in a headless browser: three local runs measured
 *     CLS 0, 0 and 0.027 against Clarity's field figure of 0.12, because lab
 *     conditions fill ads too fast to reproduce the shift. Clarity is the only
 *     way to tell whether this worked - allow a few days.
 *
 * The unfilled rules matter: without them a slot AdSense declines to fill would
 * hold an empty 300px gap instead of collapsing.
 * ------------------------------------------------------------------------- */
ins.adsbygoogle.tc-lazy-ad { min-height: 250px; }
@media (max-width: 620px) {
    ins.adsbygoogle.tc-lazy-ad { min-height: 300px; }
}
ins.adsbygoogle.tc-lazy-ad[data-ad-status="unfilled"],
ins.adsbygoogle.tc-lazy-ad[data-ad-status="unfill-optimized"] {
    min-height: 0;
    display: none !important;
}

/* ---------------------------------------------------------------------------
 * Content tables on a phone.
 *
 * The tables inside post content are hand-written 2003-era HTML - inline
 * width="453", cellpadding="6", no classes of ours - so they cannot be given
 * per-column treatment the way .tc-code-table above is.
 *
 * The /ford/ hub is the worst case. Its four-column engine-identification
 * table (Model | Year | Engine identification | System, 123 rows) has a
 * min-content width of 460px, because slash-joined tokens never break:
 * "E-Series/Econoline/Club" alone demands 157px and
 * "VIN position 8 = DIUM/SIWIZJ2/3/5/6" another 147px. A table that wide
 * widened the whole DOCUMENT, so at 360px the headings and body copy scrolled
 * sideways too, not just the table.
 *
 * So the table scrolls inside its own box and the page is left alone. The
 * cells keep their natural wrapping and stay readable.
 *
 * REJECTED: overflow-wrap:anywhere on the data cells. It does make the table
 * fit - 460px down to 359px, no scrolling at all - and on a truncated clone in
 * a 360px div it looked fine, which is how it came to be shipped. Rendered at a
 * real 371px viewport with all 123 rows it is unusable: anywhere drops every
 * column's min-content to about one character, so the auto table algorithm
 * hands the width to whichever column has the largest max-content and starves
 * the rest. "Aerostar 3.0L" came out as "Aerost / ar / 3.0L" and the year
 * "1996-97" split as "199 / 6-97". Scoping it to the widest column only
 * (td:nth-child(3)) keeps the cells readable but recovers just 49px - 481px to
 * 432px, still wider than the 311px box - so it buys nothing over scrolling.
 *
 * Measure this one in a real narrow viewport, not a narrow div: a div inside a
 * wide window gives the table a different column distribution and hides the
 * failure completely.
 * ------------------------------------------------------------------------- */

/* Applied to every content table sitewide, not just this one - the wrapper is
 * emitted by tc_wrap_content_tables() in functions.php. Inert when the table
 * already fits: no scrollbar appears and nothing moves. */
.tc-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    margin: 0 0 1.5em;
}
.tc-table-scroll > table { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
 * The make hubs' vehicle table, folded to three columns on a phone.
 *
 * All 39 OBD1 make hubs - Ford, Toyota, Honda, BMW and the rest - carry the
 * same four-column table: Model | Year | Engine identification | System. (Five
 * say "Engine information" instead, and one has no header row; the shape is
 * identical in every case.) It needs 481px, and the content column is the
 * viewport less 72px, so below a 553px viewport it stops fitting and scrolls
 * sideways inside its box. These hubs earn about 3x what the individual vehicle
 * pages do and 93% of the audience is on a phone, so that scroll is worth
 * removing rather than living with.
 *
 * The last two columns answer one question between them - how you identify the
 * engine, and which system it runs - so they stack into a single column instead
 * of sitting side by side. Model and Year keep their own columns and span both
 * rows. Measured on /ford/ in a 326px box: 481px and scrolling becomes 322px
 * and static, with every cell still reading as written.
 *
 * The cost is height: 8,873px becomes 13,810px on /ford/. Worth it against the
 * alternative, which is a 123-row table you can only read by dragging it.
 *
 * The breakpoint is 575px rather than the theme's usual 620px because that is
 * where this particular table stops fitting - 553px, plus a margin for
 * font-rendering differences, and not so much that a table which would still
 * have fit gets folded anyway.
 *
 * .tc-table-scroll stays underneath this as the safety net: if the rule is ever
 * removed, or a hub's table turns out to be a shape this does not suit, the
 * table scrolls in its own box rather than widening the page.
 * ------------------------------------------------------------------------- */
@media (max-width: 575px) {
    .tc-table-scroll table.table-bordered,
    .tc-table-scroll table.table-bordered thead,
    .tc-table-scroll table.table-bordered tbody { display: block; }

    .tc-table-scroll table.table-bordered tr {
        display: grid;
        grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1.5fr);
    }
    /* Model and Year keep a column each, spanning both rows. */
    .tc-table-scroll table.table-bordered th:nth-child(1),
    .tc-table-scroll table.table-bordered td:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
    .tc-table-scroll table.table-bordered th:nth-child(2),
    .tc-table-scroll table.table-bordered td:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
    /* A year range is short and never needs breaking - "1995-00" was splitting
       across two lines. The auto track above sizes to the widest one (75px). */
    .tc-table-scroll table.table-bordered td:nth-child(2) { white-space: nowrap; }
    /* Engine identification sits above System in the third column. */
    .tc-table-scroll table.table-bordered th:nth-child(3),
    .tc-table-scroll table.table-bordered td:nth-child(3) { grid-column: 3; grid-row: 1; }
    .tc-table-scroll table.table-bordered th:nth-child(4),
    .tc-table-scroll table.table-bordered td:nth-child(4) { grid-column: 3; grid-row: 2; }
}

/* Per-sensor section headings on the /sensors/ pages.
   The inherited `article h3` is 1.08rem at weight 300, which reads as body
   text once a page carries seven of them - a reader scanning for one sensor
   could not find where a section started. Scoped to .sensor-head so the other
   ~20k pages keep the light h3. Specificity (0,2,1) beats `article h3`, so no
   !important is needed.

   Keep this UNDER `article h2` in both size and rule weight: on a body.page the
   h2 is 1.32rem with a 2px black border-top, so a heavier h3 inverts the
   hierarchy and reads as the more important heading of the two. */
article h3.sensor-head {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.25;
    margin: 2.2em 0 .6em;
    padding-top: .7em;
    border-top: 1px solid #d8d4cc;
}
article h3.sensor-head:first-child { border-top: 0; padding-top: 0; margin-top: 1em; }