/*
Theme Name: TheRec
Theme URI: https://nickwhite.uk
Author: Nick White
Author URI: https://nickwhite.uk
Description: Default theme for Therec
Version: 1.0
Requires at least: 5.0
Tested up to: 6.6
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: therec
*/

/* THEREC-SG-STAGING */
body {
  margin-top: 0 !important;
  margin-left: auto;
  margin-right: auto;
  background-color: #ff8e01;
  /* 	background-color: blue; */
  font-size: 16px !important;
}

.wp-block-separator.has-alpha-channel-opacity {
  opacity: 0.5;
}

/* .privacy-policy {
	display: none;
} */

.hidden {
  display: none;
}

/* #region HEADER */
/*   HEADER   */
header {
  padding-bottom: 0px !important;
  position: relative;
  top: 0px;
  left: auto;
  right: auto;
  z-index: 10;
  /* border-bottom: 1px solid rgba(245, 245, 245, 0.5); */
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.header-1200-1024-group,
.mobile-header-group {
  display: none;
}

.header-fullsize-group {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}

.fullsize-logo-and-description {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
}

.fullsize-site-logo {
  margin-left: 20px !important;
  width: 200px;
  height: 97px;
}

.header-site-title {
  font-family: "Open Sans", sans-serif;
  font-size: 19.5px;
  font-size: clamp(1.063rem, 0.417vw + 0.906rem, 1.219rem);
  font-weight: 600 !important;
  padding: 0 !important;
  line-height: 2rem;
}

.fullscreen-site-title-and-tagline {
  flex-direction: column;
  align-items: flex-start;
}

.full-header-site-tagline,
.header-row-navigation {
  margin-right: 50px !important;
  margin-bottom: 20px !important;
}

.nav-submenu a {
  background-color: rgb(59, 33, 3);
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.495);
}

@media (max-width: 1300px) {
  .header-site-title {
    font-size: 18px;
    font-size: clamp(0.9375rem, -2.4375rem + 4.5vw, 1.21875rem);
    line-height: clamp(1.4rem, -5.8rem + 9.6vw, 2rem);
  }

  .full-header-site-tagline {
    font-size: 15px;
    font-size: clamp(0.8125rem, -1.4375rem + 3vw, 1rem);
  }

  .header-row-navigation {
    margin-right: 24px !important;
    margin-right: clamp(2.0625rem, -10.6875rem + 17vw, 3.125rem) !important;
  }
}

@media (max-width: 1200px) {
  .header-fullsize-group {
    display: none;
  }

  .header-1200-1024-group {
    display: flex;
  }

  .site-logo-1200-1024 {
    margin-left: 20px !important;
    width: 200px;
    height: 97px;
  }

  .fullsize-logo-and-description {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-end;
    margin-left: 14px !important;
    margin-left: clamp(5.25rem, -60.20472rem + 102.273vw, 16.5rem) !important;
  }

  .fullscreen-site-title-and-tagline {
    flex-direction: row;
    align-items: baseline;
    margin-bottom: 12px !important;
    color: white;
  }

  .fullscreen-site-title-and-tagline h3 a {
    font-size: 20px;
    color: white;
  }

  .header-site-title {
    font-size: 18px;
    /* font-size: clamp(0.9375rem, -2.4375rem + 4.5vw, 1.21875rem); */
    line-height: 1rem;
  }

  .header-site-title-2 {
    display: none;
  }

  .full-header-site-tagline {
    font-size: 16px;
    margin-left: 5px !important;
    margin-right: 0px !important;
    margin-bottom: 0px !important;
    /* font-size: clamp(0.8125rem, -1.4375rem + 3vw, 1rem); */
  }

  .header-row-navigation {
    /* display: none !important; */
    margin-right: 0px !important;
    margin-bottom: 20px !important;

    /* margin-right: clamp(2.0625rem, -10.6875rem + 17vw, 3.125rem) !important; */
  }
}

@media (max-width: 1024px) {
  .fullsize-logo-and-description {
    justify-content: center;
    margin-left: 20px !important;
    margin-left: clamp(0rem, -22.05204rem + 45.882vw, 7.3125rem) !important;
  }

  .fullscreen-site-title-and-tagline {
    flex-direction: column;
    align-items: baseline;
  }

  .header-row-navigation {
    display: none !important;
    /* Hide the standard menu */
  }

  .header-site-title {
    display: none;
  }

  .header-site-title-2 {
    display: block;
    font-size: 30px;
    line-height: 2rem;
    color: white;
  }

  /* 	MOBILE MENU BUTTON   */
  button.rmp_menu_trigger {
    top: 20px !important;
    margin-top: 0px !important;
  }
}

@media (max-width: 768px) {
  /* MOBILE TRIGGER   */

  #rmp_menu_trigger-631 {
    width: clamp(2.5rem, 1.8304rem + 3.348vw, 3.4375rem);
    height: clamp(2.5rem, 1.8304rem + 3.348vw, 3.4375rem);
    /* top: clamp(0.6875rem, 0.8661rem + -0.893vw, 0.4375rem); */
  }
}

@media (max-width: 660px) {
  .site-logo-1200-1024 {
    margin-left: 15px !important;
    margin-left: clamp(0.3125rem, -0.5699rem + 4.412vw, 1.25rem) !important;
    width: 150px;
    width: clamp(6.25rem, 3.3088rem + 14.706vw, 9.375rem);
    height: 4.546875rem;
    height: clamp(3.03125rem, 1.60485rem + 7.132vw, 4.546875rem);
  }

  .fullscreen-site-title-and-tagline {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .fullscreen-site-title-and-tagline h3 a {
    display: block;
    font-size: 12px;
    font-size: clamp(0.5625rem, -0.2023rem + 3.824vw, 1.375rem);
    color: white;
    width: 100px;
    width: clamp(9.8125rem, -1.5405rem + 56.765vw, 21.875rem);
    line-height: 1rem;
    text-align: left;
    font-weight: 100;
  }

  .full-header-site-tagline {
    display: none;
  }

  #rmp_menu_trigger-631 {
    top: 7px !important;
    top: clamp(0.3125rem, -0.0405rem + 1.765vw, 0.6875rem) !important;
    width: 40px;
    width: clamp(2.5rem, 1.8304rem + 3.348vw, 3.4375rem);
    height: 40px;
    height: clamp(2.5rem, 1.8304rem + 3.348vw, 3.4375rem);
    /* top: clamp(0.6875rem, 0.8661rem + -0.893vw, 0.4375rem); */
  }

  /* .header-site-title-2 h3 a {
		font-size: 24px;
	} */
}

/*#endregion*/

/* #region FOOTER  */
/*   FOOTER   */
.footer-mobile-menu-search {
  display: none;
  /* 	Hides search box on right */
}

.full-footer-search {
  line-height: 1rem;
  width: 270px;
}

/*#endregion*/

/* #region FRONT PAGE  */
/*   FRONT PAGE   */

.front-page-single-column-template-group {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.front-page-template-initial-columns {
  border-radius: 10px !important;
}

.my-3-cards {
  margin-top: 0px !important;
  margin-bottom: 50px !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
}

.vertical-card-1,
.vertical-card-2,
.vertical-card-3 {
  background-color: #fde1c0;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px;
  border-radius: 10px;
  width: 326px !important;
  width: clamp(11rem, -0.45843rem + 27.778vw, 20.375rem) !important;
  height: clamp(16.25rem, -0.70829rem + 41.111vw, 30.125rem) !important;
  z-index: 1;
  margin: 10px !important;
  padding: clamp(0.75rem, -2.15276rem + 7.037vw, 3.125rem) 0;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

.vertical-card-1 p,
.vertical-card-2 p,
.vertical-card-3 p {
  width: 100%;
  font-weight: 200;
  margin: 0 auto !important;
  max-width: clamp(10rem, 0.83343rem + 22.222vw, 17.5rem) !important;
}

.vertical-card-1 p {
  font-size: 10px;
  font-size: clamp(0.875rem, -0.34724rem + 2.963vw, 1.875rem);
}

.vertical-card-2 p {
  font-size: 8px;
  font-size: clamp(1.0625rem, -0.00711rem + 2.593vw, 1.9375rem);
}

.vertical-card-3 p {
  font-size: 10px;
  font-size: clamp(0.875rem, -0.34724rem + 2.963vw, 1.875rem);
}

/*#endregion*/

/* #region HEADINGS */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Open Sans", sans-serif;
  color: #393631;
}

h1 {
  color: #a75d00;
  font-size: clamp(1.6rem, 1.0181818181818183rem + 2.909090909090909vw, 3.2rem);
  font-weight: 100 !important;
  padding-bottom: clamp(0.5rem, 0.091rem + 2.045vw, 1.625rem);
}

h2 {
  font-size: clamp(1.125rem, 0.77754rem + 1.463vw, 1.875rem) !important;
  margin-bottom: clamp(0.3125rem, 0.16763rem + 0.61vw, 0.625rem);
}

h3 {
  font-size: clamp(1rem, 0.79718rem + 0.854vw, 1.4375rem);
  font-weight: 600;
}

h4 {
  font-size: clamp(0.875rem, 0.7386rem + 0.682vw, 1.25rem);
  padding-bottom: clamp(0.5rem, 0.41308rem + 0.366vw, 0.6875rem);
  font-weight: 200;
  color: #6a3b00;
}

h5 {
  font-size: clamp(1.188rem, 0.455vw + 1.097rem, 1.438rem) !important;
  line-height: clamp(1.425rem, 1.068vw + 1.211rem, 2.012rem) !important;
}

h6 {
  font-weight: 400;
  font-size: clamp(1.063rem, 0.227vw + 1.017rem, 1.188rem) !important;
  line-height: clamp(1.275rem, 0.705vw + 1.134rem, 1.662rem) !important;
}

/* #endregion */

/* #region FULL SINGLE PAGE */

.full-page-single-column-template-group {
  border: 1px solid black;
  min-height: 70vh;
}

.full-page-single-column-template-group p {
  font-family: "Open Sans", sans-serif;
  font-style: normal;
  color: #393631;
  font-size: clamp(0.875rem, 0.227vw + 0.83rem, 1rem) !important;
  line-height: clamp(1.4rem, -0.318vw + 1.639rem, 1.575rem) !important;
  font-weight: 400 !important;
  margin-top: 0 !important;
}

.full-page-template-initial-columns {
  min-height: 70vh;
}

.full-page-single-column-template-column {
  border-radius: 10px;
  background-color: white;
}

.full-page-single-column-template-stack {
  margin: auto !important;
}

.actual-single-page-group {
  width: 800px;
  padding: 0 !important;
}

.actual-single-page-group h1 {
  font-size: 48px;
  text-align: center !important;
}

.who-we-are-bio {
  border-top: 1px solid #cbb8a1;
  padding-bottom: 20px;
}

.who-we-are h2 {
  /* 	font-size: clamp(1.125rem, 0.77754rem + 1.463vw, 1.875rem) !important; */
  font-size: clamp(0.875rem, 0.6432rem + 0.976vw, 1.375rem) !important;
  background-color: red;
  /* For browsers that do not support gradients */
  background-color: #834902;
  background-image: linear-gradient(45deg, #834902, white);
  border-radius: 2px;
  color: #fff;
  /* 	padding: 0 0 4px 10px; */
  padding-bottom: clamp(0.1875rem, 0.1647rem + 0.114vw, 0.25rem);
  padding-left: clamp(0.25rem, 0.1136rem + 0.682vw, 0.625rem);
  margin-bottom: clamp(0.3125rem, 0.16763rem + 0.61vw, 0.625rem);
}

.about-us,
.our-services,
.our-projects,
.news,
.publications,
.videos-and-vlogs,
.test-2 {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 80px !important;
  padding-bottom: clamp(5rem, 1.52443rem + 14.634vw, 12.5rem) !important;
}

.embedded-video {
  width: 960px;
}

.about-us h1,
.our-services h1,
.our-projects h1,
.news h1 .publications h1,
.videos-and-vlogs h1 {
  margin-top: 40px !important;
  margin-top: clamp(1.875rem, 0.7386rem + 5.682vw, 5rem) !important;
}

.news h2,
.publications h2 {
  font-size: clamp(1rem, 0.7682rem + 0.976vw, 1.5rem) !important;
  font-weight: 600 !important;
}

.contact-col {
  display: flex !important;
  flex-flow: row nowrap !important;
  justify-content: center !important;
}

.full-page-single-column-template-stack p {
  text-align: justify;
  text-justify: inter-word;
}

/* For the WHO WE ARE page */
.bio-profile-pic img {
  max-width: 150px !important;
  width: 150px !important;
  height: 150px !important;
  border: 1px solid #afafaf;
  border-radius: 5px;
}

/* #endregion */

/* #region Our Services */
.our-services {
  width: 400px;
  width: clamp(18.75rem, 7.3864rem + 56.818vw, 50rem);
  display: flex;
  justify-content: center;
}

.our-services ul {
  padding: 0;
}

.our-services ul li {
  width: clamp(15rem, 11.3636rem + 18.182vw, 25rem);
  max-width: 400px;
  height: clamp(2.5rem, 0.909rem + 7.955vw, 6.875rem);
  max-height: 110px;
  background-color: #4b80df;
  padding: 20px;
  margin: 10px;
  align-content: center;
  text-align: center;
  border-radius: 50%;
  color: white;
  list-style-type: none;
}

/* #endregion */

/* #region BLOG HOME */
.search-group ul li,
.author-archive ul li,
.blog-home-group ul li {
  padding: 15px;
  border-radius: 10px;
  background-color: rgb(216, 216, 216);
  margin-bottom: 20px;
}

.search-group ul li h2,
.author-archive ul li h2,
.blog-home-group ul li h2 {
  padding: 0;
}

.two-columns-template-both-columns {
  max-width: 1200px !important;
  flex-direction: row;
  justify-content: center;
}

.blog-home-col1 {
  background-color: white;
  border-radius: 10px;
  padding: 50px 50px !important;
  max-width: 60% !important;
  margin-right: 20px !important;
}

.blog-mobile-heading-row,
.blog-home-mobile-author-row,
.blog-home-tags-row {
  display: none !important;
  padding: 0;
}

.blog-home-author a {
  font-size: 16px;
}

.blog-tag a {
  /* margin-bottom: 4px; */
  font-size: 12px;
  color: white;
  padding: 4px 8px 6px 8px;
  border-radius: 6px;
  text-decoration: none;
  background-color: #ff8e01;
}

.blog-home-featured-image-row {
  margin: 0;
  padding: 0;
}

.two-columns-template-col2 {
  max-width: 26% !important;
}

.two-columns-template-col2-row {
  background-color: white;
  border-radius: 10px;
  padding: 2rem;
}

.two-columns-template-col2-row h2 {
  font-size: 21px !important;
  font-weight: 200;
}

.wp-block-list li {
  padding: 1rem 0;
}

/*  STYLING OF LIST OF AUTHORS  */

.authors-list-items p {
  display: none !important;
}

.authors-list-item {
  margin-bottom: 5px !important;
}

.authors-list-cols-dir-vertical {
  column-gap: 0 !important;
}

.authors-list-item-title {
  font-family: sans-serif !important;
  font-weight: 300 !important;
  font-size: 1.1rem !important;
  color: #d22e2b;
}

/* AUTHOR ARCHIVE BIO BOX */

.search-row-blog-page {
  border-radius: 10px;
}

.query-loop-blog-page {
  border-radius: 10px;
  min-height: 70vh;
}

.wp-block-post-featured-image img {
  border: 1px solid rgb(194, 194, 194);
  border-radius: 10px;
}

.wp-block-search__button {
  margin-left: 0px !important;
}

.tag-list a {
  display: block;
  font-size: 1rem !important;
}

/* #endregion */

/* #region CONTACT FORM */
/*  CONTACT FORM to ensure that the input boxes don't overflow */
.otter-form__container {
  width: clamp(300px, 45vw, 750px) !important;
}

.otter-form-input,
.otter-form-textarea-input {
  box-sizing: border-box !important;
}

/* #endregion */

/* #region SINGLE POST  */
/* For the Single Post page  */

.single-post-group-columns {
  background-color: #ff8e01 !important;
  /* padding: 10x !important; */
  margin-top: 10px !important;
  width: 97vw !important;
  width: clamp(45rem, -4.06605rem + 102.088vw, 72.5rem) !important;
  justify-content: center;
}

.single-post-group-columns-column {
  background-color: WHITE !important;
  border-radius: 10px;
  padding: 60px 60px;
  padding: clamp(3.75rem, -0.71068rem + 9.281vw, 6.25rem)
    clamp(2.5rem, -4.19078rem + 13.921vw, 6.25rem);
  min-height: 70vh;
}

.single-post-group-columns-column .test-2 {
  background-color: #ff8e01 !important;
}

.single-post-title-row {
  flex-direction: row;
  justify-content: center;
}

.single-post-title-row h1 {
  font-size: 35px;
  font-size: clamp(1.6875rem, 0.79546rem + 1.856vw, 2.1875rem);
  text-align: center;
}

.featured-image-on-post-page {
  width: 50%;
  padding-bottom: 50px;
}

/* Byline row, split into two genuinely distinct columns instead of one
   shared class — .single-post-label is the "Author(s)/Dated:/Tags:" column,
   .single-post-value is the content column (shortcode text, Post Date block,
   Tags block). Same look for now (both italic/thin), but each can now be
   targeted independently. */
/* Byline rows (Author(s) / Dated / Tags). Each row is now its own
   two-column pairing — a .single-post-info-row containing one
   .single-post-label and one .single-post-value — rather than two long
   parallel stacks. That pairing is what lets us:
     b) stop the label ever wrapping (flex: 0 0 auto + white-space: nowrap
        — the label sizes to its own content, so it can't be squeezed)
     c) let the value wrap gracefully instead of overflowing
        (flex: 1 1 auto + min-width: 0, the classic flexbox fix that lets
        a flex item actually shrink and wrap rather than push the row wide)
     d) hide the whole row when its value is empty, via :has() — only
        possible because label and value are now siblings in the same row
   In the block editor, leave the label column's Width field blank (auto)
   — a fixed % is an inline style that would override flex: 0 0 auto here. */

/* All three rows now share ONE grid parent (.single-post-meta, added around
   them as a Group in the editor). Grid can size the label column to the
   WIDEST label across every row — something flexbox can't do when each row
   is its own separate container, which was the cause of the misalignment. */
.single-post-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  row-gap: 4px;
  column-gap: 10px;
  align-items: start; /* top-align label and value regardless of the value being a plain <p> (Author/Tags) vs a <time> nested in a <div> (Dated) — sidesteps any baseline-calculation mismatch between different element shapes */
}

/* display:contents makes the original row wrapper generate no box of its
   own — its two children (label, value) become direct items of the grid
   above instead, so they get positioned into the shared columns.
   !important + the two-class selector beats the earlier plain
   .single-post-info-row{display:flex} rule below (kept as a fallback for
   any row not yet wrapped in .single-post-meta). */
.single-post-meta .single-post-info-row {
  display: contents !important;
}

.single-post-info-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap; /* fallback for any row outside .single-post-meta */
  gap: 4px 10px;
}

.single-post-label {
  white-space: nowrap; /* labels never wrap: requirement (b) */
}

.single-post-label p {
  white-space: nowrap;
}

.single-post-value {
  min-width: 0 !important; /* lets the value shrink/wrap instead of overflowing the grid track */
}

.single-post-label p,
.single-post-value p,
.single-post-value a,
.single-post-value time {
  font-style: italic;
  font-weight: 200;
  line-height: 1.4; /* was 0.6rem (~9.6px) — smaller than the text itself, which is likely what caused the "Dated" label/value misalignment as well as the cramped look */
}

.single-post-value p,
.single-post-value a,
.single-post-value time {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* d) If a row's value is genuinely empty (e.g. no tags on this post), drop
   the whole row — label included — rather than showing "Tags:" with
   nothing after it.
   CORRECTION: an earlier version of this rule used
   :has(.single-post-value:not(:has(*))) — a :has() nested inside a :not()
   inside a :has(). That's invalid per the CSS spec (a :has() can't contain
   another :has(), even indirectly), so the browser silently dropped the
   WHOLE rule rather than partially applying it — which is why it never
   worked, regardless of !important or specificity. Plain :empty below is
   valid (only one level of :has()), and your actual DOM confirms the empty
   value div has nothing in it at all, not even stray whitespace, so :empty
   matches it correctly here.
   !important: WordPress's own "is-layout-flex" utility class sets
   display:flex !important on this same row, which otherwise beats a
   plain (non-important) display:none regardless of specificity. */
.single-post-meta .single-post-info-row:has(.single-post-value:empty) {
  display: none !important;
}

/* When display:contents unwraps the row inside the grid (above), the
   :has() selector above still matches the (now content-less) row div
   itself and removes it from the grid entirely — the label+value simply
   won't be placed, so no empty grid row is left behind. */

.ub-button-medium {
  /* FOR THE BUTTONS ON THE POST PAGES */
  padding: 5px;
}

.annex {
  /*  For use in REC Management Notes no.2 */
  padding: 10px;
  border: 1px solid darkgray;
}

/* Single Post Page Bio */
/* SCOPED to .pp-multiple-authors-layout-boxed specifically — this is the
   layout used by the single-post byline box. Without that scoping class,
   every rule below was also matching ANY other PublishPress Authors box
   on the site (e.g. the "simple_list" box used in the blog excerpt list),
   which is why that excerpt box was picking up this box's border,
   background, and 100px avatar sizing. */

/* The outer box */
.pp-multiple-authors-layout-boxed.pp-multiple-authors-boxes-wrapper {
  border: 1px solid black !important;
  border-radius: 10px !important;
  background-color: #f2f2f2 !important;
  padding: 0 0 20px 0 !important;
  margin: 1.5rem auto 30px auto !important;
  box-sizing: border-box;
}

/* Hide PublishPress's "Author" heading and the empty prefix/suffix spans —
   Simple Author Box has none. (You can also turn the title off in
   PublishPress Authors > Boxes > edit your box > header settings.) */
.pp-multiple-authors-layout-boxed .box-header-title,
.pp-multiple-authors-layout-boxed .widget-title,
.pp-multiple-authors-layout-boxed .ppma-layout-prefix,
.pp-multiple-authors-layout-boxed .ppma-layout-suffix {
  display: none !important;
}

/* Stack the author vertically (avatar on top, then name, then bio) instead of
   PublishPress's default avatar-left / text-right layout. Also strip the <ul>. */
.pp-multiple-authors-layout-boxed .pp-multiple-authors-boxes-ul,
.pp-multiple-authors-layout-boxed .pp-multiple-authors-boxes-li {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Avatar: un-float, square-ish corners (not a circle), match the old padding */
.pp-multiple-authors-layout-boxed .pp-author-boxes-avatar {
  float: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 20px 20px 0 20px !important;
}

.pp-multiple-authors-layout-boxed .pp-author-boxes-avatar img {
  width: 100px !important;
  height: 100px !important;
  object-fit: cover !important;
  float: none !important; /* border-radius handled in the specificity-override block below */
}

/* Name + job title + bio sit below the avatar, on the same left edge.
   display:flex + order lets us reposition job title between name and bio
   without touching the actual HTML order PublishPress outputs (name, bio,
   email, job title). */
.pp-multiple-authors-layout-boxed .pp-author-boxes-avatar-details {
  display: flex !important;
  flex-direction: column !important;
  width: auto !important;
  padding: 10px 20px 0 20px !important;
}

.pp-multiple-authors-layout-boxed .pp-author-boxes-name {
  order: 1;
}

/* Job title: visible again, italic, sits between name and bio.
   NOTE: job title shares the .ppma-author-field-meta class with the email
   link below — that shared class is why hiding "the contact icon" (below)
   previously hid this too. Target the specific field instead. */
.pp-multiple-authors-layout-boxed .ppma-author-job_title-profile-data {
  display: block !important;
  order: 2;
  font-style: italic;
  color: #555;
  margin: 2px 0 8px 0;
}

.pp-multiple-authors-layout-boxed .pp-author-boxes-description {
  order: 3;
}

.pp-multiple-authors-layout-boxed .pp-author-boxes-description p {
  font-size: 14px !important;
  line-height: 21px !important;
}

/* Hide the contact icon to match Simple Author Box (email only — NOT the
   whole .ppma-author-field-meta class, which job title above also uses).
   Delete this rule if you'd rather keep the author's email link. */
.pp-multiple-authors-layout-boxed .ppma-author-field-type-email {
  display: none !important;
  order: 4;
}

/* Multiple authors: breathing room between stacked authors.
   (Simple Author Box only ever showed one author, so this is new behaviour.) */
.pp-multiple-authors-layout-boxed
  .pp-multiple-authors-boxes-li
  + .pp-multiple-authors-boxes-li {
  margin-top: 10px;
}

/* ---- Specificity overrides ----------------------------------------------
   PublishPress prints per-box INLINE CSS (generated from its Boxes editor)
   using a 3-class wrapper selector, which out-ranks single-class rules even
   with !important. The two selectors below MATCH that wrapper chain and
   double the final class, so they reliably win the cascade. They are tuned
   to the auto-appended box (…multiple-authors-target-the-content); if you
   ever place the box with a shortcode, that class won't be present — tell me
   and I'll add a matching fallback.
   Cleaner alternative: set these in PublishPress Authors > Author Boxes >
   edit box (avatar shape + borders), which removes the inline CSS at source
   and makes this whole block unnecessary. */

/* Remove the inner border PublishPress draws around each author <li>
   (and its enforced min-height, which can leave an empty strip). */
.pp-multiple-authors-boxes-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content
  .pp-multiple-authors-boxes-li.pp-multiple-authors-boxes-li {
  border: none !important;
  min-height: 0 !important;
}

/* Square-ish avatar — beat PublishPress's forced 50% circle */
.pp-multiple-authors-boxes-wrapper.pp-multiple-authors-layout-boxed.multiple-authors-target-the-content
  .pp-author-boxes-avatar.pp-author-boxes-avatar
  img {
  border-radius: 4px !important; /* 0 = hard corners, 50% = circle */
}

/* #endregion */

/* #region BLOG EXCERPT-LIST BYLINE (simple_list box) ----------------------
   The blog index uses the PublishPress "Author Box" widget (layout=
   simple_list) rather than a plain shortcode, because the shortcode-only
   approach didn't vary correctly per post inside the Query Loop — the box
   widget does. Scoped to .multiple-authors-target-shortcode so it can
   never bleed into the single-post byline above or vice versa.

   CONFIRMED (via DevTools, element-picked directly on the border) —
   PublishPress prints per-instance CSS using this exact 3-class ancestor
   chain before reaching each element:
     .pp-multiple-authors-boxes-wrapper.pp-multiple-authors-layout-simple_list.multiple-authors-target-shortcode
   Every selector below matches that chain exactly (rather than a shorter
   version of it) and then doubles the target element's own class, so the
   total specificity is unambiguously higher than PublishPress's — the
   same pattern that fixed the single-post box's inline CSS earlier. */

.pp-multiple-authors-boxes-wrapper.pp-multiple-authors-layout-simple_list.multiple-authors-target-shortcode.pp-multiple-authors-boxes-wrapper {
  display: inline !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.pp-multiple-authors-boxes-wrapper.pp-multiple-authors-layout-simple_list.multiple-authors-target-shortcode .ppma-layout-prefix,
.pp-multiple-authors-boxes-wrapper.pp-multiple-authors-layout-simple_list.multiple-authors-target-shortcode .ppma-layout-suffix,
.pp-multiple-authors-boxes-wrapper.pp-multiple-authors-layout-simple_list.multiple-authors-target-shortcode .ppma-author-category-wrap,
.pp-multiple-authors-boxes-wrapper.pp-multiple-authors-layout-simple_list.multiple-authors-target-shortcode .ppma-category-group.ppma-category-group {
  display: inline !important;
  border: none !important;
  background: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* No avatars in this compact usage */
.pp-multiple-authors-boxes-wrapper.pp-multiple-authors-layout-simple_list.multiple-authors-target-shortcode .pp-author-boxes-avatar.pp-author-boxes-avatar {
  display: none !important;
}

.pp-multiple-authors-boxes-wrapper.pp-multiple-authors-layout-simple_list.multiple-authors-target-shortcode .pp-multiple-authors-boxes-ul.pp-multiple-authors-boxes-ul,
.pp-multiple-authors-boxes-wrapper.pp-multiple-authors-layout-simple_list.multiple-authors-target-shortcode .pp-multiple-authors-boxes-li.pp-multiple-authors-boxes-li,
.pp-multiple-authors-boxes-wrapper.pp-multiple-authors-layout-simple_list.multiple-authors-target-shortcode .pp-author-boxes-avatar-details.pp-author-boxes-avatar-details,
.pp-multiple-authors-boxes-wrapper.pp-multiple-authors-layout-simple_list.multiple-authors-target-shortcode .pp-author-boxes-name.pp-author-boxes-name {
  display: inline !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  list-style: none !important;
}

/* Comma between multiple authors' names ("Howard White, Dr Shalu Jain") */
.pp-multiple-authors-boxes-wrapper.pp-multiple-authors-layout-simple_list.multiple-authors-target-shortcode .pp-multiple-authors-boxes-li:not(:last-child)::after {
  content: ", ";
}

/* Name link: inherit this row's existing font styling rather than any
   PublishPress default link colour/weight */
.pp-multiple-authors-boxes-wrapper.pp-multiple-authors-layout-simple_list.multiple-authors-target-shortcode .pp-author-boxes-name a.author {
  display: inline !important;
  font: inherit !important;
  color: inherit !important;
  text-decoration: inherit !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* #endregion */

/* #region ALL ARCHIVES  */

.search-group .wp-block-query-title,
.archive-title-row h1 {
  font-weight: 400;
  font-size: 36px;
}

.archive-title-row h1 span {
  font-weight: 200;
  color: rgb(67, 67, 67);
}

.archive-group ul li {
  padding: 15px;
  border-radius: 10px;
  background-color: rgb(216, 216, 216);
  margin-bottom: 20px;
}

.archive-group ul li h2 {
  padding: 0;
}

/* #endregion */

/* #region PDF-DOCUMENTS */

.pdf-documents h4 {
  margin-top: 40px;
}

.pdf-icon i {
  color: #aa0202;
  font-size: 2rem !important;
}

/* #endregion PDF DOCUMENTS */

/* #region Custom Form 7 */

/* Add this to your theme's style.css or in the Additional Settings of Contact Form 7 */
.misconduct-button-choice {
  justify-content: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* 
.misconduct-button-3 {
  appearance: none !important;
  background-color: #2ea44f !important;
  border: 1px solid rgba(27, 31, 35, .15);
  border-radius: 6px;
  box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  padding: 6px 16px;
  position: relative;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  white-space: nowrap;
}

.misconduct-button-3:focus:not(:focus-visible):not(.focus-visible) {
  box-shadow: none;
  outline: none;
}

.misconduct-button-3:hover {
  background-color: #2c974b;
}

.misconduct-button-3:focus {
  box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px;
  outline: none;
}

.misconduct-button-3:disabled {
  background-color: #94d3a2;
  border-color: rgba(27, 31, 35, .1);
  color: rgba(255, 255, 255, .8);
  cursor: default;
}

.misconduct-button-3:active {
  background-color: #298e46;
  box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset;
} */

.wpcf7-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.wpcf7-form h2,
.wpcf7-form h3 {
  color: #333;
  margin-bottom: 15px;
}

.wpcf7-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.wpcf7-form textarea {
  height: 100px;
}

span.wpcf7-list-item {
  display: block;
}

.misconduct-button-3,
.wpcf7-submit {
  background-color: #4caf50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 20px;
}

.misconduct-button-3,
.wpcf7-submit:hover {
  background-color: #45a049;
}

.privacy-notice {
  margin-top: 20px;
  padding: 15px;
  background-color: #e9e9e9;
  border-radius: 4px;
  font-size: 0.9em;
}

.privacy-notice p {
  margin-bottom: 10px;
}

.privacy-notice a {
  color: #4caf50;
  text-decoration: underline;
}

.privacy-notice a:hover {
  color: #45a049;
}

/* #endregion Custom Form 7 */

/*#region 1200px **/
@media (max-width: 1200px) {
  footer {
    padding: 0 30px;
    background-color: #ff8f01;
  }

  .full-page-single-column-template-column {
    border-radius: 0px;
  }

  .two-columns-template-both-columns {
    margin: 20px 0 !important;
    display: flex !important;
    flex-direction: row;
    justify-content: space-evenly;
  }

  .blog-home-col1 {
    background-color: white;
    border-radius: 10px;
    padding: 50px 50px !important;
    max-width: 60vw !important;
    margin-right: 0 !important;
  }

  .two-columns-template-col2 {
    max-width: 26vw;
  }

  .embedded-video {
    width: 82vw;
    width: clamp(16.25rem, 1.7046rem + 72.727vw, 56.25rem);
    /* display: none; */
  }
}

/*#endregion*/

/* #region 1024px */

@media (max-width: 1024px) {
  /*   FOOTER   */
  .footer-mobile-menu-search {
    display: block;
    /* shows central search box  on mobile menu */
    line-height: 1rem;
    padding-bottom: 15px;
  }

  .full-footer-search {
    display: none;
    /* hides main search box  on mobile menu */
  }

  .footer-row {
    justify-content: center;
    /* centers footer text on mobile menu */
  }

  .footer-row-stack-1 {
    align-items: center;
    /* centers footer text on mobile menu */
  }

  /* SINGLE PAGE WIDTHS */

  .actual-single-page-group {
    width: 80vw !important;
    width: clamp(40rem, 9.84318rem + 62.745vw, 50rem) !important;
  }

  .actual-single-page-group h1 {
    font-size: 28px !important;
    font-size: clamp(1.25rem, 0.6136rem + 3.182vw, 3rem) !important;
  }
}

/* #endregion */

/* #region 768px  */

@media (max-width: 768px) {
  /* BLOG HOME & ARCHIVES */
  .two-columns-template-col2 {
    display: none;
  }

  .two-columns-template-both-columns {
    margin: 0 auto !important;
    /* max-width: 80vw !important; */
  }

  .search-group .wp-block-query-title,
  .archive-title-row h1 {
    font-size: 24px;
    font-size: clamp(1.25rem, 0.5358rem + 3.571vw, 2.25rem);
  }

  .blog-home-col1 {
    max-width: 75vw !important;
    max-width: clamp(17.75rem, -1.2678rem + 95.089vw, 44.375rem) !important;
    padding: 2px !important;
    padding: clamp(0rem, -0.5804rem + 2.902vw, 0.8125rem) !important;
    background-color: #ff8e01;
  }

  .search-group ul li,
  .author-archive ul li,
  .archive-group ul li,
  .blog-home-group ul li {
    padding: 45px;
    padding: clamp(0.9375rem, -0.4017rem + 6.696vw, 2.8125rem);
    border-radius: 10px;
    background-color: white;
    border: 1px solid lightgray;
  }

  .blog-cols-2 {
    flex-direction: column;
  }

  .blog-mobile-heading-row,
  .blog-mobile-heading-row h2,
  .blog-home-mobile-author-row,
  .blog-home-mobile-author-row a,
  .blog-home-tags-row {
    display: block !important;
    text-align: left;
    padding-bottom: 7px !important;
    margin: 0;
  }

  .blog-mobile-heading-row h2 {
    font-size: 21px !important;
    font-weight: 600;
  }

  .blog-home-author a {
    font-size: 16px;
  }

  .blog-home-tags-row {
    margin-bottom: 20px;
  }

  .blog-tag a {
    font-size: 12px;
    color: white;
    padding: 4px 8px 6px 8px;
    padding: clamp(0.0625rem, -0.0715rem + 0.67vw, 0.25rem)
      clamp(0.375rem, 0.2858rem + 0.446vw, 0.5rem);
    border-radius: 6px;
    text-decoration: none;
    background-color: #ff8e01;
  }

  .blog-home-laptop-title-row,
  .blog-home-laptop-title,
  .blog-home-laptop-author-row,
  .blog-home-laptop-tags-row {
    display: none !important;
  }

  .blog-home-group ul li figure {
    text-align: center !important;
  }

  .blog-home-group ul li img {
    max-width: 70%;
  }

  .single-post-group-columns {
    width: 97vw !important;
    width: clamp(19.375rem, 1.0714rem + 91.518vw, 45rem) !important;
  }

  .single-post-group-columns-column {
    padding: 30px 30px;
    padding: clamp(1.875rem, 0.5358rem + 6.696vw, 3.75rem)
      clamp(1rem, -0.9642rem + 9.821vw, 3.75rem);
  }

  .single-post-title-row h1 {
    font-size: 24px;
    font-size: clamp(1.375rem, 1.1518rem + 1.116vw, 1.6875rem);
  }

  .featured-image-on-post-page {
    width: 80%;
    width: clamp(17.375rem, 11.0358rem + 31.696vw, 26.25rem);
    padding-bottom: 50px;
    padding-bottom: clamp(1.25rem, -0.0892rem + 6.696vw, 3.125rem);
  }

  .single-post-label p,
  .single-post-value p,
  .single-post-value a,
  .single-post-value time {
    font-size: 13px !important;
    line-height: 1.1rem !important; /* was 0.4rem — too tight for wrapped multi-line values; adjust to taste */
    font-size: clamp(0.75rem, 0.6rem + 0.6vw, 0.9375rem) !important; /* ~12px–15px instead of ~15px–22px */
  }

  /* PublishPress Authors equivalent (see main block above) */
  .single-post-content
    .pp-multiple-authors-boxes-wrapper
    .pp-author-boxes-description {
    text-align: left;
  }

  /* SINGLE PAGE WIDTHS */

  /* .actual-single-page-group {
		width: 80vw !important;
		width: clamp(40rem, 9.84318rem + 62.745vw, 50rem) !important;
	} */

  #services-list {
    width: 80vw !important;
    width: clamp(16.875rem, 0.3572rem + 82.589vw, 40rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/*#endregion*/

/* #region 660px  */

@media (max-width: 660px) {
  .my-3-cards {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .vertical-card-1,
  .vertical-card-2,
  .vertical-card-3 {
    border-radius: 8px;
    width: 300px !important;
    width: clamp(13.75rem, 9.0442rem + 23.529vw, 18.75rem) !important;
    height: 442px !important;
    height: clamp(20.3125rem, 13.4301rem + 34.412vw, 27.625rem) !important;
    z-index: 99;
    margin: 0 auto !important;
    padding: 10px 0 !important;
    padding: clamp(0.9375rem, 0.1727rem + 3.824vw, 1.75rem) !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin-bottom: 12px !important;
  }

  .vertical-card-1 p,
  .vertical-card-2 p,
  .vertical-card-3 p {
    font-weight: 200;
    margin: 0 auto !important;
    max-width: 100% !important;
  }

  .vertical-card-1 p a,
  .vertical-card-1 p {
    font-size: 10px;
    font-size: clamp(1.25rem, 0.7794rem + 2.353vw, 1.75rem) !important;
  }

  .vertical-card-2 p a,
  .vertical-card-2 p {
    font-size: 8px;
    font-size: clamp(1.125rem, 0.5368rem + 2.941vw, 1.75rem) !important;
  }

  .vertical-card-3 p a,
  .vertical-card-3 p {
    font-size: 10px;
    font-size: clamp(1.25rem, 0.7794rem + 2.353vw, 1.75rem) !important;
  }

  .vertical-card-1 a,
  .vertical-card-2 a,
  .vertical-card-3 a {
    margin-bottom: 10px;
    margin-bottom: clamp(0.5rem, 0.147rem + 1.765vw, 0.875rem) !important;
  }
}

/* #endregion */

/* #region WordCloud */

/* body {
	background: #000;
  } */

#all {
  margin: 160px auto;
  width: 100px;
  height: 100px;
  -webkit-animation: grow 4s;
  animation: grow 4s;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
}

.script,
.java {
  font-family: sans-serif;
  color: #000;
  font-size: 40px;
  display: block;
  position: relative;
}

.java:before {
  content: "";
  display: block;
  position: absolute;
  left: 85px;
  width: 20px;
  height: 100%;
  background-color: red;
  -webkit-animation: grow 4s;
  animation: grow 4s;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
}

/* Safari and Chrome */
@-webkit-keyframes grow {
  from {
    width: 0px;
  }

  to {
    /* width: 480px; */
    width: 10px;
  }
}

/* Standard keyframes */
@keyframes grow {
  from {
    width: 0px;
  }

  to {
    /* width: 480px; */
    width: 10px;
  }
}

#div1 {
  position: relative;
  width: 1200px;
  /* height: 735px; */
  /* margin: -470px auto 160px; */
  text-align: center;
  z-index: 0;
}

@media (max-width: 1200px) {
  #div1 {
    width: clamp(20rem, 0rem + 100vw, 75rem);
  }
}

/* @media (max-width: 768px) {
	#div1 {
		height: clamp(25rem, 9.5982rem + 77.009vw, 46.5625rem);
		margin-top: clamp(-27.5rem, -26.6072rem + -4.464vw, -28.75rem);
	}

	#circle {
		top: 81px !important;
		top: clamp(4.5rem, 3.9706rem + 2.647vw, 5.0625rem) !important;
	}
}

@media (max-width: 660px) {
	#circle {
		top: 81px !important;
		top: clamp(4.5rem, 3.9706rem + 2.647vw, 5.0625rem) !important;
	}
} */

#div1 span {
  position: absolute;
  top: 0px;
  left: 0px;
  font-family: sans-serif;
  font-weight: bold;
  text-decoration: none;
  padding: 3px 6px;
}

#div1 .blue {
  color: blue;
}

#div1 .black {
  color: black;
}

#div1 .green {
  color: green;
}

#div1 .col01 {
  color: #d0febf !important;
}

#div1 .col02 {
  color: #72e8da !important;
}

#div1 .col03 {
  color: #54a7fa !important;
}

#div1 .col04 {
  color: #915bf5 !important;
}

#div1 .col05 {
  color: #c0f5f8 !important;
}

#div1 .col06 {
  color: #a1e376 !important;
}

#div1 .col07 {
  color: #c05d68 !important;
}

#div1 .col08 {
  color: #717562 !important;
}

#div1 .col09 {
  color: #dcdc6a !important;
}

#div1 .col10 {
  color: #73c87c !important;
}

#div1 .col11 {
  color: #935770 !important;
}

#div1 .col12 {
  color: #ec577b !important;
}

#div1 .col13 {
  color: #72878b !important;
}

#div1 .col14 {
  color: #968e7e !important;
}

#div1 .col15 {
  color: #4b80df !important;
}

#div1 .col16 {
  color: #989262 !important;
}

#div1 .col17 {
  color: #99d09e !important;
}

#div1 .col18 {
  color: #b4bd93 !important;
}

#div1 .col19 {
  color: #55cf66 !important;
}

#div1 .col20 {
  color: #5fa8bc !important;
}

#div1 .col21 {
  color: #9ff8fb !important;
}

#div1 .col22 {
  color: #8c7459 !important;
}

#div1 .col23 {
  color: #a28958 !important;
}

#div1 .col24 {
  color: #da7961 !important;
}

#div1 .col25 {
  color: #e6b16e !important;
}

#div1 .col26 {
  color: #fc9a89 !important;
}

#div1 .col27 {
  color: #5451aa !important;
}

#div1 .col28 {
  color: #f5e5bf !important;
}

#div1 .col29 {
  color: #9dd64d !important;
}

#div1 .col30 {
  color: #505fe4 !important;
}

#div1 .col31 {
  color: #bc7b71 !important;
}

#div1 .col32 {
  color: #e6724d !important;
}

#div1 .col33 {
  color: #c362f7 !important;
}

#div1 .col34 {
  color: #6763e7 !important;
}

#div1 .col35 {
  color: #e275b9 !important;
}

#div1 .col36 {
  color: #deda4b !important;
}

#div1 .col37 {
  color: #83505d !important;
}

#div1 .col38 {
  color: #53b9a8 !important;
}

#div1 .col39 {
  color: #59914c !important;
}

#div1 .col40 {
  color: #756c57 !important;
}

#div1 .col41 {
  color: #b1ed5a !important;
}

#div1 .col42 {
  color: #5dcbf5 !important;
}

#div1 .col43 {
  color: #afec84 !important;
}

#div1 .col44 {
  color: #d58583 !important;
}

#div1 .col45 {
  color: #5260b8 !important;
}

#div1 .col46 {
  color: #845c9e !important;
}

#div1 .col47 {
  color: #de8451 !important;
}

#div1 .col48 {
  color: #967da5 !important;
}

#div1 .col49 {
  color: #9f946e !important;
}

#div1 .col50 {
  color: #7a8264 !important;
}

#div1 .col51 {
  color: #7a9b85 !important;
}

#div1 .col52 {
  color: #70b681 !important;
}

#div1 .col53 {
  color: #69aa58 !important;
}

#div1 .col54 {
  color: #e75967 !important;
}

#div1 .col55 {
  color: #9a725d !important;
}

#div1 .col56 {
  color: #99cf84 !important;
}

#div1 .col57 {
  color: #df5489 !important;
}

#div1 .col58 {
  color: #eacf83 !important;
}

#div1 .col59 {
  color: #86c2a4 !important;
}

#div1 .col60 {
  color: #5885ea !important;
}

#div1 .col61 {
  color: #e85556 !important;
}

#div1 .col62 {
  color: #9367d3 !important;
}

#div1 .col63 {
  color: #6ccf6a !important;
}

#div1 .col64 {
  color: #53abc6 !important;
}

#div1 .col65 {
  color: #ce8b51 !important;
}

#div1 .col66 {
  color: #80877c !important;
}

#div1 .col67 {
  color: #c96798 !important;
}

#div1 .col68 {
  color: #688dbf !important;
}

#div1 .col69 {
  color: #72caef !important;
}

#div1 .col70 {
  color: #805bf3 !important;
}

#div1 .col71 {
  color: #a6d463 !important;
}

#div1 .col72 {
  color: #75cbc5 !important;
}

#div1 .col73 {
  color: #60a48b !important;
}

#div1 .col74 {
  color: #549e64 !important;
}

#div1 .col75 {
  color: #ef4b5b !important;
}

#div1 .col76 {
  color: #aeadc3 !important;
}

#div1 .col77 {
  color: #9ae34b !important;
}

#div1 .col78 {
  color: #7e7df9 !important;
}

#div1 .col79 {
  color: #619fe6 !important;
}

#div1 .col80 {
  color: #8fc7ca !important;
}

#div1 .col81 {
  color: #f19553 !important;
}

#div1 .col82 {
  color: #8bde4c !important;
}

#div1 .col83 {
  color: #d18fa1 !important;
}

#div1 .col84 {
  color: #6e5dc0 !important;
}

#all p {
  font: 16px sans-serif;
  text-align: center;
  color: #ba0c0c;
}

#all p a {
  font-size: 20px;
  color: #ba0c0c;
}

#all p span {
  font-size: 14px;
  color: #ba0c0c;
}

/* Vendor prefixes for compatibility */
@-webkit-keyframes myAnimation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@-moz-keyframes myAnimation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@-o-keyframes myAnimation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Standard rule */
@keyframes myAnimation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* p a:hover { color: red; } */

/* #endregion */

/* Lists */
.no-bullet {
  list-style-type: none;
  padding-top: 0px !important;
  padding-bottom: 5px !important;
}

.no-bullet i {
  padding-right: 10px;
  padding-left: 20px;
}