/*
 * ---:[ Focus CSS reset ]:---
 */
* {
  margin: 0;
  padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal; }

table {
  border-collapse: collapse;
  border-spacing: 0;
  word-break: normal; }

img,
fieldset {
  border: 0; }

abbr,
acronym {
  text-decoration: none; }

code {
  line-height: 1em; }

pre {
  overflow: auto;
  word-wrap: normal;
  -moz-tab-size: 4;
  tab-size: 4; }

sub,
sup {
  line-height: 0.5em; }

img,
.wp-caption {
  max-width: 100%;
  height: auto; }

iframe,
video,
embed,
object {
  display: block;
  max-width: 100%; }

img,
.left,
.alignleft,
.right,
.alignright {
  display: block; }

.center,
.aligncenter {
  display: block;
  float: none;
  text-align: center;
  margin-right: auto;
  margin-left: auto; }

.clear {
  clear: both; }

button,
input[type=submit] {
  cursor: pointer;
  overflow: visible;
  -webkit-appearance: none; }

body {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  line-height: 34px;
  color: #111111;
  overflow-x: hidden; }

#header {
  background-color: #12a7ff;
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1); }

#content {
  word-break: break-word;
  padding-top: 34px;
  padding-bottom: 34px; }

#footer {
  color: #828282;
  background-color: #12a7ff;
  padding-top: 21px;
  padding-bottom: 21px;
  border-top: 1px solid rgba(0, 0, 0, 0.1); }

.container {
  box-sizing: border-box;
  padding-left: 21px;
  padding-right: 21px; }
  @media all and (min-width: 686px) {
    .container {
  max-width: 644px;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto; } }
  @media all and (min-width: 712px) {
    .container {
  max-width: 100%;
  padding-left: 34px;
  padding-right: 34px;
  margin-left: 0;
  margin-right: 0; } }
  @media all and (min-width: 1108px) {
    .container {
  max-width: 1040px;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto; } }

a {
  color: #de0404;
  text-decoration: none; }
  p a,
  .post_content a {
    text-decoration: underline; }
      p a.button,
      .post_content a.button {
        text-decoration: none; }

code,
pre,
kbd {
  font-family: Menlo, Consolas, Monaco, "Andale Mono", Courier, Verdana, sans-serif; }

  .grt h1 {
    font-family: "Zilla Slab", serif;
    font-size: 41px;
    line-height: 65px;
    font-weight: bold;
    color: #111111;
    margin-bottom: 34px; }
  .grt h2 {
    font-family: "Zilla Slab", serif;
    font-size: 32px;
    line-height: 52px;
    margin-top: 55px;
    margin-bottom: 34px; }
  .grt h3 {
    font-family: "Poppins", sans-serif;
    font-size: 25px;
    line-height: 41px;
    margin-top: 34px;
    margin-bottom: 21px; }
  .grt h4 {
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    line-height: 34px;
    margin-bottom: 13px; }
  .grt h1 + h2,
  .grt h2 + h3,
  .grt h2:first-child,
  .grt h3:first-child {
    margin-top: 0; }

  .grt ul,
  .grt ol {
    margin-left: 34px; }
  .grt li {
    margin-bottom: 13px; }
    .grt li:last-child {
      margin-bottom: 0; }
  .grt blockquote {
    color: #828282;
    padding-left: 21px;
    border-left: 8px solid rgba(0, 0, 0, 0.1); }
  .grt sub,
  .grt sup {
    color: #828282; }
  .grt code,
  .grt pre,
  .grt kbd {
    font-size: 18px; }
  .grt code {
    background-color: rgba(0, 0, 0, 0.08);
    padding: 5px;
    border-radius: 8px;
    margin: 0 1px; }
  .grt pre {
    background-color: #eeeeee;
    padding: 21px; }
  .grt kbd {
    font-size: 16px;
    color: #4e4e4e;
    background-color: #f7f7f7;
    padding: 5px 8px;
    border: 1px solid #cccccc;
    border-radius: 8px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #fafafa inset, 0 0 0 1px white inset;
    margin: 0 1px; }
  .grt p,
  .grt ul,
  .grt ol,
  .grt blockquote,
  .grt pre,
  .grt img {
    margin-bottom: 34px; }
  .grt ul ul,
  .grt ul ol,
  .grt ol ul,
  .grt ol ol {
    margin-top: 13px;
    margin-bottom: 0;
    margin-left: 21px; }
    .grt blockquote > :last-child {
      margin-bottom: 0; }
  @media all and (min-width: 686px) {
    body:not(.has-sidebar) .grt h1 {
        font-size: 52px;
        line-height: 81px; }
      body:not(.has-sidebar) .grt h2 {
        font-size: 41px;
        line-height: 65px; }
      body:not(.has-sidebar) .grt h3 {
        font-size: 32px;
        line-height: 52px; }
      body:not(.has-sidebar) .grt h4 {
        font-size: 25px;
        line-height: 41px; }
    .grt .left:not(.bar),
    .grt .alignleft {
      float: left;
      clear: both;
      margin-right: 34px; }
    .grt .right:not(.bar),
    .grt .alignright {
      float: right;
      clear: both;
      margin-left: 34px; } }
      .grt .headline_area .headline a {
        color: #111111; }
        .grt .headline_area .headline a:hover {
          color: #de0404; }
  .grt .byline {
    font-size: 16px;
    line-height: 28px;
    color: #828282;
    margin-top: -29px; }
      .grt .byline .post_author:after,
      .grt .byline .post_date:after,
      .grt .byline .num_comments_link:after,
      .grt .byline .post_edit:after {
        display: block;
        height: 0;
        content: '\a';
        white-space: pre; }
    .grt .byline .avatar {
      width: 56px;
      height: 56px; }
  .grt .drop_cap {
    font-size: 68px;
    line-height: 1em;
    margin-right: 8px;
    float: left; }
  .grt .small {
    font-size: 16px;
    line-height: 28px;
    color: #828282; }
    .grt .alert,
    .grt .note,
    .grt .box {
      padding: 21px; }
    .grt .alert {
      background-color: #ffe91f; }

    .grt .note {
      background-color: #ccf1ff; }

    .grt .box {
      background-color: #cce8cc; }

  .grt .highlight {
    background-color: #ffe91f;
    padding: 5px 0; }
  .grt .impact {
    font-size: 25px;
    line-height: 41px; }
  .grt .bar {
    color: #828282; }
  .grt .pop {
    box-shadow: 0 0 13px rgba(0, 0, 0, 0.4); }
  .grt .wp-caption,
  .grt .frame {
    box-sizing: border-box;
    color: #828282;
    background-color: #eeeeee;
    padding: 21px; }
    .grt .wp-caption img {
      margin-bottom: 21px; }
    .grt .wp-caption.aligncenter img {
      margin-right: auto;
      margin-left: auto; }
    .grt .wp-caption .wp-caption-text {
      margin-bottom: 0; }
  .grt .wp-caption-text,
  .grt .caption,
  .grt .footnotes {
    font-size: 16px;
    line-height: 28px; }
    .grt .wp-caption-text code,
    .grt .caption code,
    .grt .footnotes code {
      font-size: 14px; }
  .grt .caption {
    color: #828282;
    margin-top: -29px; }
  .grt .center + .caption,
  .grt .aligncenter + .caption {
    text-align: center; }
  .grt blockquote + .caption {
    padding-left: 29px; }
  .grt .footnotes {
    color: #828282;
    padding-top: 21px;
    border-top: 1px dotted rgba(0, 0, 0, 0.15); }
    .grt .footnotes p {
      margin-bottom: 13px; }
  .grt .author_description {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 34px; }
    .grt .author_description .avatar {
      float: left;
      width: 102px;
      height: 102px;
      margin-right: 21px; }
  .grt .author_description_intro {
    font-weight: bold; }
  .grt .post_box + .post_box {
    margin-top: 55px; }
    .grt .byline,
    .grt .alert,
    .grt .note,
    .grt .box,
    .grt .wp-caption,
    .grt .caption,
    .grt .footnotes,
    .grt .page-links {
      margin-bottom: 34px; }
      .grt .alert > :last-child,
      .grt .note > :last-child,
      .grt .box > :last-child,
      .grt .footnotes > :last-child,
      .grt .post_list > :last-child {
        margin-bottom: 0; }
  .grt .post_list {
    margin-bottom: 0; }
    .grt .post_box:after,
    .grt .headline_area:after,
    .grt .byline:after,
    .grt .post_content:after,
    .grt .post_list:after,
    .grt .extend:after,
    .grt .author_description:after,
    .grt .query_box:after {
      display: table;
      clear: both;
      content: ''; }
  @media all and (min-width: 424px) {
    .grt .byline .post_author:after,
        .grt .byline .post_date:after,
        .grt .byline .num_comments_link:after {
          display: none; }
        .grt .byline .post_author ~ .post_date_intro:before,
        .grt .byline .post_date_intro ~ .post_date_intro:before,
        .grt .byline .post_author ~ .num_comments_link:before,
        .grt .byline .post_date ~ .num_comments_link:before,
        .grt .byline .post_author ~ .post_edit:before,
        .grt .byline .post_date ~ .post_edit:before,
        .grt .byline .num_comments_link ~ .post_edit:before {
          color: #828282;
          content: '\2022\0020'; } }
  @media all and (min-width: 686px) {
    .grt .headline_area {
      position: relative; }
    .grt .impact {
      font-size: 32px;
      line-height: 52px; } }

label {
  display: block;
  font-weight: bold; }
  label .required {
    font-weight: normal; }

.required {
  color: #dd0000; }

input,
textarea,
select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  line-height: 1em;
  font-weight: inherit;
  padding: 8px;
  border: 1px solid rgba(0, 0, 0, 0.2); }

input[type=checkbox],
input[type=radio],
input[type=image],
input[type=submit],
select {
  width: auto; }

input[type=checkbox],
input[type=radio] {
  display: inline-block; }
  input[type=checkbox] + label,
  input[type=radio] + label {
    display: inline;
    font-weight: normal;
    margin-left: 13px; }

textarea {
  line-height: inherit; }


  button,
  input[type=submit],
  .button {
    display: inline-block;
    width: auto;
    font-family: inherit;
    font-size: inherit;
    font-weight: normal;
    line-height: 1em;
    vertical-align: top;
    color: #111111;
    text-decoration: none;
    background-color: #eeeeee;
    padding: 8px 13px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom-width: 4px;
    border-bottom-color: rgba(0, 0, 0, 0.25);
    border-radius: 13px;
    outline: 1px solid rgba(0, 0, 0, 0.1);
    outline-offset: -1px;
    cursor: pointer;
    -webkit-appearance: none; }
  button:hover,
  input[type=submit]:hover,
  .button:hover,
  button:active,
  input[type=submit]:active,
  .button:active {
    text-decoration: none;
    background-color: white;
    transition: background-color 0.3s ease; }
  button:active,
  input[type=submit]:active,
  .button:active {
    border-bottom-width: 2px;
    margin-top: 2px; }

    button.save,
    .button.save {
      color: white;
      background-color: #509b26; }
    button.save:hover,
    .button.save:hover,
    button.save:active,
    .button.save:active {
      background-color: #60ba2e; }
    button.delete,
    .button.delete {
      color: white;
      background-color: #d50b0b; }
    button.delete:hover,
    .button.delete:hover,
    button.delete:active,
    .button.delete:active {
      background-color: #f31313; }
    button.action,
    .button.action {
      color: white;
      background-color: #12a7ff; }
    button.action:hover,
    .button.action:hover,
    button.action:active,
    .button.action:active {
      background-color: #38b5ff; }
    button.update,
    .button.update {
      background-color: #fcfc0d; }
    button.update:hover,
    .button.update:hover,
    button.update:active,
    .button.update:active {
      background-color: #fcfc33; }


  #site_title {
    font-size: 52px;
    line-height: 81px;
    font-weight: bold;
    display: inline-block;
    vertical-align: bottom; }
    #site_title.has-logo {
      margin-bottom: 8px; }
    #site_title.has-logo:last-child {
      margin-bottom: 0; }
  #site_title a {
    color: inherit; }

  #site_tagline {
    color: #828282; }

  .prev_next {
    border-top: 1px dotted rgba(0, 0, 0, 0.15);
    padding-top: 21px;
    padding-bottom: 21px;
    margin-top: 34px;
    margin-bottom: -34px; }
  .prev_next.blog_nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse; }
    .prev_next .previous_posts:first-child {
      margin-right: auto; }
    .prev_next .previous_posts a:before {
      content: '\2190\0020'; }
    .prev_next .next_posts a:after {
      content: '\0020\2192'; }
  .prev_next .next_post,
  .prev_next .previous_post {
    margin-bottom: 0; }
  .prev_next .next_post + .previous_post {
    margin-top: 21px; }

  #comments .comments_intro {
    margin-top: 55px;
    margin-bottom: 34px; }
    #comments .comments_intro:after {
      content: '\0020\2193'; }
  #comments .num_comments,
  #comments .comments_closed {
    font-weight: bold; }
  #comments .comments_closed {
    font-weight: bold;
    margin-top: 55px; }
  #comments .comment_list {
    list-style: none;
    margin-left: 0; }
    #comments .comment_list > .comment:first-child {
      margin-top: 0; }
  #comments .comment {
    margin-top: 55px; }
    #comments .comment #respond {
      margin-top: 34px; }
  #comments .children {
    list-style: none;
    margin-top: 0;
    margin-left: 21px; }
    #comments .children .comment {
      margin-top: 34px; }
  #comments .comment_header {
    margin-bottom: 13px; }
  #comments .avatar {
    float: right;
    width: 55px;
    height: 55px;
    margin-left: 21px; }
  #comments .comment_author {
    font-weight: bold; }
    #comments .comment_date:before {
      display: block;
      height: 0;
      content: '\a';
      white-space: pre; }
    #comments .comment_text :last-child {
      margin-bottom: 13px; }
  #comments .comment_footer {
    font-size: 16px;
    line-height: 28px; }
    #comments .comment_footer a {
      text-transform: lowercase;
      margin-right: 13px; }
  #comments .comment_nav {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    padding: 21px 0;
    border-top: 1px dotted rgba(0, 0, 0, 0.15);
    border-bottom: 1px dotted rgba(0, 0, 0, 0.15); }
    #comments .comment_nav .previous_comments:first-child {
      margin-right: auto; }
  #comments #respond {
    margin-top: 55px; }
    #comments #respond p {
      margin-bottom: 21px; }
    #comments #respond .comment-reply-title {
      font-weight: bold; }
    #comments #respond #cancel-comment-reply-link {
      font-weight: normal;
      margin-left: 13px; }
    #comments #respond .comment-notes,
    #comments #respond .logged-in-as {
      padding: 21px;
      background-color: #ccf1ff; }
    #comments #respond .comment-form-cookies-consent {
      font-size: 16px;
      line-height: 28px; }
      #comments #respond .comment-form-cookies-consent input {
        vertical-align: -8%; }
      #comments #respond .comment-form-cookies-consent label {
        margin-left: 8px; }
    #comments #respond .submit {
      padding: 13px; }
  @media all and (min-width: 686px) {
    #comments .children {
      margin-left: 34px; }
      #comments .comment_date:before {
        display: inline;
        height: auto;
        content: '\2022\0020';
        white-space: normal; } }

      .readability .text .byline .avatar {
        float: right;
        margin-left: 21px;
        margin-bottom: 0; }
      .focus .text .byline .avatar {
        margin-bottom: 8px; }
      @media all and (min-width: 686px) {
        .readability .text .byline .avatar {
          float: left;
          margin-left: 0;
          margin-right: 21px; }
        .focus .text .byline .avatar {
          margin-bottom: 13px; } }
    .focus .text .breakout {
      margin-left: auto;
      margin-right: auto; }
    .text .breakout.left {
      float: none;
      margin-left: 0;
      margin-right: 0; }
    .text .pullout.left {
      float: none;
      margin-right: 0; }

@media all and (min-width: 712px) {
  .readability .text,
    .focus .text {
      max-width: 644px; }
      .readability .text .extend,
      .focus .text .extend {
        box-sizing: border-box;
        max-width: calc(100vw - 68px); }
      .readability .text .wp-caption img,
      .focus .text .wp-caption img {
        max-width: 100%; }
      .readability .text .headline_area,
      .readability .text .post_content > h1,
      .readability .text .post_content > h2,
      .readability .text .post_content > h3,
      .readability .text .post_content > h4,
      .readability .text .post_content > .impact,
      .readability .text .extend,
      .readability .text .extend + .caption {
        margin-right: calc(712px - 100vw); }
    .focus .text {
      margin-left: auto;
      margin-right: auto; }
      .focus .text .headline_area,
      .focus .text .post_content > h1,
      .focus .text .post_content > h2,
      .focus .text .post_content > h3,
      .focus .text .post_content > .impact,
      .focus .text .extend,
      .focus .text .extend + .caption {
        margin-left: calc(356px - (100vw / 2));
        margin-right: calc(356px - (100vw / 2)); }
        .focus .text .extend.right {
          margin-left: 34px; }
        .focus .text .extend.left {
          margin-right: 34px; } }

@media all and (min-width: 1108px) {
  .readability .text .pullout,
      .focus .text .pullout {
        float: right;
        box-sizing: border-box; }
      .readability .text .extend,
      .focus .text .extend {
        max-width: 1040px; }
        .readability .text .extend .pullout,
        .focus .text .extend .pullout {
          float: none;
          max-width: 100%; }
      .readability .text .headline_area,
      .readability .text .post_content > h1,
      .readability .text .post_content > h2,
      .readability .text .post_content > h3,
      .readability .text .post_content > h4,
      .readability .text .post_content > .impact,
      .readability .text .extend,
      .readability .text .extend + .caption {
        margin-right: -396px; }
      .readability .text .breakout {
        max-width: calc(701px + (100vw - 1040px) / 2);
        margin-right: calc(-396px - (100vw - 1040px) / 2); }
      .readability .text .pullout {
        max-width: calc(100vw - (100vw - 1040px) / 2 - 699px);
        margin-right: calc(-396px - (100vw - 1040px) / 2); }
        .readability .text .extend .pullout {
          margin-left: 0;
          margin-right: 0; }
      .focus .text .headline_area,
      .focus .text .post_content > h1,
      .focus .text .post_content > h2,
      .focus .text .post_content > h3,
      .focus .text .post_content > .impact,
      .focus .text .extend,
      .focus .text .extend + .caption {
        margin-left: -198px;
        margin-right: -198px; }
      .focus .text .breakout {
        max-width: calc(503px + (100vw - 1040px) / 2);
        margin-left: 34px;
        margin-right: calc(322px - (100vw / 2)); }
        .focus .text .breakout.left {
          margin-left: calc(322px - (100vw / 2));
          margin-right: 34px; }
      .focus .text .pullout {
        max-width: calc(100vw - (100vw - 1040px) / 2 - 876px);
        margin-right: calc(-198px - (100vw - 1040px) / 2); }
        .focus .text .pullout.left {
          float: left;
          margin-left: calc(-198px - (100vw - 1040px) / 2);
          margin-right: 0; }
        .focus .text .extend .pullout {
          margin-left: auto;
          margin-right: auto; }
    .text .breakout,
    .text .extend .breakout {
      float: right;
      box-sizing: border-box;
      max-width: calc(503px + (100vw - 1040px) / 2);
      margin-left: 34px;
      margin-right: calc((1040px - 100vw) / 2); }
      .text .breakout.left,
      .text .extend .breakout.left {
        float: left;
        margin-left: calc((1040px - 100vw) / 2);
        margin-right: 34px; }
      .has-sidebar .text .breakout,
      .has-sidebar .text .extend .breakout {
        float: none;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0; } }

    .mode-focus #header,
    .mode-focus #nav,
    .mode-focus #nav-secondary,
    .mode-focus #footer {
      text-align: center; }
      .mode-focus #header_image,
      .mode-focus #logo {
        margin-left: auto;
        margin-right: auto; }

      .focus .text .headline_area,
      .focus .text .featured_image_wrap,
      .focus .text .post_content h1,
      .focus .text h2,
      .focus .text h3,
      .focus .text h1 + .caption,
      .focus .text h2 + .caption,
      .focus .text h3 + .caption,
      .focus .text .impact,
      .focus .text .extend + .caption,
      .focus .text .extend .caption {
        text-align: center; }
        .focus .text .byline .avatar {
          margin-left: auto;
          margin-right: auto; }
    .focus .archive_title {
      text-align: center; }

      @media all and (min-width: 712px) {
        .readability .text .wp-post-image,
        .focus .text .wp-post-image {
          max-width: calc(100vw - 68px); }
        .focus .text .wp-post-image {
          margin-left: auto;
          margin-right: auto; } }
      @media all and (min-width: 1108px) {
        .readability .text .wp-post-image,
        .focus .text .wp-post-image {
          max-width: 1040px; } }

  .featured_image_link {
    display: inline-block;
    vertical-align: top; }

@media all and (min-width: 712px) {
  .readability .text .featured_image_wrap {
        margin-right: calc(712px - 100vw); }
      .focus .text .featured_image_wrap {
        margin-left: calc(356px - (100vw / 2));
        margin-right: calc(356px - (100vw / 2)); } }

@media all and (min-width: 1108px) {
  .readability .text .featured_image_wrap {
        margin-right: -396px; }
      .focus .text .featured_image_wrap {
        margin-left: -198px;
        margin-right: -198px; } }

  .menu {
    list-style: none;
    display: flex;
    align-items: baseline;
    white-space: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: -ms-autohiding-scrollbar; }
  .menu::-webkit-scrollbar {
    display: none; }
  .menu li {
    margin-right: 34px; }
    .menu li:last-child {
      margin-right: 0; }
  .menu a {
    display: block;
    padding-top: 13px;
    padding-bottom: 13px; }
  .menu:before {
    content: '\2194';
    color: #828282;
    margin-right: 21px; }
  @media all and (min-width: 686px) {
    .mode-focus .menu {
      justify-content: center; }
    .menu:before {
      display: none; } }

  .bar {
    color: #828282; }
  @media all and (min-width: 1108px) {
    .text .bar {
      width: 100%; }
      .text .bar code {
        font-size: 14px; }
      .readability .text .bar,
      .focus .text .bar {
        box-sizing: border-box;
        float: right;
        clear: right;
        font-size: 16px;
        line-height: 28px;
        margin-bottom: 21px; }
      .readability .text .bar {
        max-width: 341px;
        margin-right: -396px; }
      .focus .text .bar {
        max-width: 164px;
        margin-right: -198px; }
        .focus .text .bar.left {
          float: left;
          clear: left;
          margin-left: -198px; } }

  .bleed {
    position: relative;
    width: 100vw;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-top: 55px;
    margin-bottom: 55px;
    margin-left: -21px; }
  .bleed + .bleed {
    margin-top: -55px; }
  .content > .post_box:last-child .bleed:last-child {
    border-bottom: 0;
    margin-bottom: -34px; }
  .bleed:after {
    display: table;
    clear: both;
    content: ''; }
  @media all and (min-width: 686px) {
    .bleed {
    margin-left: calc(calc(644px - 100vw) / 2); } }
  @media all and (min-width: 712px) {
    .bleed {
    margin-left: -34px; } }
  @media all and (min-width: 1108px) {
    .bleed {
    margin-left: calc(calc(1040px - 100vw) / 2); } }
  .focus .bleed {
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw; }
  .bleed .container {
    padding-top: 34px;
    padding-bottom: 21px; }
  .bleed pre,
  .bleed .wp-caption,
  .bleed .frame {
    background-color: rgba(0, 0, 0, 0.1); }
  .bleed.no-border {
    border-top: none; }
  .bleed.red {
    background-color: #ffcccc; }
    .bleed.red blockquote,
    .bleed.red .post_content > .small,
    .bleed.red .caption,
    .bleed.red .bar,
    .bleed.red .wp-caption {
      color: maroon; }
  .bleed.salmon {
    background-color: #ffddcc; }
    .bleed.salmon blockquote,
    .bleed.salmon .post_content > .small,
    .bleed.salmon .caption,
    .bleed.salmon .bar,
    .bleed.salmon .wp-caption {
      color: #802b00; }
  .bleed.orange {
    background-color: #ffeecc; }
    .bleed.orange blockquote,
    .bleed.orange .post_content > .small,
    .bleed.orange .caption,
    .bleed.orange .bar,
    .bleed.orange .wp-caption {
      color: #805500; }
  .bleed.yellow {
    background-color: #ffffcc; }
    .bleed.yellow blockquote,
    .bleed.yellow .post_content > .small,
    .bleed.yellow .caption,
    .bleed.yellow .bar,
    .bleed.yellow .wp-caption {
      color: olive; }
  .bleed.chartreuse {
    background-color: #eeffcc; }
    .bleed.chartreuse blockquote,
    .bleed.chartreuse .post_content > .small,
    .bleed.chartreuse .caption,
    .bleed.chartreuse .bar,
    .bleed.chartreuse .wp-caption {
      color: #558000; }
  .bleed.lime {
    background-color: #ddffcc; }
    .bleed.lime blockquote,
    .bleed.lime .post_content > .small,
    .bleed.lime .caption,
    .bleed.lime .bar,
    .bleed.lime .wp-caption {
      color: #2a8000; }
  .bleed.green {
    background-color: #ccffcc; }
    .bleed.green blockquote,
    .bleed.green .post_content > .small,
    .bleed.green .caption,
    .bleed.green .bar,
    .bleed.green .wp-caption {
      color: green; }
  .bleed.aquamarine {
    background-color: #ccffdd; }
    .bleed.aquamarine blockquote,
    .bleed.aquamarine .post_content > .small,
    .bleed.aquamarine .caption,
    .bleed.aquamarine .bar,
    .bleed.aquamarine .wp-caption {
      color: #00802b; }
  .bleed.turquoise {
    background-color: #ccffee; }
    .bleed.turquoise blockquote,
    .bleed.turquoise .post_content > .small,
    .bleed.turquoise .caption,
    .bleed.turquoise .bar,
    .bleed.turquoise .wp-caption {
      color: #008055; }
  .bleed.cyan {
    background-color: #ccffff; }
    .bleed.cyan blockquote,
    .bleed.cyan .post_content > .small,
    .bleed.cyan .caption,
    .bleed.cyan .bar,
    .bleed.cyan .wp-caption {
      color: teal; }
  .bleed.blue {
    background-color: #cceeff; }
    .bleed.blue blockquote,
    .bleed.blue .post_content > .small,
    .bleed.blue .caption,
    .bleed.blue .bar,
    .bleed.blue .wp-caption {
      color: #005580; }
  .bleed.steel {
    background-color: #ccddff; }
    .bleed.steel blockquote,
    .bleed.steel .post_content > .small,
    .bleed.steel .caption,
    .bleed.steel .bar,
    .bleed.steel .wp-caption {
      color: #002a80; }
  .bleed.lavender {
    background-color: #ccccff; }
    .bleed.lavender blockquote,
    .bleed.lavender .post_content > .small,
    .bleed.lavender .caption,
    .bleed.lavender .bar,
    .bleed.lavender .wp-caption {
      color: navy; }
  .bleed.purple {
    background-color: #ddccff; }
    .bleed.purple blockquote,
    .bleed.purple .post_content > .small,
    .bleed.purple .caption,
    .bleed.purple .bar,
    .bleed.purple .wp-caption {
      color: #2b0080; }
  .bleed.orchid {
    background-color: #eeccff; }
    .bleed.orchid blockquote,
    .bleed.orchid .post_content > .small,
    .bleed.orchid .caption,
    .bleed.orchid .bar,
    .bleed.orchid .wp-caption {
      color: #550080; }
  .bleed.magenta {
    background-color: #ffccff; }
    .bleed.magenta blockquote,
    .bleed.magenta .post_content > .small,
    .bleed.magenta .caption,
    .bleed.magenta .bar,
    .bleed.magenta .wp-caption {
      color: purple; }
  .bleed.pink {
    background-color: #ffccee; }
    .bleed.pink blockquote,
    .bleed.pink .post_content > .small,
    .bleed.pink .caption,
    .bleed.pink .bar,
    .bleed.pink .wp-caption {
      color: #800055; }
  .bleed.rose {
    background-color: #ffccdd; }
    .bleed.rose blockquote,
    .bleed.rose .post_content > .small,
    .bleed.rose .caption,
    .bleed.rose .bar,
    .bleed.rose .wp-caption {
      color: #80002a; }

.youtube {
  position: relative;
  background-color: black;
  padding-top: 56.211%;
  margin-bottom: 34px;
  overflow: hidden;
  cursor: pointer; }
  .youtube img,
  .youtube iframe,
  .youtube .play,
  .youtube .play:before {
    position: absolute; }
  .youtube img {
    width: 100%;
    top: -16.71%;
    left: 0;
    opacity: 0.7; }
  .youtube.custom-thumb img {
    top: 0; }
  .youtube iframe {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0; }
  .youtube .play,
  .youtube .play:before {
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0); }
  .youtube .play {
    width: 90px;
    height: 60px;
    background-color: #ff1616;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
    z-index: 1;
    opacity: 0.8;
    border-radius: 6px; }
  .youtube .play:before {
    content: '';
    border-style: solid;
    border-width: 15px 0 15px 26px;
    border-color: transparent transparent transparent white; }

.card {
  box-sizing: border-box;
  color: inherit;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.3);
  margin-bottom: 34px;
  overflow: hidden;
  transition: all 0.1s ease-in-out; }
  .card:hover {
    transform: scale(1.03); }
  .card .card-body {
    padding: 24px 21px 21px 21px; }
  .card .card-text:first-child {
    margin-top: 3px; }
  .card .card-title,
  .card .card-subtitle {
    text-align: center; }
    .card .card-title:last-child,
    .card .card-subtitle:last-child {
      margin-bottom: 0; }
  .card .card-title {
    font-size: 25px;
    line-height: 41px;
    font-weight: bold;
    margin-bottom: 17px; }
    .card .card-title a {
      text-decoration: none; }
  .card .card-subtitle {
    font-size: 16px;
    line-height: 28px;
    color: #828282;
    margin-top: -17px;
    margin-bottom: 21px; }
  .card.card-centered .card-text {
    text-align: center; }
  .card .card-text > :last-child {
    margin-bottom: 0; }
  @media all and (min-width: 465px) {
    .card .card-body {
      padding: 24px 34px 34px 34px; }
    .card .card-title {
      font-size: 32px;
      line-height: 52px; } }

  .grt .card {
    display: block;
    text-decoration: none; }
  .grt .card .card-image {
    max-width: 100%;
    margin-bottom: 0; }

.card-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }
  .card-flex > .card {
    flex-basis: 100%; }
    .card-flex.card-flex-2 > .card,
    .card-flex.card-flex-3 > .card {
      max-width: 503px; }
    @media all and (min-width: 712px) {
      .card-flex.card-flex-2,
  .card-flex.card-flex-3 {
    justify-content: space-between; }
      .card-flex.card-flex-2 > .card,
      .card-flex.card-flex-3 > .card {
        max-width: calc(50% - 17px); }
      .card-flex.card-flex-2 .card-body,
      .card-flex.card-flex-3 .card-body {
        padding: 24px 21px 21px 21px; }
      .card-flex.card-flex-2 .card-title,
      .card-flex.card-flex-3 .card-title {
        font-size: 25px;
        line-height: 41px; } }
    @media all and (min-width: 948px) {
      .card-flex.card-flex-2 .card-body,
      .card-flex.card-flex-3 .card-body {
        padding: 24px 34px 34px 34px; }
      .card-flex.card-flex-2 .card-title,
      .card-flex.card-flex-3 .card-title {
        font-size: 32px;
        line-height: 52px; } }
    @media all and (min-width: 1108px) {
      .card-flex.card-flex-3 > .card {
        max-width: calc(33.333% - 22.668px); }
      .card-flex.card-flex-3 .card-body {
        padding: 24px 21px 21px 21px; }
      .card-flex.card-flex-3 .card-title {
        font-size: 25px;
        line-height: 41px; } }
    .card-flex.card-flex-4 > .card {
      max-width: 351.75px; }
    @media all and (min-width: 465px) {
      .card-flex.card-flex-4 .card-body {
        padding: 24px 21px 21px 21px; }
      .card-flex.card-flex-4 .card-title {
        font-size: 25px;
        line-height: 41px; } }
    @media all and (min-width: 545px) {
      .card-flex.card-flex-4 {
    justify-content: space-between; }
      .card-flex.card-flex-4 > .card {
        max-width: calc(50% - 17px); } }
    @media all and (min-width: 839.5px) {
      .card-flex.card-flex-4 > .card {
        max-width: calc(33.333% - 22.668px); } }
    @media all and (min-width: 1108px) {
      .card-flex.card-flex-4 > .card {
        max-width: calc(25% - 25.5px); } }

/*
 * ---:[ Custom CSS ]:---
 */
ul.checklist {
  list-style-type: none;
  margin-left: 0; }
  ul.checklist li {
    padding-left: 26px; }
    ul.checklist li:before {
      content: '\1f449';
      color: black;
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

ul.pin-list {
  list-style-type: none;
  margin-left: 0; }
  ul.pin-list li {
    padding-left: 26px; }
    ul.pin-list li:before {
      content: '📌';
      color: black;
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

ul.checklist-scalp {
  list-style-type: none;
  margin-left: 0; }
  ul.checklist-scalp li {
    padding-left: 26px; }
    ul.checklist-scalp li:before {
      content: '\1f9f4';
            /*
       * Lotion bottle emoji 🧴
       */
      color: black;
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

ul.checklist-hairtype {
  list-style-type: none;
  margin-left: 0; }
  ul.checklist-hairtype li {
    padding-left: 26px; }
    ul.checklist-hairtype li:before {
      content: '\1f487';
            /*
       * Haircut emoji 💇
       */
      color: black;
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

ul.checklist-length {
  list-style-type: none;
  margin-left: 0; }
  ul.checklist-length li {
    padding-left: 26px; }
    ul.checklist-length li:before {
      content: '\2702';
            /*
       * Scissors emoji ✂️
       */
      color: black;
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

ul.checklist-goals {
  list-style-type: none;
  margin-left: 0; }
  ul.checklist-goals li {
    padding-left: 26px; }
    ul.checklist-goals li:before {
      content: '\1f331';
            /*
       * Seedling emoji 🌱
       */
      color: black;
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

ul.checklist-general {
  list-style-type: none;
  margin-left: 0; }
  ul.checklist-general li {
    padding-left: 26px; }
    ul.checklist-general li:before {
      content: '\1faae';
            /*
       * Hair comb emoji 🪮
       */
      color: black;
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

ul.checklist-qball {
  list-style-type: none;
  margin-left: 0; }
  ul.checklist-qball li {
    padding-left: 26px; }
    ul.checklist-qball li:before {
      content: '\1f3b1';
            /*
       * 8-Ball emoji 🎱
       */
      color: black;
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

ul.meditationlist {
  list-style-type: none;
  margin-left: 0; }
  ul.meditationlist li {
    padding-left: 26px; }
    ul.meditationlist li:before {
      content: '\1F9D8';
            /*
       * Unicode for 🧘
       */
      color: purple;
            /*
       * Adjust the color if needed
       */
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

ul.yinyanglist {
  list-style-type: none;
  margin-left: 0; }
  ul.yinyanglist li {
    padding-left: 26px; }
    ul.yinyanglist li:before {
      content: '\262F';
            /*
       * Unicode for ☯️
       */
      color: purple;
            /*
       * Adjust the color if needed
       */
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

ul.alarm-buzzer-list {
  list-style-type: none;
  margin-left: 0; }
  ul.alarm-buzzer-list li {
    padding-left: 26px; }
    ul.alarm-buzzer-list li:before {
      content: '\1f6a8';
            /*
       * Unicode for 🚨
       */
      color: purple;
            /*
       * Adjust the color if needed
       */
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

ul.scrolllist {
  list-style-type: none;
  margin-left: 0; }
  ul.scrolllist li {
    padding-left: 26px; }
    ul.scrolllist li:before {
      content: "☯️";
            /*
       * Unicode for 📜
       */
      color: purple;
            /*
       * Adjust the color if needed
       */
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

ul.happyfaceteeth-list {
  list-style-type: none;
  margin-left: 0; }
  ul.happyfaceteeth-list li {
    padding-left: 26px; }
    ul.happyfaceteeth-list li:before {
      content: "😄";
            /*
       * Unicode for 😄
       */
      color: purple;
            /*
       * Adjust the color if needed
       */
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

ul.toothbrushlist {
  list-style-type: none;
  margin-left: 0; }
  ul.toothbrushlist li {
    padding-left: 26px; }
    ul.toothbrushlist li:before {
      content: '\1FAA5';
            /*
       * Unicode for toothbrush
       */
      color: black;
            /*
       * Adjust the color if needed
       */
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

ul.poolist {
  list-style-type: none;
  margin-left: 0; }
  ul.poolist li {
    padding-left: 26px; }
    ul.poolist li:before {
      content: '\1F4A9';
            /*
       * Unicode for poo emoji
       */
      color: black;
            /*
       * Adjust the color if needed
       */
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

ul.wearylist {
  list-style-type: none;
  margin-left: 0; }
  ul.wearylist li {
    padding-left: 26px; }
    ul.wearylist li:before {
      content: '\1F629';
            /*
       * Unicode for 😩
       */
      color: black;
            /*
       * Adjust the color if needed
       */
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

ul.targetchecklist {
  list-style-type: none;
  margin-left: 0; }
  ul.targetchecklist li {
    padding-left: 26px; }
    ul.targetchecklist li:before {
      content: '\1F3AF';
      color: black;
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

ul.treechecklist {
  list-style-type: none;
  margin-left: 0; }
  ul.treechecklist li {
    padding-left: 26px; }
    ul.treechecklist li:before {
      content: '\1f333';
      color: black;
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

ul.footprintchecklist {
  list-style-type: none;
  margin-left: 0; }
  ul.footprintchecklist li {
    padding-left: 26px; }
    ul.footprintchecklist li:before {
      content: '\1f463';
      color: black;
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

ul.writingchecklist {
  list-style-type: none;
  margin-left: 0; }
  ul.writingchecklist li {
    padding-left: 26px;
        /*
     * Adjust the padding values to your variables
     */ }
    ul.writingchecklist li:before {
      content: '\270D\FE0F';
            /*
       * Unicode for ✍️
       */
      color: black;
      display: inline-block;
      width: 26px;
            /*
       * Adjust the width values to your variables
       */
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

ul.comblist {
  list-style-type: none;
  margin-left: 0; }
  ul.comblist li {
    padding-left: 26px; }
    ul.comblist li:before {
      content: '\1FAA4';
            /*
       * Unicode for comb
       */
      color: black;
            /*
       * Adjust the color if needed
       */
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

ul.explosionchecklist {
  list-style-type: none;
  margin-left: 0; }
  ul.explosionchecklist li {
    padding-left: 26px; }
    ul.explosionchecklist li:before {
      content: '\1F4A5';
      color: black;
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

ul.prayerchecklist {
  list-style-type: none;
    /*
   * Removes default bullets
   */
  margin-left: 0;
    /*
   * Aligns the list to the left
   */ }
  ul.prayerchecklist li {
    padding-left: 26px;
        /*
     * Adjust padding to make space for the emoji
     */ }
    ul.prayerchecklist li:before {
      content: '\1F64F';
            /*
       * Unicode for 🙏 emoji
       */
      color: black;
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

ul.gonzochecklist {
  list-style-type: none;
  margin-left: 2; }
  ul.gonzochecklist li {
    padding-left: 26px; }
    ul.gonzochecklist li:before {
      content: '\1f449';
      color: black;
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

ul.conschecklist {
  list-style-type: none;
  margin-left: 0; }
  ul.conschecklist li {
    padding-left: 26px; }
    ul.conschecklist li:before {
      content: '\274c';
      color: black;
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

ul.gear-list {
  list-style-type: none;
  margin-left: 0; }
  ul.gear-list li {
    padding-left: 26px; }
    ul.gear-list li:before {
      content: "⚙️";
      color: black;
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

ul.handshakelist {
  list-style-type: none;
  margin-left: 0; }
  ul.handshakelist li {
    padding-left: 26px; }
    ul.handshakelist li:before {
      content: "🤝";
      color: black;
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

ul.greenchecklist {
  list-style-type: none;
  margin-left: 0; }
  ul.greenchecklist li {
    padding-left: 26px; }
    ul.greenchecklist li:before {
      content: '\2705';
      color: blue;
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

/*
 * When Section - 🕒
 */
ul.checklist-when {
  list-style-type: none;
  margin-left: 0; }
  ul.checklist-when li {
    padding-left: 26px; }
    ul.checklist-when li:before {
      content: '\1f552';
            /*
       * Clock emoji 🕒
       */
      color: black;
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

/*
 * Why Section - 💡
 */
ul.checklist-why {
  list-style-type: none;
  margin-left: 0; }
  ul.checklist-why li {
    padding-left: 26px; }
    ul.checklist-why li:before {
      content: '\1f4a1';
            /*
       * Lightbulb emoji 💡
       */
      color: black;
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

/*
 * How Section - 🪄
 */
ul.checklist-how {
  list-style-type: none;
  margin-left: 0; }
  ul.checklist-how li {
    padding-left: 26px; }
    ul.checklist-how li:before {
      content: '\1fa84';
            /*
       * Magic wand emoji 🪄
       */
      color: black;
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

/*
 * What You'll Need Section - 🛍️
 */
ul.checklist-whatyoullneed {
  list-style-type: none;
  margin-left: 0; }
  ul.checklist-whatyoullneed li {
    padding-left: 26px; }
    ul.checklist-whatyoullneed li:before {
      content: '\1f6cd';
            /*
       * Shopping bags emoji 🛍️
       */
      color: black;
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

ul.checkbox {
  list-style-type: none;
  margin-left: 0; }
  ul.checkbox li {
    padding-left: 26px; }
    ul.checkbox li:before {
      content: '\2B1C';
      color: blue;
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

ul.notebooklist {
  list-style-type: none;
  margin-left: 0; }
  ul.notebooklist li {
    padding-left: 26px; }
    ul.notebooklist li:before {
      content: '\1f4d8';
            /*
       * Unicode for 📓
       */
      color: black;
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

ul.costchecklist {
  list-style-type: none;
  margin-left: 0; }
  ul.costchecklist li {
    padding-left: 26px; }
    ul.costchecklist li:before {
      content: '\1f4b0';
      color: black;
      display: inline-block;
      width: 26px;
      margin-left: -26px;
      font-family: inherit;
      font-weight: normal; }

/*
 * Custom styles for disclaimer text
 */
.disclaimer-text {
  font-size: 16px;
    /*
   * Keep the font size as is
   */
  line-height: 28px;
    /*
   * Keep the line height as is
   */
  color: #111111;
    /*
   * Set the color to #
   */
  opacity: 0.9;
    /*
   * Optional: keep it to make it more visible
   */ }

/*
 * Add underline to links within disclaimer text
 */
.disclaimer-text a {
  text-decoration: underline; }

.footer-links {
  color: #111111;
  margin-bottom: 21px; }

.focus .text .post_content > h2,
.focus .text .post_content > h3 {
  margin-left: 0;
  margin-right: 0; }

.readability .text .post_content > h2,
.readability .text .post_content > h3,
.readability .text .post_content > h4 {
  margin-left: 0;
  margin-right: 0; }

ul.countemoji {
  list-style-type: none;
  margin-left: 0;
  counter-reset: list-counter;
    /*
   * Initialize the counter
   */ }

ul.countemoji li {
  padding-left: 26px;
    /*
   * Maintain original spacing
   */
  position: relative;
  counter-increment: list-counter;
    /*
   * Increment the counter for each 
   */ }

ul.countemoji li:before {
  color: black;
  display: inline-block;
  width: 26px;
    /*
   * Maintain original width
   */
  margin-left: -26px;
    /*
   * Align emoji with text
   */
  font-family: inherit;
  font-weight: normal;
    /*
   * Use the appropriate emoji based on the counter value
   */
  content: counter(list-counter, decimal); }

/*
 * Manually map each counter value to the emoji
 */
ul.countemoji li:nth-child(1):before {
  content: "1️⃣"; }

ul.countemoji li:nth-child(2):before {
  content: "2️⃣"; }

ul.countemoji li:nth-child(3):before {
  content: "3️⃣"; }

ul.countemoji li:nth-child(4):before {
  content: "4️⃣"; }

ul.countemoji li:nth-child(5):before {
  content: "5️⃣"; }

ul.countemoji li:nth-child(6):before {
  content: "6️⃣"; }

ul.countemoji li:nth-child(7):before {
  content: "7️⃣"; }

ul.countemoji li:nth-child(8):before {
  content: "8️⃣"; }

ul.countemoji li:nth-child(9):before {
  content: "9️⃣"; }

ul.countemoji li:nth-child(10):before {
  content: "🔟"; }

/*
 * Slimmer header with proportional logo
 */
#header {
  padding-top: 5px;
    /*
   * Reduce top space
   */
  padding-bottom: 5px;
    /*
   * Reduce bottom space
   */
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
    /*
   * Slightly lighter shadow for a sleek effect
   */
  display: flex;
  align-items: center;
    /*
   * Center logo vertically
   */
  justify-content: center;
    /*
   * Center logo horizontally (adjust if needed)
   */
  position: relative;
    /*
   * Keep for stacking context if needed
   */
  z-index: 1;
    /*
   * Ensure header stays on top
   */ }

/*
 * Proportional resizing for the logo with id="logo"
 */
#logo {
  height: 37px;
    /*
   * Reduce logo height
   */
  width: auto;
    /*
   * Maintain aspect ratio
   */
  max-height: 100%;
    /*
   * Ensure it doesn't exceed header height
   */
  transition: all 0.3s ease;
    /*
   * Smooth resizing effect
   */ }

#footer {
  border-top: 0px solid #111111;
  padding-top: 10px;
  box-shadow: 0 -5px 8px rgba(0, 0, 0, 0.3);
    /*
   * Adds the same shadow effect to the footer
   */
  position: relative;
  z-index: 1; }

.crumbs {
  display: block;
  width: fit-content;
    /*
   * or a specific width like 100%, 800px, etc.
   */
  margin: 0 auto;
    /*
   * This centers it horizontally
   */
  text-align: center;
    /*
   * Ensure the text inside the box is centered
   */ }

.crumbs {
  font-size: 13px;
    /*
   * Keep the font size as is
   */ }

.crumbs {
  margin-top: -25px;
    /*
   * Reduce top margin
   */
  padding-top: 0;
    /*
   * Reduce top padding
   */
  margin-bottom: -13px; }

/*
 * Updated box around Focus Cards
 */
#card-370,
#card-1551,
#card-372,
#card-3847,
#card-154,
#card-1659,
#card-368,
#card-1517,
#card-2640,
#card-44,
#card-40,
#card-1014 {
  border: 5px solid #ffe91f;
  position: relative; }

/*
 * Updated box around Focus Cards
 */
#card-370::before,
#card-1551::before,
#card-372::before,
#card-3847::before,
#card-154::before,
#card-1659::before,
#card-368::before,
#card-1517::before,
#card-2640::before,
#card-44::before,
#card-40::before,
#card-1014::before {
  content: 'UPDATED';
  background-color: #ffe91f;
  color: #111111;
  padding: 5px;
  font-size: 12px;
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 3px;
  font-weight: bold; }

/*
 * New box around Focus Cards
 */
#card-4221::before,
#card-4215::before,
#card-58::before,
#card-61::before,
#card-59::before,
#card-2744::before,
#card-2954::before,
#card-2811::before,
#card-2805::before,
#card-2808::before,
#card-2811::before,
#card-1523::before,
#card-304::before,
#card-298::before,
#card-301::before,
#card-45::before,
#card-1070::before,
#card-542::before,
#card-1060::before,
#card-547::before {
  content: 'NEW';
  background-color: #5dce12;
  color: #111111;
  padding: 5px;
  font-size: 12px;
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 3px;
  font-weight: bold; }

/*
 * New box around Focus Cards
 */
#card-4221,
#card-4215,
#card-58,
#card-61,
#card-59,
#card-2744,
#card-2954,
#card-2811,
#card-2805,
#card-2808,
#card-2811,
#card-1523,
#card-304,
#card-298,
#card-301,
#card-45,
#card-1070,
#card-1060,
#card-547,
#card-542 {
  border: 5px solid #5dce12;
  position: relative; }

/*
 * POPULAR
 */
#card-5363,
#card-5360,
#card-658,
#card-5353,
#card-656,
#card-406,
#card-4194,
#card-2741,
#card-2961,
#card-2933,
#card-2948,
#card-49,
#card-149,
#card-50,
#card-289,
#card-286,
#card-279,
#card-2656,
#card-143,
#card-140,
#card-364,
#card-2536,
#card-362,
#card-1184,
#card-1631,
#card-137,
#card-1553,
#card-1672,
#card-1830,
#card-1791,
#card-1440 {
  border: 5px solid #af42ae;
    /*
   * Hot Pink
   */
  position: relative; }

#card-5363::before,
#card-5360::before,
#card-658::before,
#card-5353::before,
#card-656::before,
#card-406::before,
#card-4194::before,
#card-2741::before,
#card-2961::before,
#card-2933::before,
#card-2948::before,
#card-49::before,
#card-149::before,
#card-50::before,
#card-289::before,
#card-286::before,
#card-279::before,
#card-2656::before,
#card-143::before,
#card-140::before,
#card-364::before,
#card-2536::before,
#card-362::before,
#card-1440::before,
#card-1631::before,
#card-1791::before,
#card-137::before,
#card-1553::before,
#card-1830::before,
#card-1672::before,
#card-1184::before {
  content: 'POPULAR';
  background-color: #af42ae;
  color: #111111;
  padding: 5px;
  font-size: 12px;
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 3px;
  font-weight: bold; }

.focus .text .post_content > .impact {
  margin-left: 0;
  margin-right: 0; }

/*
 * Featured box around Focus Cards
 */
#card-3420,
#card-3427,
#card-3417,
#card-763,
#card-2730,
#card-2957,
#card-2927,
#card-2930,
#card-374,
#card-53,
#card-48,
#card-55,
#card-450,
#card-41,
#card-1067,
#card-39,
#card-1044,
#card-43,
#card-276,
#card-282,
#card-292,
#card-151,
#card-1520 {
  border: 5px solid #12a7ff;
  position: relative; }

/*
 * Featured box around Focus Cards
 */
#card-3420::before,
#card-3427::before,
#card-3417::before,
#card-763::before,
#card-2730::before,
#card-2957::before,
#card-2927::before,
#card-2930::before,
#card-374::before,
#card-53::before,
#card-48::before,
#card-55::before,
#card-450::before,
#card-41::before,
#card-1067::before,
#card-39::before,
#card-1044::before,
#card-43::before,
#card-276::before,
#card-282::before,
#card-292::before,
#card-151::before,
#card-1520::before {
  content: 'FEATURED';
  background-color: #12a7ff;
  color: #111111;
  padding: 5px;
  font-size: 12px;
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 3px;
  font-weight: bold; }

/*
 * Custom blue bleed color Stoicism page
 */
.custom-blue {
  background-color: #12a7ff;
  color: #111111;
    /*
   * Optional: Adjust text color for better contrast
   */ }

/*
 * Custom yellow border inside blue bleed color Stoicism page
 */
.custom-blue .yellow-content-border {
  border: 5px solid #ffe91f;
    /*
   * Yellow border
   */
  padding: 20px;
    /*
   * Space between the content and the border
   */
  display: inline-block;
    /*
   * Ensure border wraps just the content
   */
  position: relative;
    /*
   * Needed for positioning the emoji
   */ }

/*
 * Target the H1 only on the homepage
 */
.template-front h1.headline {
  margin-top: -15px;
    /*
   * Reduce or remove space above the H1 (add important tag if you want it to overrun the homepopularlinks formatting below
   */
  margin-bottom: 0.35em;
    /*
   * Adjust space below the H1
   */
  line-height: 1.2 !important;
    /*
   * Tighten the line spacing
   */
  padding: 0 !important;
    /*
   * Remove any padding if present
   */
  width: 100%; }

/*
 * Target all H1 elements on Focus pages
 */
body.focus h1.headline {
  margin-top: 5px;
    /*
   * Adjust space above the headline
   */
  margin-bottom: 0.35em;
    /*
   * Adjust space below the headline
   */
  line-height: 1.2;
    /*
   * Tighten the line spacing
   */
  padding: 0 !important;
    /*
   * Remove any padding if present
   */
  width: 100%;
    /*
   * Ensure full width
   */ }

/*
 * Cheat Sheet box UNLOCKED Cards around Focus Cards
 */
#card-4434,
#card-4411,
#card-4370,
#card-4329,
#card-3522,
#card-3515,
#card-3489,
#card-3469,
#card-3474 {
  border: 5px solid #12a7ff;
  position: relative; }

/*
 * Cheat Sheet box around Focus Cards
 */
#card-4434::before,
#card-4411::before,
#card-4370::before,
#card-4329::before,
#card-3522::before,
#card-3515::before,
#card-3489::before,
#card-3469::before,
#card-3474::before {
  content: '🔒';
  background-color: #12a7ff;
  color: #111111;
  padding: 5px;
  font-size: 28px;
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 3px;
  font-weight: bold; }

/*
 * Ensures mobile and desktop spacing of buttons inside feature top hero
 */
.button.action {
  margin-bottom: 10px !important;
    /*
   * Adds space between buttons
   */ }

@media (max-width: 768px) {
  .button.action {
    display: block;
        /*
     * Forces buttons to drop to their own line
     */
    text-align: center;
        /*
     * Centers text inside
     */
    margin-bottom: 10px !important;
        /*
     * Ensures mobile spacing
     */ } }

.routinetime {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffe91f;
    /*
   * Same yellow
   */
  color: #111111;
    /*
   * Dark text
   */
  font-family: "Poppins", sans-serif;
  font-size: 36px;
  font-weight: 700;
  padding: 18px 36px;
    /*
   * Increased padding for more space
   */
  border-radius: 13px;
    /*
   * Matches button rounding
   */
  text-align: center;
  margin: 30px auto;
    /*
   * Added more margin for better spacing
   */
  width: fit-content;
  border: 1px solid #d6c017;
    /*
   * Slightly darker yellow outline
   */
    /*
   * box-shadow: 0 0 13px rgba(0, 0, 0, 0.4); /* "Pop" class shadow effect
   */ }

/*
 * Matching clock icon
 */
.routinetime::before {
  content: "🕒";
  font-size: 32px;
    /*
   * Slightly larger for better balance
   */
  margin-right: 16px;
    /*
   * Increased spacing between icon and text
   */
  color: #999999; }

/*
 * Supplement routines Supplement headers
 */
.pilltitle {
  border: 5px solid #5dce12;
    /*
   * Border color
   */
  position: relative;
  width: 100%;
    /*
   * Full width
   */
  padding: 15px 45px;
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  background: white;
    /*
   * Ensure inside is white
   */
  border-radius: 8px;
    /*
   * Subtle rounding
   */
  background-clip: padding-box;
    /*
   * Ensures inner corners are rounded
   */
  white-space: normal;
    /*
   * Ensures text wraps properly
   */
  word-break: keep-all;
    /*
   * Prevents breaking words mid-way
   */
  overflow-wrap: break-word;
    /*
   * Allows proper wrapping
   */ }

/*
 * Pill tag - Matches FEATURED - Supplement routines
 */
.pilltitle::before {
  content: '💊';
  background-color: #5dce12;
  color: black;
  padding: 6px 10px;
  font-size: 20px;
  font-family: 'Poppins', sans-serif;
    /*
   * Ensuring Poppins font
   */
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 3px;
    /*
   * Subtle rounding
   */
  font-weight: 700;
    /*
   * Matches the bold style
   */
  display: inline-block;
  height: auto;
  line-height: normal; }

/*
 * Triangle at the bottom
 */
.pilltitle::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  background-color: white;
    /*
   * Matches background
   */
  transform: rotate(225deg);
  bottom: -17px;
    /*
   * Keeps triangle aligned
   */
  left: 20px;
    /*
   * Centered under BEST tag
   */
  border-left: 5px solid #5dce12;
  border-top: 5px solid #5dce12;
  border-radius: 3px;
    /*
   * Subtle rounding for triangle
   */
  background-clip: padding-box;
    /*
   * Ensures inner rounding effect
   */
  box-shadow: none; }

/*
 * Homepage links at top to look like breadcrumbs
 */
.homepopularlinks {
  display: flex;
    /*
   * Align links horizontally
   */
  justify-content: center;
    /*
   * Center the links horizontally
   */
  align-items: center;
    /*
   * Align items in the center vertically
   */
  gap: 6px;
    /*
   * Reduced space between links
   */
  margin: -25px auto -13px auto;
    /*
   * Maintain existing spacing
   */
  font-size: 13px;
  font-family: 'Poppins', sans-serif;
  padding: 0;
    /*
   * Removed extra padding
   */ }

.homepopularlinks a {
  text-decoration: none;
    /*
   * No underline
   */
  color: #de0404;
    /*
   * Updated to breadcrumb red color
   */
  position: relative;
    /*
   * Allows positioning of separators
   */ }

.homepopularlinks a:hover,
.homepopularlinks a:focus,
.homepopularlinks a:active {
  text-decoration: none;
    /*
   * No underline on hover, focus, or active
   */
  color: #de0404;
    /*
   * No color change on hover, focus, or active
   */ }

@media (max-width: 768px) {
  .homepopularlinks {
    flex-wrap: wrap;
        /*
     * Allow wrapping on smaller screens
     */
    text-align: center; } }

/*
 * footer
 */
.social-profiles {
  display: flex;
  justify-content: center;
  gap: 16px;
    /*
   * Space between icons
   */
  background-color: #12a7ff;
    /*
   * Light blue background
   */
  padding-top: 10px;
  border-radius: 10px; }

.social-profiles i {
  font-size: 35px;
    /*
   * Icon size
   */
  color: inherit;
    /*
   * Keeps original platform colors
   */
  transition: transform 0.3s ease;
    /*
   * Smooth hover effect
   */ }

.social-profiles i:hover {
  transform: scale(1.1);
    /*
   * Zoom on hover
   */ }

/*
 * Footer
 */
.remarkable-button {
  display: inline-block;
  background-color: #ffe91f !important;
    /*
   * Yellow background
   */
  color: #111111 !important;
    /*
   * Dark text
   */
  padding: 8px 13px !important;
    /*
   * Matching action button padding
   */
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
    /*
   * Light border like action button
   */
  border-bottom-width: 4px !important;
  border-bottom-color: rgba(0, 0, 0, 0.25) !important;
    /*
   * Bottom border for depth
   */
  border-radius: 13px !important;
    /*
   * Rounded corners
   */
  outline: 1px solid rgba(0, 0, 0, 0.1) !important;
  outline-offset: -1px !important;
  text-decoration: none !important;
    /*
   * No underline
   */
  font-weight: normal !important;
  font-size: inherit !important;
    /*
   * Inherit font size
   */
  font-family: inherit !important;
    /*
   * Inherit font family
   */
  line-height: 1em !important;
  vertical-align: top !important;
  cursor: pointer !important;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1) !important;
    /*
   * Button shadow
   */
  transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
    /*
   * Smooth transitions
   */
  margin: 20px 0 15px 0 !important;
    /*
   * 15px top and bottom margin for breathing room
   */ }

.remarkable-button:hover {
  background-color: #fff44f !important;
    /*
   * Slightly lighter yellow
   */
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.1) !important;
    /*
   * Enhanced shadow on hover
   */
  text-decoration: none !important;
    /*
   * No underline on hover
   */ }

.remarkable-button:active {
  border-bottom-width: 2px !important;
    /*
   * Active button press effect
   */
  transform: translateY(2px) !important; }

@media (max-width: 768px) {
  .remarkable-button {
    display: block !important;
        /*
     * Full width on mobile
     */
    text-align: center !important;
    margin: 20px 0 15px 0 !important;
        /*
     * 20px top, 15px bottom margin for mobile
     */ } }

.jameyroutines-buttons {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: normal !important;
  line-height: 1em !important;
  color: white !important;
  text-decoration: none !important;
  background-color: #12a7ff !important;
  padding: 12px 18px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-bottom-width: 4px !important;
  border-bottom-color: rgba(0, 0, 0, 0.25) !important;
  border-radius: 13px !important;
  outline: 1px solid rgba(0, 0, 0, 0.1) !important;
  outline-offset: -1px !important;
  cursor: pointer !important;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.3) !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
  margin: -10px auto !important;
    /*
   * Ensures no extra spacing
   */ }

.jameyroutines-buttons:hover {
  background-color: #38b5ff !important;
  text-decoration: none !important;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15) !important; }

.jameyroutines-buttons:active {
  border-bottom-width: 2px !important;
  transform: translateY(2px) !important; }

/*
 * Remove underlines from links inside the button
 */
.jameyroutines-buttons a {
  text-decoration: none !important;
  color: inherit !important; }

/*
 * Mobile fix for buttons going off the screen
 */
@media (max-width: 768px) {
  .jameyroutines-buttons {
    width: 90% !important;
    max-width: 90% !important;
    margin: -10px auto !important; } }

/*
 * Yellow underline for h1 titles
 */
.yellow-underline {
  text-decoration: underline;
  text-decoration-color: #ffe91f;
  text-decoration-thickness: 7px;
    /*
   * Keeps it bold
   */
  text-underline-offset: 4px;
    /*
   * Moves the underline slightly lower
   */ }

/*
 * Blue underline for h1 titles
 */
.blue-underline {
  text-decoration: underline;
  text-decoration-color: #12a7ff;
  text-decoration-thickness: 7px;
    /*
   * Keeps it bold
   */
  text-underline-offset: 4px;
    /*
   * Moves the underline slightly lower
   */ }

/*
 * Black underline for h1 titles
 */
.black-underline {
  text-decoration: underline;
  text-decoration-color: #111111;
  text-decoration-thickness: 7px;
    /*
   * Keeps it bold
   */
  text-underline-offset: 4px;
    /*
   * Moves the underline slightly lower
   */ }

.jameyroutines-thumbnail {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #ffe91f;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: block;
  margin: -20px auto 5px auto; }

.jameyroutines-thumbnail + h1,
.jameyroutines-thumbnail + p {
  margin-top: -20px !important;
    /*
   * Pulls text closer
   */ }

@media (max-width: 768px) {
  .jameyroutines-thumbnail {
    width: 150px !important;
    height: 150px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 3px solid #ffe91f !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    display: block !important;
    margin: -20px auto 20px auto !important; }

  .jameyroutines-thumbnail + h1,
  .jameyroutines-thumbnail + p {
    margin-top: -20px !important;
        /*
     * Pulls text closer
     */
    text-align: center !important;
        /*
     * Ensures proper alignment
     */ } }

/*
 * Hobbies routines headers
 */
.hobbiestitle {
  border: 5px solid #12a7ff;
    /*
   * Blue border (same as .pilltitle)
   */
  position: relative;
  width: 100%;
    /*
   * Full width
   */
  padding: 15px 50px;
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  background: white;
    /*
   * Ensure inside is white
   */
  border-radius: 8px;
    /*
   * Subtle rounding
   */
  background-clip: padding-box;
    /*
   * Ensures inner corners are rounded
   */
  white-space: normal;
    /*
   * Ensures text wraps properly
   */
  word-break: keep-all;
    /*
   * Prevents breaking words mid-way
   */
  overflow-wrap: break-word;
    /*
   * Allows proper wrapping
   */ }

/*
 * Hobby tag - Matches FEATURED - Hobbies routines
 * .hobbiestitle::before {
 * content: "👍";
 * background-color: #12A7FF;
 * color: white;
 * padding: 6px 10px;
 * font-size: 14px;
 * font-family: 'Poppins', sans-serif;
 * position: absolute;
 * top: 10px;
 * left: 10px;
 * border-radius: 3px;
 * font-weight: 700;
 * display: inline-block;
 * height: auto;
 * line-height: normal;
 * }
 */
/*
 * Triangle at the bottom
 */
.hobbiestitle::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  background-color: white;
    /*
   * Matches background
   */
  transform: rotate(225deg);
  bottom: -17px;
    /*
   * Keeps triangle aligned
   */
  left: 20px;
    /*
   * Centered under BEST tag
   */
  border-left: 5px solid #12a7ff;
  border-top: 5px solid #12a7ff;
  border-radius: 3px;
    /*
   * Subtle rounding for triangle
   */
  background-clip: padding-box;
    /*
   * Ensures inner rounding effect
   */
  box-shadow: none; }

/*
 * Morning routines headers
 */
.morning-headline {
  border: 5px solid #12a7ff;
    /*
   * Blue border (same as .pilltitle)
   */
  position: relative;
  width: 100%;
    /*
   * Full width
   */
  padding: 15px 50px;
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  background: white;
    /*
   * Ensure inside is white
   */
  border-radius: 8px;
    /*
   * Subtle rounding
   */
  background-clip: padding-box;
    /*
   * Ensures inner corners are rounded
   */
  white-space: normal;
    /*
   * Ensures text wraps properly
   */
  word-break: keep-all;
    /*
   * Prevents breaking words mid-way
   */
  overflow-wrap: break-word;
    /*
   * Allows proper wrapping
   */ }

/*
 * Morning Routines Header emoji tag - Matches FEATURED
 */
.morning-headline::before {
  content: "🌞";
  background-color: #12a7ff;
  color: white;
  padding: 1px 6px;
  font-size: 24px;
  font-family: 'Poppins', sans-serif;
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 3px;
  font-weight: 700;
  display: inline-block;
  height: auto;
  line-height: normal; }

/*
 * Triangle at the bottom
 */
.morning-headline::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  background-color: white;
    /*
   * Matches background
   */
  transform: rotate(225deg);
  bottom: -17px;
    /*
   * Keeps triangle aligned
   */
  left: 20px;
    /*
   * Centered under BEST tag
   */
  border-left: 5px solid #12a7ff;
  border-top: 5px solid #12a7ff;
  border-radius: 3px;
    /*
   * Subtle rounding for triangle
   */
  background-clip: padding-box;
    /*
   * Ensures inner rounding effect
   */
  box-shadow: none; }

/*
 * Daytime routines headers
 */
.daytime-headline {
  border: 5px solid #12a7ff;
    /*
   * Blue border (same as .pilltitle)
   */
  position: relative;
  width: 100%;
    /*
   * Full width
   */
  padding: 15px 50px;
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  background: white;
    /*
   * Ensure inside is white
   */
  border-radius: 8px;
    /*
   * Subtle rounding
   */
  background-clip: padding-box;
    /*
   * Ensures inner corners are rounded
   */
  white-space: normal;
    /*
   * Ensures text wraps properly
   */
  word-break: keep-all;
    /*
   * Prevents breaking words mid-way
   */
  overflow-wrap: break-word;
    /*
   * Allows proper wrapping
   */ }

/*
 * Daytime Routines Header emoji tag - Matches FEATURED
 */
.daytime-headline::before {
  content: "🌤";
  background-color: #12a7ff;
  color: white;
  padding: 1px 6px;
  font-size: 24px;
  font-family: 'Poppins', sans-serif;
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 3px;
  font-weight: 700;
  display: inline-block;
  height: auto;
  line-height: normal; }

/*
 * Triangle at the bottom
 */
.daytime-headline::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  background-color: white;
    /*
   * Matches background
   */
  transform: rotate(225deg);
  bottom: -17px;
    /*
   * Keeps triangle aligned
   */
  left: 20px;
    /*
   * Centered under BEST tag
   */
  border-left: 5px solid #12a7ff;
  border-top: 5px solid #12a7ff;
  border-radius: 3px;
    /*
   * Subtle rounding for triangle
   */
  background-clip: padding-box;
    /*
   * Ensures inner rounding effect
   */
  box-shadow: none; }

/*
 * Evening routines header
 */
.evening-headline {
  border: 5px solid #12a7ff;
    /*
   * Blue border (same as .pilltitle)
   */
  position: relative;
  width: 100%;
    /*
   * Full width
   */
  padding: 15px 55px;
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  background: white;
    /*
   * Ensure inside is white
   */
  border-radius: 8px;
    /*
   * Subtle rounding
   */
  background-clip: padding-box;
    /*
   * Ensures inner corners are rounded
   */
  white-space: normal;
    /*
   * Ensures text wraps properly
   */
  word-break: keep-all;
    /*
   * Prevents breaking words mid-way
   */
  overflow-wrap: break-word;
    /*
   * Allows proper wrapping
   */ }

/*
 * Evening Routines Header emoji tag - Matches FEATURED
 */
.evening-headline::before {
  content: "🌙";
  background-color: #12a7ff;
  color: white;
  padding: 1px 6px;
  font-size: 24px;
  font-family: 'Poppins', sans-serif;
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 3px;
  font-weight: 700;
  display: inline-block;
  height: auto;
  line-height: normal; }

/*
 * Triangle at the bottom
 */
.evening-headline::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  background-color: white;
    /*
   * Matches background
   */
  transform: rotate(225deg);
  bottom: -17px;
    /*
   * Keeps triangle aligned
   */
  left: 20px;
    /*
   * Centered under BEST tag
   */
  border-left: 5px solid #12a7ff;
  border-top: 5px solid #12a7ff;
  border-radius: 3px;
    /*
   * Subtle rounding for triangle
   */
  background-clip: padding-box;
    /*
   * Ensures inner rounding effect
   */
  box-shadow: none; }

/*
 * Stoicism Yellow box title looks like a quote box
 */
.yellow-titlebox {
  border: 5px solid #ffe91f;
    /*
   * Blue border (same as .pilltitle)
   */
  position: relative;
  width: 100%;
    /*
   * Full width
   */
  padding: 15px 15px;
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  background: white;
    /*
   * Ensure inside is white
   */
  border-radius: 8px;
    /*
   * Subtle rounding
   */
  background-clip: padding-box;
    /*
   * Ensures inner corners are rounded
   */
  white-space: normal;
    /*
   * Ensures text wraps properly
   */
  word-break: keep-all;
    /*
   * Prevents breaking words mid-way
   */
  overflow-wrap: break-word;
    /*
   * Allows proper wrapping
   */ }

/*
 * tag if wanted get rid of comment
 * .yellow-titlebox::before {
 * content: "👍";
 * background-color: #FFE91F;
 * color: white;
 * padding: 6px 10px;
 * font-size: 14px;
 * font-family: 'Poppins', sans-serif;
 * position: absolute;
 * top: 10px;
 * left: 10px;
 * border-radius: 3px;
 * font-weight: 700;
 * display: inline-block;
 * height: auto;
 * line-height: normal;
 * }
 */
/*
 * Triangle at the bottom
 */
.yellow-titlebox::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  background-color: white;
    /*
   * Matches background
   */
  transform: rotate(225deg);
  bottom: -17px;
    /*
   * Keeps triangle aligned
   */
  left: 20px;
    /*
   * Centered under BEST tag
   */
  border-left: 5px solid #ffe91f;
  border-top: 5px solid #ffe91f;
  border-radius: 3px;
    /*
   * Subtle rounding for triangle
   */
  background-clip: padding-box;
    /*
   * Ensures inner rounding effect
   */
  box-shadow: none; }

/*
 * General blue title box for headers
 */
.blue-titlebox {
  border: 5px solid #12a7ff;
    /*
   * Blue border (same as .pilltitle)
   */
  position: relative;
  width: 100%;
    /*
   * Full width
   */
  padding: 15px 15px;
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  background: white;
    /*
   * Ensure inside is white
   */
  border-radius: 8px;
    /*
   * Subtle rounding
   */
  background-clip: padding-box;
    /*
   * Ensures inner corners are rounded
   */
  white-space: normal;
    /*
   * Ensures text wraps properly
   */
  word-break: keep-all;
    /*
   * Prevents breaking words mid-way
   */
  overflow-wrap: break-word;
    /*
   * Allows proper wrapping
   */ }

/*
 * tag if wanted get rid of comment
 * .blue-titlebox::before {
 * content: "👍";
 * background-color: #12A7FF;
 * color: white;
 * padding: 6px 10px;
 * font-size: 14px;
 * font-family: 'Poppins', sans-serif;
 * position: absolute;
 * top: 10px;
 * left: 10px;
 * border-radius: 3px;
 * font-weight: 700;
 * display: inline-block;
 * height: auto;
 * line-height: normal;
 * }
 */
/*
 * Triangle at the bottom
 */
.blue-titlebox::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  background-color: white;
    /*
   * Matches background
   */
  transform: rotate(225deg);
  bottom: -17px;
    /*
   * Keeps triangle aligned
   */
  left: 20px;
    /*
   * Centered under BEST tag
   */
  border-left: 5px solid #12a7ff;
  border-top: 5px solid #12a7ff;
  border-radius: 3px;
    /*
   * Subtle rounding for triangle
   */
  background-clip: padding-box;
    /*
   * Ensures inner rounding effect
   */
  box-shadow: none; }

/*
 * PICKS buy box around Focus Cards
 */
.picks-card {
  border: 5px solid #ffe91f;
  position: relative;
  display: flex;
  align-items: flex-start;
  text-align: left;
  flex-wrap: wrap;
  overflow: hidden; }

/*
 * PICKS buy box tag
 */
.picks-card::before {
  content: 'PICKS';
  background-color: #ffe91f;
  color: #111111;
  padding: 5px;
  font-size: 12px;
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 3px;
  font-weight: bold;
  z-index: 2; }

/*
 * Responsive adjustments for smaller screens
 */
@media (max-width: 768px) {
  .picks-card {
    flex-direction: column;
    align-items: center;
    text-align: center; }

  .picks-card img {
    margin: 0 auto 15px auto;
    max-width: 100%;
        /*
     * Ensures the image is fully responsive
     */
    height: auto;
        /*
     * Keeps aspect ratio
     */
    display: block;
        /*
     * Prevents layout shifting
     */ }

  .picks-card .text-content {
    text-align: center;
    width: 100%;
        /*
     * Ensures text content spans full width
     */ } }

/*
 * Scoped button fix only within PICKS cards
 */
.picks-card .button.action {
  margin-bottom: 10px !important;
  max-width: 100%;
  width: auto;
  display: inline-block; }

/*
 * Responsive button adjustments
 */
@media (max-width: 768px) {
  .picks-card .button.action {
    width: 100%;
        /*
     * Full width
     */
    max-width: none;
        /*
     * Removes any width restriction
     */
    display: block;
        /*
     * Ensures it behaves as a block element
     */
    text-align: center;
        /*
     * Centers the button text
     */
    margin: 15px 0 0 0;
        /*
     * Prevents interference with the image
     */
    padding: 12px 0;
        /*
     * Ensures proper spacing inside the button
     */ } }

/*
 * IWNDT card styling
 */
.iwndt-card {
  border: 5px solid #5dce12;
    /*
   * Green border
   */
  position: relative; }

/*
 * IWNDT tag with checkmark
 */
.iwndt-card::before {
  content: '✔ IWNDT';
    /*
   * Checkmark and text
   */
  background-color: #5dce12;
    /*
   * Green background
   */
  color: #111111;
  padding: 5px;
  font-size: 12px;
  position: absolute;
  top: 10px;
    /*
   * Position at top-left of the card
   */
  left: 10px;
  border-radius: 3px;
    /*
   * Rounded corners
   */
  font-weight: bold;
    /*
   * Bold text for emphasis
   */
  z-index: 2; }

/*
 * Adjust title padding to prevent overlap
 */
.iwndt-card .card-title {
  padding: 5px 45px;
    /*
   * Prevents overlap with ::before
   */
  white-space: normal;
  word-break: break-word; }

/*
 * Supplement Cards
 */
.supp-card {
  border: 5px solid #5dce12;
    /*
   * green
   */
  position: relative;
  border-radius: 10px;
    /*
   * Optional: Add rounded corners for a modern look
   */
  padding: 5px;
    /*
   * Adds spacing inside the card
   */ }

/*
 * Pill Emoji Label
 */
.supp-card::before {
  content: '💊';
    /*
   * Pill emoji
   */
  background-color: #5dce12;
    /*
   * Same green as border
   */
  color: white;
    /*
   * Text color
   */
  padding: 5px 8px;
    /*
   * Padding for better spacing
   */
  font-size: 14px;
    /*
   * Slightly larger for visibility
   */
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 3px;
  font-weight: bold; }

.ped-card {
  border: 5px solid #af42ae;
    /*
   * Hot Pink
   */
  position: relative; }

.ped-card::before {
  content: 'PHARMA';
  background-color: #af42ae;
  color: #111111;
  padding: 5px;
  font-size: 12px;
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 3px;
  font-weight: bold; }