body {
	margin-top: initial;
	line-height: initial;
  color: WhiteSmoke !important;
}

b, strong {color: PeachPuff;}

.portrait-title h1 {
	color: white;
}

blockquote {
  margin: 0.8rem 0 0.8rem 1rem;
  font-size: 150%;
}
 
input {
	color: black;
}

button, html input[type="button"] {
	background-color: orange;
	border-radius: 5px;
}

input, select, textarea{
  width: 100%;
  max-width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
  cursor: pointer;
  float: initial;
}

label {
  padding: 6px 6px 6px 0;
  display: inline-block;
}

.form-container {
	width: 100%;
}

.form-component {
	width: 100%;
	margin: 10px 0px 10px 0px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.form-select {

}

.form-label {
	width: 100%;
	font-family: "Lucida Console", Monaco, monospace;
	font-weight: normal;
	font-size: 100%;
	margin: 0px 0px 0px 0px;
}

.form-label label {
	margin-bottom: 0;
}

.form-input {
	width: 100%;
	color: black;
	margin: 0px;
}

.form-input input[type="text"] {
	max-width: 300px;
}

.form-input input[type="tel"] {
	max-width: 200px;
}

.form-input input[type="email"] {
	max-width: 400px;
}

.form-input textarea {
	max-width: 600px;
	height: 8em;
}

.form-button-container {
	display: flex;
	justify-content: flex-end;
	width: 100%;
}

.form-desc {
	font-size: 50%;
	color: DarkGrey;
}

.form-option {
	color: white;
	width: auto;
	display: inline-block;
	margin-right: 10px;
}

input[type="checkbox"], input[type="radio"] {
	display: inline-block;
	width: auto;
}

@media screen and (max-width: 600px) {
  .form-container {
    padding-right: 1em;
  }
}

.navbar-fixed-bottom, .navbar-fixed-top {
	position: initial;
}


.navbar-brand, .navbar-nav li a {
}

.breadcrumb-container {

}

.breadcrumb {
	margin: 20px 0px 5px 0px;
	padding: 5px 10px;
	background-color: #282A36;
	text-align: right;
}

.navbar-collapse {

}

.navbar-nav .breadcrumb .navbar-right {
	margin: 0px;
	padding: 0px;
	max-height: initial;
	height: initial;
}

.breadcrumb li a {
	font-size: 80%;
}

.home-section  {
	padding: 25px 0px;
}

.article-container {
    max-width: 760px;
    padding: 10px 20px 0px;
    margin: 0px auto;
}

ul.ul-edu li .description p.type {
  font-size: 0.8rem;
}

img {
	max-width:100%; 
	height:auto;
}

@media print{
	#comic-strip {
		page-break-inside: avoid;
	}
	.image-comic-title1 {
		color: IndianRed !important;
		font-size: 20px !important;
	}
	.image-comic-title2 {
		color: MediumOrchid !important;
		font-size: 20px !important;
	}
	.article-style {
		font-size: 16px !important;
	}
}

 /* Image Caption Styling */

.image-caption-title {
  font-style: italic;
  color: LightSlateGray;
  font-size: 85%;
} 

 /* Image Comic Styling */

.image-comic-title1 {
	margin: 0px 10px 10px 20px;
	padding: 10px;
	text-align: left;
  font-style: normal;
  color: IndianRed;
  font-size: 85%;
} 

.image-comic-title2 {
	margin: 0px 20px 10px 10px;
	padding: 10px;
	text-align: left;
  font-style: normal;
  color: MediumOrchid;
  font-size: 85%;
} 

.image-comic-quotes {
	color: LightSlateGray;
}

.image-comic-caption {
	margin: 0px 20px 10px 10px;
	padding: 10px;
	text-align: left;
  font-style: italic;
  color: LightSlateGray;
  font-size: 85%;
}

.text-comic-title-box {
	display: flex;
	justify-content: center; 
	align-items: center;

}

.article-style figure {
  text-align: center;
}

.imgTitle {
	width: 50px;
}

.content-block-wrap {
  width: 46.50%;
  vertical-align: top;
}

.content-block-wrap img {
  margin: 0;
  margin-right: 0.5em;
  float: left;
}

.clearfix {
  content: "";
  clear: both;
  display: table;
}

.fa-li {color: orange;}

#profile .portrait-title [itemprop="service-category"] {
	font-size: small;
}

#profile .portrait-title [itemprop="connectorand"] {
  margin: 10px 0 0 0;
}

#profile .portrait-title [itemprop="mission"] {
  margin: 10px 0 0 0;
}

#profile .portrait-title [itemprop="jobTitle"] {
	margin: 0;
}

.article {
}
.article-header-caption-dynamic {
margin-left: auto;
margin-right: auto;
margin: 0 auto;
padding: 2px 5px;
color: #fff;
font-size: .7em;
background: #000;
text-align: right;
z-index: 5;
opacity: 0.65;
border-radius: 5px 0 0 0;
}

@media (min-width: 64em) {
  .article-header-caption-dynamic {
    padding: 5px 10px;
  }
}

.article-header-caption a:link {color: orange;}
.article-header-caption a:hover {text-decoration: underline;}

.article-header {
	position: relative;
}

.article-header img {
  max-width: 100%;
  height: auto;
  text-align: center;
  color: white;
}

.article-banner {
	display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  max-width:100%;
  
  box-shadow: 1px 1px 0px #edefed, -1px -1px 0px #edefed, 1px -1px 0px #edefed, -1px 1px 0px #edefed;
  margin-top: 60px;
  margin-bottom: 60px;
  padding-left: 0;
  padding-right: 0;
}

.service-price-table {
	margin: 25px;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: stretch;
	flex-wrap: wrap;
	border: 1px solid black;
	margin-left: auto;
	width: auto;
	max-width: 300px;

}

.service-price-table-long {
	margin: 25px;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: stretch;
	flex-wrap: wrap;
	border: 1px solid black;
	margin-left: auto;
	width: auto;
}

.price-data-label {
	flex: 2 0 0;
	padding: 10px;
	background-color: Orange;
	text-align: center;
	white-space: no-wrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.price-adjustment-label {
	flex: 2 0 0;
	padding: 10px;
	background-color: DarkGrey;
	text-align: center;
	white-space: no-wrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.price-data-item {
	flex: 1 0 0;
	font-size: 125%;
	font-weight: bold;
	padding: 5px;
	background-color: LightGray;
	text-align: left;
	color: orange;
}


.quote-panel-container {
	margin: 25px;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: stretch;
	flex-wrap: wrap;
	border: 1px solid black;
	margin-left: auto;
	width: auto;
	max-width: 300px;
}

.quote-panel-label {
	flex: 2 0 0;
	max-width: 200px;
	padding: 10px;
	background-color: Orange;
	text-align: center;
}

.quote-panel-item {
	width: 100%;
	flex: 1 0 0;
	max-width: 225px;
	font-size: 125%;
	font-weight: bold;
	background-color: DarkGrey;
	text-align: center;
	color: orange;
}

.quote-panel-button {
	padding: 5px;
	width: auto;
	background-color: white;
}


.quote-panel-button , .quote-panel-button:visited, .quote-panel-button:hover {
	margin: 2px;
	border: 1px solid black;
	border-radius: 5px;
}

.quote-panel-button:link  {
	background-color: white;
	text-decoration: none;
}

.quote-panel-button:visited {
	background-color: white;
	text-decoration: none;
}

.quote-panel-button:hover  {
	background-color: grey;
	text-decoration: none;
}

.quote-panel-button a:hover  {
	text-decoration: none;
}

.contact-info-table {
	font-size: 125%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
	padding: 5px;
}

.contact-info-group {
	margin: 5px;
	border: 1px solid orange;
	border-radius: 10px;

}

.contact-info-label {
	font-family: impact;
	line-height: normal;
	margin: 5px 5px 0px 5px;
	padding: 0px 5px;
	color: White;
	text-align: center;
}

.contact-info-item {
	line-height: normal;
	margin: 0px 5px 5px 5px;
	padding: 0px 5px;
	color: LightGray;
	text-align: center;
}

.title-container {
}

.title-image {
	display: inline-block;
	vertical-align: middle;
	padding: 5px;
	margin-top: 20px;
	margin-bottom: 10px;
}

.title-item {
	display: inline-block;
	vertical-align: middle;
}

#imgCompareContainer {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
	padding: 5px;
}

.imgCompareLeft {
	Width: 50%;
}

.imgCompareRight {
	Width: 50%;
}

.imgCompare {

}

/* Service Priority CSS */

.emoji-priority {
  width: 70%;
  margin-left: 15%;
  margin-right: 15%;
} 

/* accessibility */

.access {
	display: none;
}

/* icon styles */

#contact.home-section .fa-li {
}

.fa-ul > li {
	padding-top: 0.5rem;
	margin-bottom: 0.5rem;
}

/*************************************************
 *  Biography
 **************************************************/

ul.ul-edu li .description p.method {
  font-size: 0.75rem;
  color: rgba(0,0,0,0.6);
}

ul.ul-edu li .description p.type {font-size: 0.60rem;}

/*************************************************
 *  Dark themed components
 **************************************************/

.dark ul.ul-edu li .description p.method {
  color: rgba(255, 255, 255, 0.6);
}

/* Panel Styling */

.panel-group .panel-heading + .panel-collapse > .panel-body {
	border-top: 0px;
	background-color: #141622;
}

.panel-group .panel-heading-tooltip + .panel-collapse > .panel-body {
	border-top: 0px;
	background-color: #141622;
}

.panel-group .panel-heading-clean + .panel-collapse > .panel-body {
	border-top: 0px;
	background-color: #141622;
}

.panel-heading-tooltip {
  padding-bottom: 5px;
}

.panel-heading-clean {
  padding-bottom: 5px;
}

.panel-default > .panel-heading{
	background-color: #282A36;
	border: 1px solid black;
}

.panel-default > .panel-heading-tooltip{
	background-color: #282A36;
}

.panel-default > .panel-heading-clean{
	background-color: #282A36;
}

.panel-title {
	font-size: 1.75rem;
}

.panel-title-clean {
	font-size: 1.75rem;
}

.panel-subtitle-clean {
  margin-top: -0.8rem;
  font-size: small;
  font-style: italic;
  color: DarkOrange;
}

.panel-title-tooltip {
	font-size: 1rem;
}


.panel-desc-title {
	font-size: 0.80rem;
}

.panel-body {

}

.panel-desc-body {
  font-size: 0.80rem;
}
.panel-default {
	border: 0px;

}

.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {max-height: none;}

/* Breakout Box Markup */

.breakoutBox1 {
  margin: 1rem;
  padding: 2rem;
  background: #141622;
  border-radius: 20px;
  font-size: medium;
}

/* Newsletter Markup */

.cs-header-image-containor {
			display: block;
		margin-left: auto;
		margin-right: auto;
		width: 50%;
			max-width: 483px;
		}

		.cs-header-image {
			width: 100%;
		}

		.cs-page-title {
			color: #98A6AD;
			font-family: "Montserrat",sans-serif;
			text-align: center;
		}


		.cs-page-body {
			padding: 25px;
			background-color: gold;
			color: black;
			border-radius: 15px 15px 15px 15px;
			margin: 0px 25px 25px 25px;
		}

		.cs-header-containor {
			text-align: center;
		}


		.cs-article-header-containor {
		border-style: solid;
		border-width: 5px;
		border-color: #141622;
		border-radius: 15px 15px 0px 0px;
		margin: 25px 25px 0px 25px;
		}

		.cs-image-containor {
			width: 45%;
			display: inline-block;
			padding: 10px;
			vertical-align: middle;


		}

		.cs-image-body {
			margin-top: 25px;
			width: 100%;
		}

		.cs-article-title {
			display: inline-block;
			padding: 5px;
			vertical-align: middle;
			padding: 10px;
		}

		.cs-article-body {
			background-color: #141622;
			padding: 25px;
			margin: 0px 25px 100px 25px;
		}
    
    /* Menu Styling */
.mega-nav {
/* Below is the styling I want to apply to allow the megamenu to expand horizontically, but it looks like display attrubites are not work with the dropdown toggling hiding */
/*  display: flex; !important; */
  position: relative; !important;
}


.hidden {display: none;}

.alert-container {
	font-size: 80%;
	color: black;
	padding: 25px;
	margin-bottom: 25px;
	background-color: orange;
	border-radius: 5px;
}

.alert-container a {color: white;}

.alert-container p {margin-bottom: 0px;}
.alert-container p + p {margin-top: 1em;}

.alert-container h4 {
  color: white; 
  text-align: center; 
  padding-top: -10px; 
  margin-top: -10px;"
}

.panel-selection a {color: orange;}

.panel-selection p {margin-bottom: 0px;}

.panel-selection-hidden {display: none;}

.panel-selection  #panel {
	border-top: 1px solid white;
	border-left: 1px solid white;
	border-right: 1px solid white;
}

.panel-selection #label {
	border-bottom: 1px solid white;
	border-left: 1px solid white;
	border-right: 1px solid white;
}

.panel-title-bar {
	margin-top: -59px;
	font-size: 80%;
	color: white;
	padding: 10px;
	background-color: black;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 400px;
}


.panel-selection {
	color: white;
	background-color: black;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 400px;
}

.alert-container a {color: white;}

.alert-container p {margin-bottom: 0px;}
.alert-container p + p {margin-top: 1em;}

.alert-container h4 {
  color: white; 
  text-align: center; 
  padding-top: -10px; 
  margin-top: -10px;"
}

.special-note {
  margin: 50px auto;
	font-size: 80%;
  font-style: italic;
	color: DarkSlateGray;
	padding: 25px;
  text-align: center;
	margin-bottom: 25px;
	background-color: MintCream;
	border-radius: 5px;
  border-top-left-radius: 0px; 
}

.special-note a {color: white;}

.special-note p {margin-bottom: 0px;}

.special-note h4 {
  color: DarkSlateGray; 
  text-align: center; 
  padding-top: -10px; 
  margin-top: -10px;"
}


/* speech bubble 13 */




/* flexbox table styles for tabular data */

.divResContainer {
  background-color: rgb(60, 67, 80);
  padding: 1em;
  border-radius: 0.5em;
}

.divResContainerHeader {
  font-size: 125%;
  font-weight: bold;
  text-align: center;
  color: CadetBlue !important;
}

.divResContainerFooter {
  font-size: 145%;
  font-weight: bold;
  text-align: center;
  color: CadetBlue;
}

.divResContainerFooterDesc {
  font-size: 85%;
  text-align: center;
  color: CadetBlue;
}

.divResTable{
	display: flex;
  flex-flow: row wrap;
  margin: 1em 0 0 0;
  padding: 0;
  align-items: flex-start;
  background-color: rgb(50, 52, 64);
}


.divColTable {
  width: 100
  display: table;
  background-color: rgb(50, 52, 64);
  padding: 10px;
}

.divResTable--6cols > .divResTableCell  { width: 16.4%; }

.divResTable--5cols > .divResTableCell  { width: 20%; }

.divResTable--4cols > .divResTableCell  { width: 25%; }

.divResTable--3cols > .divResTableCell  { width: 33.33%; }

.divResTable--2cols > .divResTableCell  { width: 50%; }


.divResTable--3cols {
  margin-bottom: 25px;
}

.divResTableHeading {
  text-align: center;
  background-color: initial;
  border-bottom: 2px solid #ddd;
}

.divResTableTitle {
  font-size: xx-large;
  text-align: center;
}

.divResTableCell {
  padding: 10px;
	box-sizing: border-box;
  width: 100%;  // Default to full width
  padding: 0.8em 1.2em;
  overflow: hidden; // Or flex might break
}

.divColTableCell {
  display: block;
  padding: 10px;
	box-sizing: border-box;
  width: 100%;  // Default to full width
  padding: 0.8em 1.2em;
  overflow: hidden; // Or flex might break
}

.divResTableHeadDesc {
  font-size: small;
  text-align: center;
}
  
.divResTableFoot {
  text-align: center;
	font-size: x-large;
  font-weight: bold;
}

.divResTableButtonCenter {
  text-align: center;
}

.divResTableButton {
  margin: 1em;
  display: inline-block;
  width: auto;
  border-radius: 0.5em;
  padding: 1em;
  background-color: CadetBlue;
  text-align: center;
	font-size: small;
  font-weight: bold;
}

.divResTableButton a:link {
  color: white;
}

.divResTableButton a:hover {
  margin: -1em;
  display: inline-block;
  width: auto;
  border-radius: 0.5em;
  padding: 1em;
  color: black;
  background-color: white;
  text-decoration: underline;
}

.divResTableBreak {
  margin-bottom: 25px;
}

.divResTableBody {
	display: table-row-group;
}


.priority-header1 {
  background: MediumSeaGreen;
}

.priority-cell1 { 
  background: ForestGreen;
}

.priority-header2 {
  background: GoldenRod;
}

.priority-cell2 { 
  background: DarkGoldenRod;
}

.priority-header3 {
  background: LightSteelBlue;
}

.priority-cell3 { 
  background: LightSlateGray;
}

@media all and (max-width: 500px) {
  .divResTable--collapse {
    display: block;
  }
  .divResTable--collapse > .divResTableCell {
    width: 100% !important;
  }
  .divResTable--collapse > .divResTableCell--foot {
    margin-bottom: 1em;
  }
}
.no-flexbox .Rtable {
  display: block;
}
.no-flexbox .Rtable > .Rtable-cell {
  width: 100%;
}
.no-flexbox .Rtable > .Rtable-cell--foot {
  margin-bottom: 1em;
}

.frame-element-center {text-align: center;}
.g-recaptcha {display: inline-block;}

/* Styles for video player shortcode */

.youtube_video {
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	overflow: hidden;
	margin-bottom: 50px;
}

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

/* Styles for Selectable Contact Form */

input:required,
.form-input:has(input[type="checkbox"]) {
  border: red thin solid;
  background-color: white;
  color: black;
  padding: 5px 10px;
}

.form-input:has(input[type="checkbox"]) {
  padding-right: 0;
}

input:disabled {
  border: darkgray thin solid;
  background-color: lightgray;
}

fieldset:disabled {
  display: none;
}

/* Tooltips for popover context text */

.tooltip-container {
  width: 425px;
  min-height: 200px;
  padding: 15px;
  font-size: 25px;
  background: white;
  box-shadow: 0 30px 90px -20px rgba(0,0,0,0.3);
  position: absolute;
  z-index: 100;

}

/* Contact form toggle buttons */
.form-toggle-btn {
  padding: 8px 16px;
  margin-right: 8px;
  border: 2px solid orange;
  background-color: black;
  color: orange;
  cursor: pointer;
  border-radius: 4px;
}

.form-toggle-btn.active {
  background-color: orange;
  color: black;
  border-color: orange;
  font-weight: bold;
}

.services-section h2 {
  background-color: orange;
  padding: 0.3em 0.6em;
  display: inline-block;
  border-radius: 5px;
}

.services-section h2 a {
  color: black;
  transition: color 0.3s ease;
}

.services-section h2 a:hover {
  color: orange;
}

.services-section h2:has(a):hover {
  background-color: black;
}

.universal-wrapper h1,
.article-container h1,
.section-heading h1 {
  background-color: rgb(152, 166, 173);
  color: black;
  padding: 0.3em 0.6em;
  display: inline-block;
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.universal-wrapper h1:has(a):hover,
.article-container h1:has(a):hover,
.section-heading h1:has(a):hover {
  background-color: black;
  color: rgb(152, 166, 173);
}

.universal-wrapper h1 a:hover,
.article-container h1 a:hover,
.section-heading h1 a:hover {
  color: rgb(152, 166, 173);
}

/* Topic Cards */

.topic-cards-section {
  margin: 2rem 0;
}

.topic-cards-heading {
  color: WhiteSmoke;
  margin-bottom: 1rem;
}

.topic-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.topic-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  background-color: #282A36;
  border: 1px solid #3d3f52;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.topic-card:hover {
  background-color: #1a1c28;
  border-color: orange;
  text-decoration: none;
}

.topic-card h3 {
  color: orange;
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.topic-card p {
  color: #98A6AD;
  margin: 0 0 0.5rem 0;
  font-size: 0.85rem;
}

.topic-card-arrow {
  color: orange;
  font-size: 1.1rem;
  margin-top: auto;
}

/* Blog Search */

.blog-search-section {
  margin: 1.5rem 0;
}

#blog-search-input {
  width: 100%;
  max-width: 600px;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  border: 1px solid #444;
  border-radius: 4px;
  background-color: #1a1c28;
  color: WhiteSmoke;
}

#blog-search-input:focus {
  outline: none;
  border-color: orange;
}

.blog-search-results {
  margin-top: 1rem;
  max-width: 760px;
}

.blog-search-result {
  padding: 1rem;
  margin-bottom: 0.75rem;
  background-color: #282A36;
  border-radius: 6px;
  border-left: 3px solid orange;
}

.blog-search-result h4 {
  margin: 0 0 0.4rem 0;
}

.blog-search-result h4 a {
  color: WhiteSmoke;
}

.blog-search-result h4 a:hover {
  color: orange;
}

.blog-search-result p {
  margin: 0 0 0.4rem 0;
  font-size: 0.9rem;
  color: #98A6AD;
}

.blog-search-no-results {
  color: #98A6AD;
  font-style: italic;
}