/*
 * Theme Name: Insite
 * Theme URI: https://www.insitewebsite.com/
 * Author: Insite Website
 * Author URI: //www.insitewebsite.com/
 * Description:  A WordPress theme originally based on these frameworks: "_s" (by Automattic, the main people behind WordPress development), Twitter Bootstrap, and utilizing Font Awesome (or Fontawesome, a suite of 675+ pictographic icons). 
   This theme, like WordPress, is licensed under the GPL. You can use this theme as a base for your next WordPress theme project and change or customize it in any way. 
   Page templates includes Right-sidebar (default page template), Left-Sidebar, Full-Width, Blank with container, Blank without container Page. Other features - Currently using Bootstrap v5.3.3 , Widgetized footer area, WooCommerce ready, Compatible with Contact Form 7. This theme will be an active project which we will update from time to time. Check this page regularly for the updates.
   We have also modified this theme with some additions from L'il B (below) and other customizations - PS
 * Version: 1.0.0
 * Requires at least: 6.0
 * Tested up to: 6.5.3
 * Requires PHP: 7.0
 * License: GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: insite
 * Tags: blog, custom-menu, featured-images, threaded-comments, translation-ready, right-sidebar, custom-background, e-commerce, theme-options, sticky-post, full-width-template

Credits:

1. Bootstrap
 * Bootstrap v5.3.3 (http://getbootstrap.com)
 * Copyright 2011-2024 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * Loaded using Bootstrap CDN

2. wp_bootstrap_navwalker
 * Class Name: wp_bootstrap_navwalker
 * GitHub URI: https://github.com/twittem/wp-bootstrap-navwalker

3. Glyphicons
 * http://getbootstrap.com/components/

4. _s (Underscores)
 * http://automattic.com/
 * https://underscores.me/
 * https://github.com/Automattic/_s
 
5. FontAwesome
 * https://fontawesome.com/
 * (We are currently using the webfont version, not the SVG/JS version.)
 * see https://fontawesome.com/start
 
6. WP Bootstrap Starter (a WordPress starter theme by afterimagedesigns)
 * Insite Starter is a fork of the WP Bootstrap Starter theme, Version: 3.1.0. Many thanks!
 * https://wordpress.org/themes/wp-bootstrap-starter/
 * https://afterimagedesigns.com/wp-bootstrap-starter/
 
7. Lil' B - Bootstrap
 * A Bootstrap for Bootstrap
 * v1.0.2 (http://itsjonq.github.io/lil-b/)
 * Copyright 2014 Jon Q
 * Licensed under MIT (https://github.com/itsjonq/lil-b/blob/master/LICENSE)
 
*/

/*--------------------------------------------------------------
! Stylesheet for: insitewebsite.com/starter
--------------------------------------------------------------*/

/* Variables - customize per theme as needed */
:root {
    --color-primary: rgb(76, 76, 76);
    --color-secondary: rgb(51, 102, 153);
    --color-primary-tint-05: rgb(76, 76, 76, 0.05);
    --color-primary-tint-1: rgb(76, 76, 76, 0.1);
    --color-primary-tint-2: rgb(76, 76, 76, 0.2);
    --color-primary-tint-3: rgb(76, 76, 76, 0.3);
    --color-primary-tint-4: rgb(76, 76, 76, 0.4);
    --color-primary-tint-5: rgb(76, 76, 76, 0.5);
    --color-primary-tint-6: rgb(76, 76, 76, 0.6);
    --color-primary-tint-7: rgb(76, 76, 76, 0.7);
    --color-primary-tint-8: rgb(76, 76, 76, 0.8);
    --color-primary-tint-9: rgb(76, 76, 76, 0.9);
    --color-primary-shade-1: rgb(53, 53, 53);
	--color-primary-shade-2: rgb(17, 17, 17);
    --color-secondary-tint-05: rgb(51, 102, 153, 0.05);
    --color-secondary-tint-1: rgb(51, 102, 153, 0.1);
    --color-secondary-tint-2: rgb(51, 102, 153, 0.2);
    --color-secondary-tint-3: rgb(51, 102, 153, 0.3);
    --color-secondary-tint-4: rgb(51, 102, 153, 0.4);
    --color-secondary-tint-5: rgb(51, 102, 153, 0.5);
    --color-secondary-tint-6: rgb(51, 102, 153, 0.6);
    --color-secondary-tint-7: rgb(51, 102, 153, 0.7);
    --color-secondary-tint-8: rgb(51, 102, 153, 0.8);
    --color-secondary-tint-9: rgb(51, 102, 153, 0.9);
	--color-secondary-shade-1: rgb(12, 49, 86);
	--color-secondary-shade-2: rgb(0, 26, 53);
	
	--boxed-width-xxl: 1824px;
	--boxed-width-xl: 1440px;
	--boxed-width-lg: 1200px;
	--boxed-width-md: 992px;
	--boxed-width-sm: 768px;
}

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
# Woocommerce
# Footer
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],
template {
  display: none;
}
a {
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  outline: 0;
}
dfn {
  font-style: italic;
}
mark {
  background: #ff0;
  color: #000;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sup.pdf-indicator {
	top: -0.4em;
	margin-left: .2em;
}
a.pdf-link:hover sup.pdf-indicator {
	text-decoration: none;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 2.5rem;
}
hr {
  box-sizing: content-box;
  height: 0;
}
button,
.btn,
.btn-default {
	overflow: visible;
	display: inline-block;
	font-weight: bold;
	letter-spacing: .01rem;
	color: #212529;
	text-align: center;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-color: #EFEFEF;
	border: 1px solid #B3B3B3;
	padding: .375rem .75rem;
	margin: .1rem 0;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: .25rem;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
button:hover,
.btn:hover,
.btn-default:hover {
	background-color: #fff;
}
button:focus,
.btn:focus,
.btn-default:focus {
	background-color: #fff;
	outline: 5px auto -webkit-focus-ring-color;
	box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
	background-color: rgba(0, 255, 0, 0.15);
}
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-theme {
	border-color: transparent;
}
.btn.btn-primary {
	color: #fff;
	background-color: var(--bs-primary);
	border-color: var(--bs-primary);
}
.btn.btn-primary:hover {
	color: #fff;
	background-color: #0069d9;
	border-color: #0062cc;
}
.btn.btn-success {
	color: #fff;
	background-color: var(--bs-success);
	border-color: var(--bs-success);
}
.btn.btn-success:hover {
	color: #fff;
	background-color: #218838;
	border-color: #1e7e34;
}
.btn.btn-info {
	color: #000;
	background-color: var(--bs-info);
	border-color: var(--bs-info);
}
.btn.btn-info:hover {
	color: #fff;
	background-color: #138496;
	border-color: #117a8b;
}
.btn.btn-warning {
	color: #000;
	background-color: var(--bs-warning);
	border-color: var(--bs-warning);
}
.btn.btn-warning:hover {
	color: #fff;
	background-color: #e0a800;
	border-color: #d39e00;
}
.btn.btn-danger {
	color: #fff;
	background-color: var(--bs-danger);
	border-color: var(--bs-danger);
}
.btn.btn-danger:hover {
	color: #fff;
	background-color: #c82333;
	border-color: #bd2130;
}
.btn.btn-theme {
	color: #fff;
	background-color: #6f6f6f;
	border-color: #6f6f6f;
	padding: .275rem .75rem;
}
.btn.btn-theme:hover {
	color: #fff;
	background-color: #555;
	border-color: #555;
}
.btn.btn-link {
	display: inline;
	color: inherit;
	border: 0px solid transparent;
	border-radius: 0;
	background-color: transparent;
	padding: 0;
	font-weight: normal;
	letter-spacing: 0;
	vertical-align: baseline;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
button.close {
	color: red;
	text-shadow: none;
	opacity: .75;
	border: 1px solid gray;
	border-radius: 3px;
	line-height: 1.0rem;
	text-align: center;
	font-family: helvetica, 'helvetica neau', arial, sans-serif;
	font-size: 1.5rem;
	display: table-cell;
	vertical-align: middle;
	padding: .15rem .25rem .25rem .3rem;
	position: absolute;
	right: 6px;
	top: 6px;
}
button.close:hover {
	color: #A90000;
	opacity: 1.0 !important;
	background-color: #f1f1f1;
}
/* note:we have modified the BS btn-close background image to make it red and bolder */
/* this helped: https://websemantics.uk/tools/image-to-data-uri-converter/ */
button.btn-close {
	color: red;
	border: 1px solid gray;
	border-radius: 3px;
	position: absolute;
	right: 0;
	top: 0;
	opacity: 1.0;
	background: transparent center/.85em auto no-repeat  url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNicgZmlsbD0nI2YwMCc+PHBhdGggc3Ryb2tlPSdyZWQnIHN0cm9rZS13aWR0aD0nMicgZD0nTS4yOTMuMjkzYTEgMSAwIDAxMS40MTQgMEw4IDYuNTg2IDE0LjI5My4yOTNhMSAxIDAgMTExLjQxNCAxLjQxNEw5LjQxNCA4bDYuMjkzIDYuMjkzYTEgMSAwIDAxLTEuNDE0IDEuNDE0TDggOS40MTRsLTYuMjkzIDYuMjkzYTEgMSAwIDAxLTEuNDE0LTEuNDE0TDYuNTg2IDggLjI5MyAxLjcwN2ExIDEgMCAwMTAtMS40MTR6Jy8+PC9zdmc+")
;
}
button.btn-close:hover { 
	opacity: 1.0;
	border: 2px solid black;
}
input {
  line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  padding: 0;
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}
code {
	position: relative;
	bottom: .03rem;
}


/* My Minimal WordPress Styling comes here */


/* Alignment */
.alignleft {
	display: inline;
	float: left;
	margin-right: 1em;
}
.alignright {
	display: inline;
	float: right;
	margin-left: 1em;
}
.aligncenter {
	clear: both;
	display: block;
	margin: 0 auto;
}
/* Images and wp-captions should always fit and be responsive */
img {
	display: inline-block;
	height: auto;
	max-width: 100%;
}
img[class*="wp-image-"] {
	margin-top: 10px;
	margin-bottom: 10px;
}
.wp-caption {
	border: 1px solid #ccc;
	margin-bottom: 10px;
	max-width: 100%;
	border-radius: 4px;
	padding: 0 10px;
}
.wp-caption.aligncenter {
	margin-bottom: 10px;
}
.wp-caption img[class*="wp-image-"] {
	display: block;
}
.wp-caption .wp-caption-text {
	text-align: center;
	margin-top: 10px;
}
/* WP Gallery */
.gallery {
	margin-bottom: 1.5em;
}
.gallery a img {
	border: none;
	height: auto;
	max-width: 90%;
}
.gallery dd {
	margin: 0;
}
.gallery-caption {
	display: block;
}
/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
	max-width: 100%;
}
/* Text meant only for screen readers */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
}
.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar */
}
/* Content =================== */
.main-content-inner {
	padding-bottom: 1.5em;
}
.hentry {
	margin: 0 0 1.5em;
}
.sticky {
	display: block;
}
.bypostauthor {
	display: block;
}
/* Clearing */
.clear {
	clear: both;
}
/* Navigation ===================== */
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:active>.dropdown-menu, .dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:active>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}

/* Here some needed widget styles ===========================
 * Most widgets are adapted in the file bootstrap-wp.js - and REALLY easy to modify! ;) */
.widget { margin-bottom: 1.5em; }
.widget_nav_menu ul.sub-menu li, .widget_pages ul.children li { padding-left: 15px; }
/* Hiding the search widget's button in widgets. thats just too old-skool. :) but if you want it back, just delete the next line.
 * Note: you can change the whole appearance of the search_form() function in our searchform.php */
.widget_search .search-form input[type="submit"] { display: none; }
/* Make sure select elements fit in widgets */
.widget select {
	max-width: 100%;
}
/* Nested comments? They are threaded and nested already, you just need to add your own styling to finalize!
 * For example with some margin, like the line below ;) Delete, modify, change classes in HTML if you desire another style */
 .comment .children { margin-left: 1.5em; }
/**
* Some WP Theme Repository requirements
*/
.sticky {
}
.gallery-caption {

}
.bypostauthor {

}
.entry-meta {
	clear: both;
}

/*! =======================================================================
 * Lil' B - Bootstrap
 * A Bootstrap for Bootstrap
 * v1.0.2 (http://itsjonq.github.io/lil-b/)
 * Copyright 2014 Jon Q
 * Licensed under MIT (https://github.com/itsjonq/lil-b/blob/master/LICENSE)
 */

/**
 * Bootstrap - Lil' B
 * Typography
 */

/**
 * Typography - Base
 * This (re)sets the font-size and line-height for the site. If the font-size
 * is changed, all of the other fonts will respond/adjust appropriately.
 */
body,
.editor-visual-editor {
    /* font-size: 16px; */                /* Adjust this if needed */
    line-height: 1.65em;
    color: #030303;
}
/**
 * Typography - Color Adjustments
 * The recommended colors are listed below under their selectors. They are
 * commented out by default.
 *
 * It is recommended that the darkest color are the headers, followed by the
 * "lead", then the standard body text to help with separation and readibility.
 */
 
/**
 * Here are some client colors:
Dark Green: #336622   rgba(51, 102, 34. 1.0)
Bright Green: #44AA44   rgba(68, 170, 68. 1.0)
Light Green: #99DD99   rgba(153, 221, 153, 1.0)
Pale green: #cce5bc
Dark rust red: #ab3b2f
*/

html {
	height: 100%; /* for sticky footer */
}
body,
.editor-visual-editor {
	min-height: 100%;/* for sticky footer */
	/* Sticky Footer using Flex - PS ========= */
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	margin: 0;
	-webkit-font-smoothing: auto;
	word-wrap: break-word;
	font-family: "Fira Sans", "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	/* font-family: 'Fira Sans', sans-serif; */
	/* Sticky Footer using Flex - PS ========= */
	/* height: 100%; */ /* do we need this here? */
	background: #fff;
	overflow-x: hidden;
}

/* for sticky footer */
#page {
	flex-grow: 1;
	flex-direction: column;
	/* for fixed nav:  */
	/* padding-top: 40px; */
}
.site-content {
}
.site-footer {
}

h1, .h1, h2, .h2, h3, .h3,
h4, .h4, h5, .h5, h6, .h6 {
    /*color: #222;*/
}
h1, .h1, h2, .h2, h3, .h3,
h4, .h4, h5, .h5 {
	color: #336622;
}
.lead, .lede {
	color: #000;
	font-size: 1.12rem; /* bootstrap lead is much too large */
	font-weight: inherit;
}
blockquote {
	display: block;
	color: #000;
	font-size: 1.05rem;
	margin: 0 0 1.25em;
	background-color: #ebebeb;
	padding: 0rem 3rem;
	margin-right: 1.5rem;
	margin-left: 1.5rem;
	position: relative;
}
blockquote::before {
	content: '\0201C';
	display: block;
	position: relative;
	text-align: left;
	transform: translateX(-2.5rem);
	font-size: 9rem;
	line-height: 1;
	height: 3.69rem;
	color: rgba(255, 255, 255, .6);
	font-family: georgia, palatino, times, 'times new roman', serif;
}
blockquote::after {
	content: '\0201D';
	display: block;
	position: relative;
	bottom: .5rem;
	font-size: 9rem;
	line-height: 1;
	height: 3.69rem;
	width: 100%;
	text-align: right;
	transform: translateX(2.4rem);
	color: rgba(255, 255, 255, .6);
	font-family: georgia, palatino, times, 'times new roman', serif;
}
blockquote p {
	z-index: 2;
}
blockquote p:last-of-type {
	margin-bottom: 0;
}
blockquote cite {
	display: block;
}
.blockquote-footer {
    font-size: 85%;
    margin-top: .15rem;
}
blockquote footer cite {
	display: inline;
}
/** List typography ================== */
/* List-based selectors are separated */
ul.list,
ol.list,
ul.block-editor-block-list__block,
ul.wp-block-list,
ul.block-editor-block-list__layout {
    margin-bottom: 1.25em;  /* 1.5em */
	padding-left: 1.5em;
	list-style-position: outside;
}
.list ul,
.list ol {
	padding-left: .5em;
	margin-top: .5em; /* keep spacing even with other list items in nested lists */
}
.list li,
ul.block-editor-block-list__block li,
ul.wp-block-list li,
ul.block-editor-block-list__layout li {
	padding-left: .5rem;
	text-indent: -.5rem;
	line-height: 1.4;
	margin-bottom: .5rem;
}
.list li li {
	list-style-type: lower-alpha;
}
.list li li li {
	list-style-type: upper-roman;
}
dl {
    margin-bottom: 1.25em;
}
dt {
    margin-bottom: 0;
    margin-top: 1em;
}
dd {
    margin-left: 1em;
}
ul.bare {
	padding-left: 0rem;
}
ul.bare li {
	list-style-type: none;
}
/*Adding margin-top offset to lists if followed by a paragraph for even spacing*/
p + dt,
p + ul,
p + ol {
    margin-top: -0.15em;
}
/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
h1, .h1, h2, .h2, h3, .h3,
h4, .h4, h5, .h5 {
	color: #5F5F5F;
	font-weight: 300;
	font-optical-sizing: auto;
	line-height: 1.25;
	margin-top: .5rem;
	margin-bottom: .2em;
	font-family: 'Oswald', sans-serif;
}
.light {
	font-weight: 100;
}
.h1, h1 {
    font-size: 2.0rem;
}
.h2, h2, .h3, h3 {
    font-size: 1.75rem;
}
.h4, h4, .h5, h5 {
    font-size: 1.5rem;
}
/* make h6 font-family same as body text */
h6, .h6 {
	font-size: inherit;
	font-family: "Fira Sans", "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #030303;
	font-weight: inherit;
}
/* un-condense condensed header fonts */
.hx {
	transform: scale(1, .9);
	transform-origin: 0 100%;
	/* letter-spacing: .01rem; */
}
h1.hx, .hx.h1 {
	font-size: 2.15rem !important;
}
h2.hx, .hx.h2, h3.hx, .hx.h3 {
	font-size: 2.0rem !important;
}
h4.hx, h4.hx.h2, h5.hx, .hx.h5 {
	font-size: 1.6rem !important;
}
p {
	position: relative;
}
h1.entry-title {
  font-size: 1.75rem;
  padding-bottom: .5em;
  border-bottom: 1px solid #eaecef;
}
h2.entry-title {
  padding-bottom: .5em;
  border-bottom: 1px solid #eaecef;
}
h3.widget-title {
  font-size: 1.2rem;
}
a:active {
	background-color: rgba(150, 150, 150, 0.2);
}
a:focus {
	/* background-color: rgba(0, 255, 0, 0.15); */
	/* outline: thin dotted red; */
	/* outline: 5px auto -webkit-focus-ring-color; */
	box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
	/* transform: scale(1.1,1.1);
	transform-origin: 50% 50%; */
	outline: 1px dotted #b3b3b3;
}
a:hover,
.btn.btn-link:hover {
	color: #0056b3;
	text-decoration: underline;
}
a:visited {
	color: purple;
}
a[target="_blank"]::after {
	content: "\f24d";
	font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	display: inline-block;
	/* transform: rotate(270deg); */
	margin: 0 0 0 .25em;
	font-size: 70%;
	position: relative;
	top: -.3em;
}
a[href$=".pdf"]::after {
    /* content: "\f1c1";
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    transform: rotate(0deg);
    margin: 0 .2em;
    font-size: 100%;
    position: relative;
    top: -.1em; */
}
pre {
	-moz-tab-size: 3;
	-o-tab-size: 3;
	tab-size: 3;
	white-space: break-spaces;
}
xmp {
	white-space: break-spaces;
	font-family: courier, 'courier new', monospace;
	font-size: 110%;
	color: navy;
	-moz-tab-size: 3;
	-o-tab-size: 3;
	tab-size: 3;
}
div > span > pre {
	background-color: transparent;
	border: 0px solid transparent;
	padding: 0;
}
/* A few Typography Classes ================================= */
.small-caps {
	font-variant: small-caps;
	font-size: 1.12em;
}
/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
img {
  height: auto;
  /* Make sure images are scaled correctly. */
  max-width: 100%;
  /* Adhere to container width. */
}
figure {
  margin: 1em 0;
  /* Extra wide images within figure tags don't overflow the content area. */
}
table {
  margin: 0 0 1rem;
  width: 100%;
}
table.table {
	border-bottom: 1px solid #dee2e6;
}
table.table th {
	background-color: #eee;
}
table.table tr:nth-child(2n+1) td {
	background-color: #fcfcfc;
}
/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
label {
    margin-bottom: .25rem;
    font-weight: 700;
}
.required, .req {
	color: red;
	font-size: inherit;
	display: inline-block;
	vertical-align: middle;
}
sup.required, sup.req {
	color: red;
	font-size: 90%;
	display: inline-block;
	vertical-align: inherit;
	margin-right: .25rem;
}
/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
header#masthead {
  margin-bottom: 0;
  /* background-color: #563d7c ; */
  background-color: transparent;
  /* padding: .74rem 1rem; */
  padding: 0rem 0rem;
}
.navbar-brand > a {
  color: rgba(0, 0, 0, 0.9);
  font-size: 1.1rem;
  outline: medium none;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
}
.navbar-brand > a:visited, .navbar-brand > a:hover {
  text-decoration: none;
}
#page-sub-header {
  position: relative;
  padding-top: 5rem;
  padding-bottom: 0;
  text-align: center;
  font-size: 1.25rem;
  background-size: cover !important;
}
body:not(.theme-preset-active) #page-sub-header h1 {
  line-height: 1.6;
  font-size: 4rem;
  color: #563e7c;
  margin: 0 0 1rem;
  border: 0;
  padding: 0;
}
#page-sub-header p {
  margin-bottom: 0;
  line-height: 1.4;
  font-size: 1.25rem;
  font-weight: 300;
}
body:not(.theme-preset-active) #page-sub-header p {
color: #212529;
}
a.page-scroller {
  color: #333;
  font-size: 2.6rem;
  display: inline-block;
  margin-top: 2rem;
}
.navbar-toggler:not(:disabled):not(.disabled) {
	position: fixed; /* for fixed button */
	/* position: absolute; */ /* for scroll-away button */
	z-index: 1000;
	top: 6px;
	right: 8px;
	border: thin solid rgba(128, 128, 128, 0.5);
	padding: .25rem .5rem;
	background-color: rgba(255,255,255,.4);
}
.navbar-collapse.show ul.navbar-nav {
	background-color: gray;
	padding: 4rem 2rem 1rem;
}
body.admin-bar .navbar-toggler:not(:disabled):not(.disabled) {
	/* top: 53px; */
	/* we are using Better Admin Bar plugin to autohide the admin bar so we don't need this */
}
@media screen and (min-width: 768px) {
  body:not(.theme-preset-active) #page-sub-header h1 {
    font-size: 3.750rem;
  }
  body:not(.theme-preset-active) #page-sub-header {
    font-size: 1.25rem;
  }
}
@media screen and (min-width: 992px) {
  #page-sub-header p {
    max-width: 43rem;
    margin: 0 auto;
  }
}
/* scroll-away nav ================= */
/* Add this class to the body element in extras.php and enable js function in custom.js to use this feature */
body.scrollaway-nav {
    /* padding-top: 40px; */ /* applied to #page instead */
}
body.scrollaway-nav nav.site-nav {
    height: 40px;
    position: sticky;
    top: 0;
    transition: top 0.2s ease-in-out;
    width: 100%;
}

body.scrollaway-nav nav.site-nav.nav-up {
    top: -40px;
}

/* Menu experiments: OK2X !!!!! ==================================== */
/* .nav-holder {
	position: relative;
}
ul#nav-list {
	display: block;
	position: relative;
	z-index: 99;
	text-align: center;
	width: 1000px;
	height: auto;
	overflow-y: visible;
}
#nav-list > li {
	display: inline-block;
	position: relative;
	z-index: 100;
	width: 196.2px;
	padding-top: 0;
	padding-right: 0;
	padding-left: 0;
}
#nav-list > li > a {
	position: relative;
	z-index: 100;
	padding: 0.5rem;
}
#nav-list > li .dropdown-menu {
	display: inline-block;
	position: relative;
	width: 100%;
	width: 200px;
	min-width: 0;
}
#nav-list > li .dropdown-menu li {
	padding: 0;
}
#nav-list .dropdown-item {
	padding: 2px 8px;
} */


/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
#masthead nav, .site-nav { /** a.k.a. .site-nav */
	padding-left: 0;
	padding-right: 0;
	/* using STICKY positioning  */
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 1020;
}
#masthead nav, .site-nav, .dropdown-menu { /** a.k.a. .site-nav */
  background-color: rgba(000,000,000,.65);
  box-shadow: 0 0 0 0 rgba(0,0,0,0.0);
}
.site-nav.nav-up,
.site-nav.nav-down {
  box-shadow: 0 3px 3px 0 rgba(0,0,0,0.3);
}
.site-nav.nav-up.at-top,
.site-nav.nav-down.at-top {
  box-shadow: 0 0 0 0 rgba(0,0,0,0.0);
}
.admin-bar .site-nav {
	/* top: 32px; */
	/* we are using an admin bar hider plugin: Better Admin Bar */
}
@media screen and (max-width: 782px) {
  .admin-bar nav.navbar.site-nav {
    /* top: 46px; */
  }
}
/* for .navbar-nav > li... */
.navbar-nav {
	--bs-nav-link-padding-x: 0;
	--bs-nav-link-padding-y: 0rem;
}
.site-nav .navbar-nav > li {
	height: 40px;
}
.site-nav .navbar-nav > li > a {
  color: #f5f5f5;
  padding: 6.8px 6px;
  font-size: 1rem;
  text-transform: uppercase;
}
.site-nav .navbar-nav > li > a:hover,
.site-nav .navbar-nav > li.current_page_item > a {
	color: #fff;
	transform: scale(1.05,1.0);
	transform-origin: 50% 63%;
	text-decoration: none;
  /*background: #f9f9f9;*/
}
.site-nav .navbar-nav > li > a:focus {
	box-shadow: 0 -.2rem 0 .2rem rgba(0, 123, 255, .25);
}
.site-nav .navbar-nav > li.current_page_item > a {
	background: rgba(255,255,255,.15);
}
.navbar-brand {
  height: auto;
}
.width-sm .navbar-brand, .width-xs .navbar-brand {
	display: none;
}
.navbar-brand:hover {
  transform: scale(1.1,1.1);
  transform-origin: 50% 60%;
}
.navbar-toggle .icon-bar {
  background: #000 none repeat scroll 0 0;
}
.dropdown-menu .dropdown-toggle::after {
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
  border-top: 0.3em solid transparent;
}
a.navlink:active {
	background-color: rgba(255, 255, 255, 0.15);
}
/* dropdown menus */
.navbar-nav .dropdown-menu[data-bs-popper] {
	--bs-dropdown-spacer: 0;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
	--bs-navbar-active-color: #fff;
}
.dropdown-menu {
	margin: 0 0;
	font-size: 1rem;
	color: #fff;
	background-clip: padding-box;
	border: 0px solid rgba(0,0,0,.15);
	border-radius: 0;
}
.dropdown-item,
.dropdown-item:visited {
	color: #fff;
}
.dropdown-item:focus, .dropdown-item:hover {
	color: #fff;
	transform: scale(1.1,1.2);
	transform-origin: 20% 50%;
}
/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
  display: block;
}
.navbar-toggler-icon {
	background: transparent center/.85em auto no-repeat  url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNicgZmlsbD0nI2YwMCc+PHBhdGggc3Ryb2tlPSdyZWQnIHN0cm9rZS13aWR0aD0nMicgZD0nTS4yOTMuMjkzYTEgMSAwIDAxMS40MTQgMEw4IDYuNTg2IDE0LjI5My4yOTNhMSAxIDAgMTExLjQxNCAxLjQxNEw5LjQxNCA4bDYuMjkzIDYuMjkzYTEgMSAwIDAxLTEuNDE0IDEuNDE0TDggOS40MTRsLTYuMjkzIDYuMjkzYTEgMSAwIDAxLTEuNDE0LTEuNDE0TDYuNTg2IDggLjI5MyAxLjcwN2ExIDEgMCAwMTAtMS40MTR6Jy8+PC9zdmc+")
;
}
.collapsed .navbar-toggler-icon {
    background: transparent center/.85em auto no-repeat url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    background-size: contain;
}

.dropdown-item {
  line-height: 1.2;
  padding-bottom: 0.313rem;
  padding-top: 0.313rem;
}
.dropdown-menu {
  min-width: 12.500rem;
}
.dropdown .open .dropdown-menu {
  display: block;
  left: 12.250em;
  top: 0;
}
.dropdown-menu .dropdown-item {
  white-space: normal;
  background: transparent;
  line-height: 1.6;
}
.dropdown-menu .dropdown-item:hover {
  background: transparent;
}
@media screen and (min-width: 37.5em) {
  .menu-toggle {
    display: none;
  }
}
@media screen and (min-width: 769px) {
  .dropdown-menu li > .dropdown-menu {
    right: -9.875rem;
    top: 1.375rem;
  }
}
@media screen and (max-width: 991px) {
  .navbar-nav .dropdown-menu {
    border: medium none;
    margin-left: 1.250rem;
    padding: 0;
  }
  .dropdown-menu li a {
    padding: 0;
  }
  .site-nav .navbar-nav > li > a {
    padding-bottom: 0.625rem;
    padding-top: 0.313rem;
  }
  .navbar-light .navbar-toggler {
    border: medium none;
    outline: none;
  }
}
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
  margin: 0 0 1.5em;
  overflow: hidden;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  float: left;
  width: 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  float: right;
  text-align: right;
  width: 50%;
}
.comment-content.card-block {
  padding: 20px;
}
.navigation.post-navigation {
  padding-top: 1.875rem;
}
.post-navigation .nav-previous a,
.post-navigation .nav-next a {
  border: 1px solid #ddd;
  border-radius: 0.938rem;
  display: inline-block;
  padding: 0.313rem 0.875rem;
  text-decoration: none;
}
.post-navigation .nav-next a::after {
  content: " \2192";
}
.post-navigation .nav-previous a::before {
  content: "\2190 ";
}
.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover {
  background: #eee none repeat scroll 0 0;
}
/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  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;
  border-radius: 3px;
  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: bold;
  height: auto;
  left: 0.313rem;
  line-height: normal;
  padding: 0.938rem 1.438rem 0.875rem;
  text-decoration: none;
  top: 0.313rem;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}
/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
  outline: 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;
}
a img.alignright {
  float: right;
  margin: 0.313rem 0 1.25rem 1.25rem;
}
a img.alignnone {
  margin: 0.313rem 1.25rem 1.25rem 0;
}
a img.alignleft {
  float: left;
  margin: 0.313rem 1.25rem 1.25rem 0;
}
a img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.wp-caption.alignnone {
  margin: 0.313rem 1.25rem 1.25rem 0;
}
.wp-caption.alignleft {
  margin: 0.313rem 1.25rem 1.25rem 0;
}
.wp-caption.alignright {
  margin: 0.313rem 0 1.25rem 1.25rem;
}
/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content: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 {
  content: "";
  display: table;
  table-layout: fixed;
}
.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
  clear: both;
}
/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
  margin: 0 0 1.5em;
  font-size: 0.875rem;
  /* Make sure select elements fit in widgets. */
}
.widget select {
  max-width: 100%;
}
.widget_search .search-form input[type="submit"] {
  display: none;
}
.nav > li > a:focus,
.nav > li > a:hover {
  background-color: #eee;
  text-decoration: none;
}
.half-rule {
  width: 6rem;
  margin: 2.5rem 0;
}
.widget_categories .nav-link {
  display: inline-block;
}
/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/* Prevent Jumbotron ================= */
#masthead > .container,
#content > .container {
	background-color: #fff;
}
#content > .container {
	padding-top: 1rem;
	padding-bottom: 3.5rem;
}

/*--------------------------------------------------------------
## Header elements
--------------------------------------------------------------*/
.header-brand a {
	display: block;
}
.container.header-content {
	padding-right: 0;
	padding-left: 0;
}
.container.header-content .col {
	-ms-flex-preferred-size: auto;
	flex-basis: auto;
}
/* Box Jumbotrons */
@media (min-width: 1200px) {
	body {
		background: #fbfbfb;
		background: #fff;
	}
	.container,
	.container.header-content {
		width: 100%;
		max-width: var(--boxed-width-xxl);
		padding-right: 45px;
		padding-left: 45px;
	}
}
/*--------------------------------------------------------------
# Miscellaneous elements
--------------------------------------------------------------*/
/* element which is full width inside of a boxed container */
.breakout {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}
/* elements that are boxed within a larger container */

.boxed {
	width: 100%;
	max-width: var(--boxed-width-xxl);
	margin-right: auto;
	margin-left: auto;
}
.boxed-sm {
	max-width: var(--boxed-width-sm);
}
.boxed-md {
	max-width: var(--boxed-width-md);
}
.boxed-lg {
	max-width: var(--boxed-width-lg);
}
.boxed-xl {
	max-width: var(--boxed-width-xl);
}
.boxed-xxl {
	max-width: var(--boxed-width-xxl);
}
.width-md .boxed-responsive {
	max-width: var(--boxed-width-sm);
}
.width-lg .boxed-responsive {
	max-width: var(--boxed-width-md);
}
.width-xl .boxed-responsive {
	max-width: var(--boxed-width-lg);
}
.width-xxl .boxed-responsive {
	max-width: var(--boxed-width-xl);
}
.width-xxl .boxed-responsive {
	max-width: var(--boxed-width-xxl);
}
.boxed-fit-content {
	width: fit-content;
}
/* hide elements from non-logged in visitors */
.logged-in-only {
	display: none;
}
.logged-in .logged-in-only {
	display: block;
}
/* autohide admin bar */
html,
html body,
* html body {
	margin-top: 0 !important;
}
html #wpadminbar {
	top: -27px !important;
	opacity: 0.01;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	-webkit-transition-delay: 250ms;
	transition-delay: 250ms;
}
html #wpadminbar:hover {
	opacity: 1;
	top: 0 !important
}
@media screen and (max-width: 782px) {
	html #wpadminbar {
		top: -41px !important;
		-webkit-transition-delay: 0;
		transition-delay: 0;
	}
	html #wpadminbar .quicklinks {
		display: -ms-flexbox!important;
		display: flex!important;
		-ms-flex-pack: justify!important;
		justify-content: space-between!important;
		overflow: auto;
		max-width: 100%;
	}
	html #wpadminbar .quicklinks ul {
		display: -ms-flexbox!important;
		display: flex!important;
	}
}
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
#content.site-content {
  /* padding-bottom: 3.75rem; */
  /* padding-top: 4.125rem; */
  /* padding-top: 1rem; */
}
.sticky .entry-title::before {
  content: '\f08d';
  font-family: "Font Awesome\ 5 Free";
  font-size: 1.563rem;
  left: -2.5rem;
  position: absolute;
  top: 0.375rem;
  font-weight: 900;
}
.sticky .entry-title {
  position: relative;
}
.single .byline,
.group-blog .byline {
  display: inline;
}
.page-content,
.entry-content,
.entry-summary {
  margin: 1.5em 0 0;
}
.page-links {
  clear: both;
  margin: 0 0 1.5em;
}
.page-template-blank-page .entry-content,
.blank-page-with-container .entry-content {
  margin-top: 0;
}
.post.hentry {
  margin-bottom: 4rem;
}
.posted-on, .byline, .comments-link {
  color: #9a9a9a;
}
.entry-title > a {
  color: inherit;
}
/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
  word-wrap: break-word;
}
.bypostauthor {
  display: block;
}
.comment-body .pull-left {
  padding-right: 0.625rem;
}
.comment-list .comment {
  display: block;
}
.comment-list {
  padding-left: 0;
}
.comments-title {
  font-size: 1.125rem;
}
.comment-list .pingback {
  border-top: 1px solid rgba(0, 0, 0, 0.125);
  padding: 0.563rem 0;
}
.comment-list .pingback:first-child {
  border: medium none;
}
/*--------------------------------------------------------------
## Reveal elements
--------------------------------------------------------------*/
.dropdown-toggle::after {
	display: inline-block;
	margin-left: .255em;
	vertical-align: .2em;
	content: "";
	border-top: .35em solid;
	border-right: .4em solid transparent;
	border-bottom: 0;
	border-left: .4em solid transparent;
	transform: rotate(0deg);
	transition: transform .2s linear;
}
.dropdown-toggle[aria-expanded="true"]::after {
	transform: rotate(-180deg);
}
nav span.caret {
	display: none;
}
.caret::after {
	display: inline-block;
	content: "";
	margin-left: .255em;
	vertical-align: .15em;
	border-top: .45em solid;
	border-right: .55em solid transparent;
	border-bottom: 0;
	border-left: .55em solid transparent;
}
.chevron::after {
	content: "";
	position: relative;
	display: inline-block;
	width: 0.45em;
	height: 0.45em;
	border-right: 0.1em solid black;
	border-top: 0.1em solid black;
	transform: rotate(135deg);
	translate: .1em -.2em;
	transform-origin: 50% 50%;
	margin-right: 0.5em;
}
/* .chevron-down, .chevron {
	box-sizing: border-box;
	position: relative;
	display: inline-block;
	transform: scale(0.75,0.75);
	transform-origin: 50% 50%;
	width: 1rem;
	height: 1rem;
	border: 2px solid transparent;
	border-radius: 100px;
}
.chevron-down::after, .chevron::after {
    content: "";
    display: inline-block;
    box-sizing: border-box;
    position: absolute;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid;
    border-right: 2px solid;
    transform: rotate(45deg);
    left: 4px;
    top: 2px
} */
/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
  /* Theme Footer (when set to scrolling) */
  display: none;
}
/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
  display: block;
}
/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.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 {
  max-width: 100%;
}
/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
  background: #f1f1f1 none repeat scroll 0 0;
  border: 1px solid #f0f0f0;
  max-width: 96%;
  padding: 0.313rem 0.313rem 0;
  text-align: center;
}
.wp-caption img[class*="wp-image-"] {
  border: 0 none;
  height: auto;
  margin: 0;
  max-width: 100%;
  padding: 0;
  width: auto;
}
.wp-caption .wp-caption-text {
  font-size: 0.688rem;
  line-height: 1.063rem;
  margin: 0;
  padding: 0.625rem;
}
.wp-caption-text {
  text-align: center;
}
/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
  margin-bottom: 1.5em;
}
.gallery-item {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  width: 100%;
}
.gallery-item .gallery-columns-2 {
  max-width: 50%;
}
.gallery-item .gallery-columns-3 {
  max-width: 33.33333%;
}
.gallery-item .gallery-columns-4 {
  max-width: 25%;
}
.gallery-item .gallery-columns-5 {
  max-width: 20%;
}
.gallery-item .gallery-columns-6 {
  max-width: 16.66667%;
}
.gallery-item .gallery-columns-7 {
  max-width: 14.28571%;
}
.gallery-item .gallery-columns-8 {
  max-width: 12.5%;
}
.gallery-item .gallery-columns-9 {
  max-width: 11.11111%;
}
.gallery-caption {
  display: block;
}
/*--------------------------------------------------------------
# Plugin Compatibility
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Woocommerce
--------------------------------------------------------------*/
.woocommerce-cart-form .shop_table .coupon .input-text {
  width: 8.313rem !important;
}
.variations_form .variations .value > select {
  margin-bottom: 0.625rem;
}
.woocommerce-MyAccount-content .col-1,
.woocommerce-MyAccount-content .col-2 {
  max-width: 100%;
}
/*--------------------------------------------------------------
## Elementor
--------------------------------------------------------------*/
.elementor-page article .entry-footer {
  display: none;
}
.elementor-page.page-template-fullwidth #content.site-content {
  padding-bottom: 0;
  padding-top: 0;
}
.elementor-page .entry-content {
  margin-top: 0;
}
/*--------------------------------------------------------------
## Visual Composer
--------------------------------------------------------------*/
.vc_desktop article .entry-footer {
  display: none;
}
.vc_desktop #content.site-content {
  padding-bottom: 0;
  padding-top: 0;
}
.vc_desktop .entry-content {
  margin-top: 0;
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
footer#colophon {
  font-size: 85%;
}
body:not(.theme-preset-active) footer#colophon {
  color: #99979c;
  background-color: #f7f7f7;
}
.navbar-dark .site-info {
  color: #fff;
}
.copyright {
  font-size: 0.875rem;
  margin-bottom: 0;
  text-align: center;
}
.copyright a, footer#colophon a {
  color: inherit;
}
@media screen and (max-width: 767px) {
  .site-nav .navbar-nav > li > a {
    padding-bottom: 0.938rem;
    padding-top: 0.938rem;
  }
}
.plinth {
	cursor: default;
	display: block;
	margin: 0px auto 2rem;
	border-bottom: 3px solid #ddd;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	height: 0;
	width: 100px;
}
.plinth::after {
	content: '';
	display: block;
	margin: 0px auto;
	border-top: 3px solid #ddd;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	height: 0;
	width: 100px;
	top: 5px;
	position: relative;
	left: -10px;
}
/*--------------------------------------------------------------
# Pages and Sections
--------------------------------------------------------------*/
/* typography ====== */
.page-typography .hero {
	text-align: center;
	padding: 5rem 0;
	margin-bottom: 1rem;
	margin-top: -1.5rem;
	background-color: whitesmoke;
}
/* contact ====== */
.wpcf7 input.form-control {
	border-color: var(--color-primary-tint-3);
}
.wpcf7-form .wpcf7-response-output.alert {
    /* color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba; */
}
.wpcf7-form .wpcf7-response-output:empty {
	display: none;
}
.wpcf7 form .wpcf7-response-output {
	margin: 0 0 1em;
	padding: 0.4em 1em;
	border: 1px solid #00a0d2;
	border-radius: 5px;
	background-color: rgba(255, 185, 0, 0.2));
	color: #000;
	font-weight: bolder;
}
.wpcf7-not-valid {
	border-color: #ffb900;
	box-shadow: 0 0 0 .2rem rgba(255, 185, 0, 0.25);
}
.wpcf7-not-valid-tip {
	font-style: italic;
	/* font-weight: bold; */
}
label .small {
	font-size: 90%;
	/* font-weight: bold; */
	font-style: italic;
}
.anr_captcha_field {
    margin-bottom: 6px;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	font-style: italic;
	font-size: .95em;
	color: var(--color-primary);
	opacity: 0.85;
}
::-moz-placeholder { /* Firefox 19+ */
	font-style: italic;
	font-size: .95em;
	color: var(--color-primary);
	opacity: 0.85;
}
:-ms-input-placeholder { /* IE 10+ */
	font-style: italic;
	font-size: .95em;
	color: var(--color-primary);
	opacity: 0.85;
}
:-moz-placeholder { /* Firefox 18- */
	font-style: italic;
	font-size: .95em;
	color: var(--color-primary);
	opacity: 0.85;
}
::placeholder {
	font-style: italic;
	font-size: .95em;
	color: var(--color-primary);
	opacity: 0.85;
}
/* color chart page-color-chart ====== */
.color-row {
	font-size:12px;
	margin: 0 10px;
	border-bottom: 0px solid silver;
	border-left: 0px solid silver;
}
.color-col {
}
div.swatch {
	height:96px;
}
div.spec {
	border-color: silver;
	border-style: solid;
	border-width: 0 1px 1px 1px;
	padding-left: 6px;
}
div.spec.prime {
	border-style: solid;
	border-color: gray;
	border-width: 0px 2px 2px 2px;
}
div.spec.prime .alt-var-name {
	font-weight: bold;
	font-size: 15px;
}
div.spec span {
	display: block;
}
div.spec span.cmyk {
	white-space: pre;
	margin: 6px 6px 6px 0;
	padding: 6px 12px 6px 6px;
	line-height: 1.4;	
	min-height: 80px;
	background-color: whitesmoke;
}
.key-col .swatch {
	border-width: 1px 1px 0;
	border-style: solid;
	border-color: silver;
	background-color: #fdfdfd;
}
textarea#all-css-area {
	width: 100%;
	height: 60vh;
	padding: 0.5rem 1rem;
}
/*--------------------------------------------------------------
# Media Query
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Notebook
--------------------------------------------------------------*/
@media only screen and (max-width: 1280px) {
  html {
    font-size: 95%;
  }
}
@media screen and (max-width: 1199px) {
  .navbar-dark .dropdown-item {
    color: #fff;
  }
  .navbar-nav .dropdown-menu {
    /* background: transparent;
    box-shadow: none;
    border: none; */
  }
}
/*--------------------------------------------------------------
## Netbook - small laptop - ipad landscape
--------------------------------------------------------------*/
@media only screen and (max-width: 1024px) {
  html {
    font-size: 90%;
  }
}
/*--------------------------------------------------------------
## iPad - portrait
--------------------------------------------------------------*/
@media only screen and (max-width: 960px) {
  html {
    font-size: 85%;
  }
}
/*--------------------------------------------------------------
## iPad
--------------------------------------------------------------*/
@media only screen and (max-width: 768px) {
  html {
    font-size: 85%;
  }
}
/*--------------------------------------------------------------
## iPhone
--------------------------------------------------------------*/
@media only screen and (max-width: 480px) {
  html {
    font-size: 85%;
  }
}



/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* !! BREAKPOINTS - see: http://v4-alpha.getbootstrap.com/layout/overview/ */
/* We are using the same breakpoins as Bootstrap */
/* We are using the max-width version */
/* This means that we are using a mobile-LAST implementation */
/* Code for ALL devices appears ABOVE the breakpoint rules;
   Code for specific, progressively smaller, devices appears within the breakpoint rules. */
/* Bootstrap breakpoints are identified as xl, lg, md, sm, xs */

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* Jumbo devices (large desktops 1921px or larger) - NOT a Bootstrap breakpoint */
@media (min-width: 1921px) {
	/* code for jumbo screen goes here when needed */
}

/* Extra large devices bootstrap xxl (large desktops 1400px or larger) */
/* No media query since the extra-large breakpoint has no upper bound on its width */
/* Code for ALL devices goes BEFORE this point. */

body {
	/* only show indicator for admins */
	/* a border for quick visual indicator of which breakpoint we are in */
	border-width: 0 0 0 0;
	border-color: red;	/* indicates xl state */
}
body.show-width {
	/* for development use 0 3px 0 0 */
	/* a border for quick visual indicator of which breakpoint we are in */
	border-width: 0 0px 0 0;
	border-style: solid;
}

/* We use a state indicator to synch these breakpoints with our custom.js
 * We use javascript to perform various tasks based on the visitors' browser window state.
 * See our custom.js file for details. 
 * We also use a visible state indicator for logged in admins for ease of theming.
 */
.state-indicator {
	position: fixed;
	top: calc(100vh - 15px);
	right: 9999px;
	text-indent: -9999px;
	height: 10px;
	width: 10px;
	min-width: 10px;
	border-radius: 50%;
	overflow: hidden;
	background-color: black; /* indicates xxl state */
    z-index: 1; /* for xxl state */
}
body.show-width .state-indicator {
	right: 5px;
}
/* devices in LANDSCAPE mode */
@media (orientation: landscape) {
	.state-indicator:before { content: 'landscape'; }
}

/* devices in PORTRAIT mode */
@media (orientation: portrait) {
	.state-indicator:before { content: 'portrait'; }
}
/* use ::after pseudo element to show properties */
.state-indicator:after {
	content: 'width-' attr(data-content);
	display: block;
	position: fixed;
	right: 5px;
	top: calc(100vh - 45px);
	text-indent: 0;
	width: fit-content;
	font-size: .95rem;
	color: gray;
	background-color: whitesmoke;
	padding: 0 8px;
	visibility: hidden;
}
.state-indicator:hover:after {
	visibility: visible;
}

/* Extra Large devices - Bootstrap xl
 * (less than 1400px:
 * roughly large-ish desktops, large tablets in landscape mode, and everything smaller) */
@media (max-width: 1399px) {
	/* xl code goes here */
	.state-indicator {
        z-index: 2;
		background-color: red;
    }
	body {
		border-color: red;	
	}
	.container {
		width: 96vw;
		max-width: var(--boxed-width-xl);	
	}
}

/* Large devices - Bootstrap lg
 * (less than 1200px:
 * roughly smallish desktops, tablets in landscape mode, and everything smaller) */
@media (max-width: 1199px) {
	/* lg code goes here */
	.state-indicator {
        z-index: 3;
		background-color: orange;
    }
	body {
		border-color: orange;	
	}
	.container {
		width: 96vw;
		max-width: var(--boxed-width-lg);	
	}
}

/* RARE - Large devices (desktops, 992px to 1199px ONLY) */
@media (min-width: 992px) and (max-width: 1199px) { 
	/* lg ONLY code goes here */
}

/* Medium devices - Bootstrap md
 * (less than 992px: 
 * roughly tablets in portrait mode and some large phones in landscape mode, and all smaller) */
@media (max-width: 991px) {
	/* md code goes here */
	.state-indicator {
        z-index: 4;
		background-color: yellow;
    }
	body {
		border-color: yellow;	
	}
	.container {
		width: 98vw;
		max-width: var(--boxed-width-md);	
	}
	.col-md-6 {
		width: 50%;
	}
	.col-md-4 {
		width: 33.33333333%;
	}
	.col-md-3 {
		width: 25%;
	}
	.site-footer span.sep {
		display: block;
		visibility: hidden;
		line-height: .5;
	}
}

/* RARE - Medium devices (usually tablets, 768px to 991px ONLY) */
@media (min-width: 768px) and (max-width: 991px) {  }

/* Tall narrow phone in landscape mode - like iphonex */
@media (max-width: 991px) and (orientation: landscape) {
	nav.site-navigation {
		background-color: transparent;
	}
    .navbar-header {
        float: none;
    }
    .navbar-default .navbar-toggle {
        display: block;
		margin-right: -25px !important;
		border-color: #cce5bc;
		background-color: rgba(255,255,255,.7);
		margin-right: -10px;
    }
	.navbar-default .navbar-toggle:focus,
	.navbar-default .navbar-toggle:hover {
		border-color: #cce5bc;
		background-color: #e4f1dc;
	}
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    /* .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-collapse.collapse.in {
        display: block!important;
    } */
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
}

/* Small devices - Bootstrap sm
 *  (less than 768px:
  * roughly phones in lndscape mode and anything smaller) */
@media (max-width: 767px) {
	/* sm code goes here */
	.state-indicator {
        z-index: 5;
		background-color: green;
    }
	body {
		border-color: green;	
	}
	.site-nav {
		background-color: rgba(000,000,000,.65);
		box-shadow: 0 0 6px 0 rgba(0,0,0,.8); /* for fixed button */
		box-shadow: none; /* for scroll-away menu */
	}
	.site-nav > .container {
		width: 100%;
		/* max-width: var(--boxed-width-sm); */
	}
	.site-nav .dropdown-menu {
		background-color: transparent;
		box-shadow: none;
	}
	body.scrollaway-nav nav.site-nav {
		height: auto;
		position: absolute;
		top: 0;
	}
	#page {
		padding-top: 0px;
	}
	.container {
		width: 100%;
		max-width: 98%;
	}
	.col-sm-12 {
		width: 100%;
	}
	.col-sm-6 {
		width: 50%;
	}
	.site-header .col-sm-6 {
		width: 100%;
	}
	.col-sm-4 {
		width: 33.33333333%;
	}
	.col-sm-7 {
		width: 58.33333333%;
	}
	.col-sm-5 {
		width: 41.66666666%;
	}
	header#masthead {
		padding: 1rem 1rem;
	}
	 nav.navbar.site-nav {
		background-color: transparent;
		position: sticky;
		top: 0px;
		z-index: 10;
		opacity: 1.0;
	}
	.navbar-toggle {
		padding: 9px 10px;
		margin-top: 8px;
		margin-right: -15px;
		margin-bottom: 8px;
		background-color: rgba(255,255,255,.3);
		border: 1px solid green;
		border-radius: 4px;
	}
	.navbar-default .navbar-toggle {
		border-color: green;
	}
	.navbar-default .navbar-toggle .icon-bar {
		background-color: green;
	}
	.h1, h1 {
		font-size: 1.8rem;
	}
	.h2, h2, .h3, h3 {
		font-size: 1.65rem;
	}
	.h4, h4, .h5, h5 {
		font-size: 1.45rem;
	}
}

/* RARE - Small devices (landscape phones, 544px to 767px ONLY) */
@media (min-width: 544px) and (max-width: 767px) {
	.hidden-xs {
		display: inline!important;
	}
}
/* like iphone 6/7/8 */
@media (max-width: 767px) and (orientation: landscape) {
}
/* like iphone 5 */
@media (max-width: 568px) and (orientation: landscape) {
}
/* bootstrap override */
@media (min-width: 576px) {
	.container {
		/* max-width: inherit; */
	}
}
/* Extra small devices - Bootstrap xs
 *  (less than 544px: typically phones in portrait mode) */
@media (max-width: 543px) {
	/* xs code goes here */
	.state-indicator {
        z-index: 6;
		background-color: blue;	
    }
	body {
		border-color: blue;	
	}
	.col, .col-xs-12 {
		width: 100%;
		flex-basis: auto;
	}
	.col-xs-6 {
		width: 50%;
	}
	.order-1-xs-2 {
		order: 2 !important
	}
	.order-2-xs-1 {
		order: 1 !important
	}
	.breakout-xs {
		width: 100vw;
		position: relative;
		left: 50%;
		right: 50%;
		margin-left: -50vw;
		margin-right: -50vw;
	}
	nav.site-navigation {
		background-color: transparent;
	}
	.navbar-default .navbar-toggle {
		border-color: #cce5bc;
		background-color: rgba(255,255,255,.7);
		margin-right: -10px;
	}
	.navbar-default .navbar-toggle:focus,
	.navbar-default .navbar-toggle:hover {
		border-color: #cce5bc;
		background-color: #e4f1dc;
	}
	.site-navigation {
		pointer-events: none;
	}
	.navbar-header button,
	.navbar-collapse.in {
		pointer-events: auto;
	}
	.width-xs .text-xs-start {
		text-align: left !important;
	}
	.width-xs .text-xs-end {
		text-align: right !important;
	}
	.width-xs .text-xs-center {
		text-align: center !important;
	}
}
/* Extra EXTRA small devices - no Bootstrap size
 *  (less than 375px: typically small phones in portrait mode) */
@media (max-width: 375px) {
}
/* Extra EXTRA small devices - no Bootstrap size
 *  (less than 321px: typically very very small phones in portrait mode) */
@media (max-width: 321px) {
	.state-indicator {
		background-color: blueviolet;	
    }
	body {
		border-color: blueviolet;
	}
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* end of breakpoints code */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */