/*
Theme Name: DEV SITE PPS Theme
Template: 

Author: John McCullough
Author URI:
Description: Bare-bones WP theme
Version: 1.0  
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 
Tags: 
This theme, like WordPress, is licensed under the GPL.
*/

/* OLD STYLES - not used anymore */
/* #region */
body.home section.banner {
  padding-top: 6em;
}
body.home section.banner h1 {
  text-transform: uppercase;
}

section.banner h1 {
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.08em;
}

section.banner h4 {
  width: 60%;
  color: white;
  font-weight: bold;
  font-style: italic;
  padding-bottom: 0;
  margin-bottom: 0;
}
section.banner h4.author {
  text-align: right;
  padding-right: 2em;
}
section.banner h4.quote {
  margin-top: 2.5em;
}
section.banner .bannerText {
  text-shadow: -1px -1px 2px #000, 1px 1px 2px #000;
}
section.banner a {
  color: white;
  text-decoration: none;
}
section.banner h1 a:hover {
  color: white;
  opacity: 0.9;
  text-decoration: none;
}
section.banner {
  background-color: black;
  max-height: 500px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  bottom: auto;
  left: auto;
  padding: 3em 3em 3em;
  color: white;
  text-shadow: 1.5px 1.5px 4px #000;
  margin-top: 0;
}

section.frontPage h4 {
  display: block;
}
/* #endregion */
/* end of old styles */

/* =WordPress Core
https://codex.wordpress.org/CSS#WordPress_Generated_Classes
-------------------------------------------------------------- */
/* #region */
/* https://stackoverflow.com/questions/44060551/how-do-you-hide-arbitrary-section-of-code-in-vs-code  */
.alignnone {
  margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
  display: block;
  margin: 5px auto 5px auto;
}

.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}

.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}

a img.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}

a img.alignnone {
  margin: 5px 20px 20px 0;
}

a img.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}

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

.wp-caption {
  background: #fff;
  border: 1px solid #f0f0f0;
  max-width: 96%; /* Image does not overflow the content area */
  padding: 5px 3px 10px;
  text-align: center;
}

.wp-caption.alignnone {
  margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
  margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
  margin: 5px 0 20px 20px;
}

.wp-caption img {
  border: 0 none;
  height: auto;
  margin: 0;
  max-width: 98.5%;
  padding: 0;
  width: auto;
}

.wp-caption p.wp-caption-text {
  font-size: 11px;
  line-height: 17px;
  margin: 0;
  padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  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: #eee;
  clip: auto !important;
  clip-path: none;
  color: #444;
  display: block;
  font-size: 1em;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}
/* #endregion */
/* end of WordPress Core


/* The class below is used to test loading priority -- make sure this sheet is being loaded after parent stylesheets
*  If everything is working, if this style is active, all post titles tags should turn blue and get bigger
.single-post .entry-title, .page .entry-title {  font-size: 48pt; color:blue;  }

YELLOW - #FFD156
LIGHT YELLOW - #FFE7A8
RED - #EF4B27
Icons for 3 Steps or Back Pain, Balance Problems, etc. - https://thenounproject.com/
*/

/* #region - BODY and HEADER and NAV styles  */
/*  */
body {
  font-family: "Source Sans Pro", helvetica, arial, sans-serif !important;
  font-size: 1.2rem !important;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: "Rubik", sans-serif !important;
}
h1 {
  font-size: 42px !important;
  line-height: 48px !important;
  margin-bottom: 42px !important;
}
h2 {
  font-size: 30px !important;
  line-height: 36px !important;
  margin-bottom: 28px !important;
}
h3 {
  font-size: 24px !important;
  line-height: 26px !important;
  margin-bottom: 20px !important;
}
h4 {
  font-size: 18px !important;
  line-height: 20px !important;
  margin-bottom: 16px !important;
}

section.topbar {
  background-color: #264d62;
}

nav li {
  margin: 0 0.3em;
}
nav li a {
  margin: auto;
}
nav.navbar-light ul.navbar-nav a.nav-link {
  color: black;
}
.current-menu-item,
a.current-menu-item {
  font-weight: bold;
}
nav span.logoText {
  font-family: "Rubik", sans-serif !important;
  font-weight: 400;
  font-style: italic;
  vertical-align: middle;
  font-size: 1.7em;
}
i.fa-search {
  font-size: 1.3em;
  color: white;
}

/* Style the top nav search button and hidden box */

div#searchOverlay {
  position: absolute;
  top: 44px;
  right: 4px;
  width: 70%;
  z-index: 1;
  background-color: white;
}
div#searchOverlay input {
  width: 95%;
}
nav.navbar div.container {
  position: relative;
}
div#searchOverlay .search-overlay__close {
  color: darkmagenta;
  font-size: 1.5em;
  vertical-align: sub;
}
/* #endregion */
/* end of BODY and HEADER and NAV styles  #region  */

/* SEARCH BOX */
form.search-form input.form-control:focus {
  border-color: #cccccc;
  -webkit-box-shadow: none;
  box-shadow: none;
}
form.search-form .btn {
  border-radius: 0;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
form.search-form input {
  border-radius: 0;
  border-top-left-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}
/* end of SEARCH BOX  */

/* only allow these more narrow margins on medium and above screens */
@media (min-width: 768px) {
  div.twentyper {
    margin: auto 20%;
  }
  div.fifteenper {
    margin: auto 15%;
  }
  div.tenper {
    margin: auto 10%;
  }
}
section.afterGeo6 {
  margin-top: -6em;
}
section.afterGeo4 {
  margin-top: -4em;
}

.noDisplay {
  display: none;
}
.smallCaps {
  font-variant: small-caps;
}
.b600 {
  font-weight: 600;
}

section .twoColumns {
  column-gap: 36px;
  column-count: 2;
}
.keepTogether {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid-column;
  break-inside: avoid;
}
@media only screen and (max-width: 767px) {
  section .twoColumns {
    column-count: 1;
  }
}

.orange {
  color: #f57b23;
}
.bkgdF9 {
  background-color: #f9f9f9;
}
section.greyBkgd {
  background-color: #f2f2f2;
}
section.blueBkgd {
  background-color: #264d62;
}
.yellowBkgd {
  background-color: #ffd156;
}
.lightYellowBkgd {
  background-color: #ffe7a8;
}

section.diagonalUp {
  height: 6em;
  background-image: linear-gradient(357deg, #fff 50%, #f2f2f2 50%);
}
section.diagonalUp2 {
  height: 6em;
  background-image: linear-gradient(357deg, #f2f2f2 50%, #fff 50%);
}
section.diagonalDn1 {
  height: 6em;
  background-image: linear-gradient(3deg, #f2f2f2 50%, #fff 50%);
}
section.diagonalDn1Blue {
  height: 6em;
  background-image: linear-gradient(3deg, #264d62 50%, #fff 50%);
}
section.diagonalDn1BlueGrey {
  height: 6em;
  background-image: linear-gradient(3deg, #264d62 50%, #f2f2f2 50%);
}
section.diagonalDn2 {
  height: 6em;
  background-image: linear-gradient(3deg, #fff 50%, #f2f2f2 50%);
}
section.diagonalDn2Blue {
  height: 6em;
  background-image: linear-gradient(3deg, #fff 50%, #264d62 50%);
}

section.diagonalUp.geoBkgd {
  height: 18em;
}
section.diagonalUp.geoBkgd .geoImg {
  background-image: url("../../../images/GeometricMotif.png");
  background-repeat: no-repeat;
  background-position: 0 -3em;
  padding-left: 6em;
  margin-left: -6em;
  padding-top: 14em;
  margin-top: -10em;
}

section.diagonalDn2.geoBkgd {
  height: 18em;
}
section.diagonalDn2.geoBkgd .geoImg {
  background-image: url("../../../images/GeometricMotifReversed.png");
  background-repeat: no-repeat;
  background-position: 100% -1em;
  padding-right: 6em;
  margin-right: -6em;
  padding-top: 14em;
  margin-top: -10em;
}

section.hpMission {
  background-color: #264d62;
}
section.hpMoreVids {
  background-color: #264d62;
}
section.videoQuestion {
  background-color: #264d62;
}

section.hpIssues {
  background-image: url("../../../images/BrainGeometric.png");
  background-position: 100% 1em;
  background-repeat: no-repeat;
}

section div.content {
  padding-top: 2em;
}

.faqBkgd {
  background-image: url("../../../images/BrainGeometricFlippedYellow_350.png");
  background-repeat: no-repeat;
  background-position: 0% 0%;
  padding-top: 7rem !important;
  margin-top: -2rem !important;
  padding-left: 10rem !important;
  margin-left: -10rem !important;
  /*  transform: scaleX(-1);  */
}
.cFormBkgd {
  background-image: url("../../../images/GeometricMotifReversed.png");
  background-repeat: no-repeat;
  background-position: 100% 100%;
  padding-bottom: 12rem !important;
  margin-bottom: -8rem !important;
  padding-right: 6rem !important;
  margin-right: -6rem !important;
  /*  transform: scaleX(-1);  */
}
/* Undo flip for contactForm content
section.topContact .contactForm * {
  transform: scaleX(-1);
}
*/

section.hpTestimonial .card {
  background-image: linear-gradient(347deg, #eee 25%, #fafafa 25%);
}
section.hpTestimonial .card-bodyquote {
  font-size: 80%;
  margin-bottom: 0;
  font-style: italic;
}
section.hpTestimonial .card-title {
  font-weight: bold;
  padding-bottom: 1.5em;
  font-size: 105%;
}
section.hpTestimonial .blockquote-footer {
  font-size: 90%;
  font-style: normal;
}

section.photos .card {
  background-color: transparent;
  border: none;
  max-width: 300px;
}
p.dividerQuote {
  font-size: 1.4rem;
  font-weight: bolder;
  color: white;
  text-align: center;
}

.btn.orange {
  background-color: #f57b23 !important;
}
.btn-outline-warning {
  border-color: #f57b23;
  color: #f57b23;
}
a.btn,
.btn small {
  font-weight: bold;
}
.btn.bkgdYellow {
  background-color: #ffd156;
}

i.contactIcons {
  font-size: 100px;
  padding-top: 0.2em;
  color: #50dae6;
}
.aboveH2 {
  color: #f57b23;
  border: 1px #f57b23 solid;
  width: 3.5em;
}

section.faqs .card,
section.faqs .card-header {
  border: none;
  background-color: transparent;
}
section.faqs .card {
  margin-bottom: 1rem;
}
section.faqs .card a {
  color: #212529;
}
section.faqs .card .bi {
  color: #f57b23;
  font-size: 1.3em;
  font-weight: 900;
  text-shadow: 0.5px 0.5px #f57b23;
  /* text-shadow: -1px 0 #f57b23, 1px -1px 0 #f57b23, -1px 1px 0 #f57b23,
    1px 1px 0 #f57b23; */
  /* https://css-tricks.com/adding-stroke-to-web-text/  */
}
section.hpIssues .checks .bi {
  font-weight: 900;
  text-shadow: 0.5px 0.5px #153b4f;
}
section.hpIssues .checks ul {
  list-style-image: url("../../../images/checkMark.png");
  list-style-position: outside;
}
section.hpIssues .checks ul li span {
  vertical-align: 4px;
  font-size: 1.1em;
  font-weight: 600;
}
header .bi {
  font-weight: 900;
  text-shadow: 0.5px 0.5px #fff;
}
section.faqs .card .bi::before {
  vertical-align: revert;
}
.transcript .fa.orange {
  color: #f57b23;
}
section.faqs .card-header,
section.faqs .card-header p {
  padding-bottom: 0;
  margin-bottom: 0;
  font-weight: bold;
}
section.faqs .card-body {
  font-style: italic;
  padding-top: 1em;
}

div.issues div {
  background-color: #fafafa;
  text-transform: uppercase;
  height: 8em;
  width: 8em;
  display: flex;
  justify-content: center;
  align-items: center;
}

section.freeConsult {
  background-image: url("");
  background-position: 0% 16px;
  background-repeat: no-repeat;
}

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

.page-numbers {
  font-size: 1.2em;
  font-weight: 600;
}

.eventBlurb .metainfo {
  font-size: 1.2em;
}

.squares {
  box-shadow: 0rem 0.3rem 0.4rem rgba(0, 0, 0, 0.15);
}
.squares p {
  font-weight: 600;
  text-align: center;
}

section.allResources div.nav-tabs .nav-link {
  background-color: #f2f2f2;
  background-image: linear-gradient(0deg, #ddd 3%, #f2f2f2 5%);
  border-top: none;
}
section.allResources div.nav-tabs .nav-link.active {
  background-color: #f9f9f9;
  border-color: #f9f9f9;
  background-image: none;
}
section.allResources .nav a {
  color: #555;
  letter-spacing: 0.07em;
}
section.allResources .nav a.active {
  color: #008196;
}

/* WP Forms Styling */

/* Could use this if needed to center the footer email form on small screens
div.wpforms-container-full form.wpforms-form {
  text-align: center;
}
@media (min-width: 768px) {
  div.wpforms-container-full form.wpforms-form {
    text-align: left;
  }
} */

div.wpforms-container-full form.wpforms-form div.wpforms-field-container,
div.wpforms-container-full
  form.wpforms-form
  div.wpforms-field-container
  div.wpforms-field-email,
div.wpforms-container-full
  form.wpforms-form
  div.wpforms-field-container
  input.wpforms-field-medium,
div.wpforms-container-full form.wpforms-form div.wpforms-submit-container {
  display: inline;
}

div.wpforms-container-full
  form.wpforms-form
  div.wpforms-field-container
  input.wpforms-field-medium {
  border-radius: 4px;
  max-width: 60%;
}

div.wpforms-container-full
  form.wpforms-form
  div.wpforms-submit-container
  button {
  border: white 1px solid;
  background-color: black;
  color: white;
  padding: 0.5rem;
  border-radius: 8px;
}
section .wpforms-confirmation-container-full,
div[submit-success]
  > .wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
  background: #ffeebf;
  border: 1px solid #ffeebf;
}
section div#wpforms-confirmation-22 {
  background-color: #ffeebf;
}

section.videoQuestion
  div.wpforms-container-full
  .wpforms-form
  .wpforms-field-label {
  color: #f8f9fa;
  font-weight: 600;
}
section.videoQuestion
  div.wpforms-container-full
  form.wpforms-form
  div.wpforms-submit-container
  button {
  color: white;
  border-color: white;
  background-color: transparent;
  display: block;
  margin: 0.75em auto 0;
}

section.emailForm
  div.wpforms-container
  form.wpforms-form
  div.wpforms-submit-container
  button {
  border: white 1px solid;
  background-color: #ffd156;
  color: #212529;
  font-weight: 700;
  margin-left: -5px;
  border-radius: 0 8px 8px 0;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
section.emailForm
  div.wpforms-container
  form.wpforms-form
  div.wpforms-field-container
  label {
  display: none;
}
section.emailForm
  div.wpforms-container
  form.wpforms-form
  div.wpforms-field-container
  input {
  border-radius: 8px 0 0 8px;
  max-width: 55%;
}

/* Footer Email Form Styles */
footer
  div.wpforms-container
  form.wpforms-form
  div.wpforms-submit-container
  button {
  border: white 1px solid;
  background-color: black;
  color: white;
  font-weight: 700;
  margin-left: -5px;
  border-radius: 0 8px 8px 0;
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
footer
  div.wpforms-container
  form.wpforms-form
  div.wpforms-field-container
  label {
  display: none;
}
footer
  div.wpforms-container
  form.wpforms-form
  div.wpforms-field-container
  input {
  border-radius: 8px 0 0 8px;
  max-width: 55%;
}

/*Make embedded YT videos responsive
https://torquemag.io/2020/07/make-embeds-responsive-wordpress/ */
.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}
.iframe-container iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/* FOOTER styles */

footer {
  background-color: #222;
  color: white;
}
footer a {
  color: white;
}

footer h5 {
  font-weight: bold;
}

div.menu-footer-container ul {
  padding-left: 0;
}
div.menu-footer-container li {
  display: inline;
  padding-right: 0em;
}
div.menu-footer-container li::after {
  /* content uses Hex code \00a0 for non breaking space  */
  content: "\00a0\00a0|\00a0\00a0";
}
div.menu-footer-container li:last-child::after {
  /* content uses Hex code \00a0 for non breaking space  */
  content: "";
}