/* CommunityScale LLC 

Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Fonts
- Base Styles
- Typography
- Links
- Images
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
- Colophon
*/


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.divider {
  scroll-margin-top: 50px;
  padding-top: 100px;
  padding-bottom: 100px;
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
}

.divider-icon {
  border-radius: 100px;
  background-color: #D5DCE4;
  height: 65px;
  width: 65px;
}

.divider-icon img {
  width: 100%;
  height: 100%;
}

.large-icon {
  border-radius: 100px;
  background-color: #D5DCE4;
  height: 75px;
  width: 75px;
}

.large-icon img {
  width: 100%;
  height: 100%;
}

.divider-header {
  display: flex;
  justify-content: center;
  align-items: center;
}

.section {
  margin: 0 10%;
}

.row{
  margin: 20px 0;
}

.container {
  scroll-margin-top: 80px;
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 20px;
  box-sizing: border-box;
}

.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box;
}

/* Custom layouts
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Special cover at the top of the page */
.cover, .footer {
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
  padding: 50px 0;
  margin-top: 0px;
  color: white;
}

.cover h1, .footer h1 {
  color: white;
  max-width: 100%;
}

.cover p, .footer p {
  text-shadow: 0px 0px 2px rgba(24, 27, 30, 0.9);
}

.footer p {
  margin-bottom: 0;
}

.cover a, .footer a {
  color: #E2C982;
}

.cover a:hover, .footer a:hover {
  color: #8A7946;
}

.overview {
  background-color: white;
  padding: 20px 0;
}

/* Add the insight class to a row to get a nice container for your insight */
.insight {
  background-color: #FFFFFF;
  padding: 25px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  border: 1px solid #EAEAEA;
  box-shadow: 0px 1px 3px #EAEAEA ;
}

.insight h5 {
  text-align: left;
}

.insight-box {
  background-color: #FFFFFF;
  padding: 25px;
  border-radius: 5px;
  border: 1px solid #EAEAEA;
  box-shadow: 0px 1px 3px #EAEAEA ;
}

.insight-box .columns {
  margin-left: 2%;
}

/* Progress tracker section */
.progress-tracker {
  background: #383F45;
  padding: 50px 0;
  margin-top: 1px;
}

.progress-tracker h1,
.progress-tracker h2,
.progress-tracker h3,
.progress-tracker h4,
.progress-tracker h5,
.progress-tracker h6 {
  color: white;
}

.progress-tracker p {
  color: white;
  text-align: center;
}

/* Use center-align class to center content in columns */
.center-align {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.inline-text {
  display: flex;
  align-items: center;
  margin: 0; /* Remove any default margin */
  padding: 0; /* Remove any default padding */
  gap: 5px; /* Add space between all elements */
  /* white-space: nowrap; Prevent line breaks */
}

.small-text {
  font-size: 1.2rem; /* Smaller than the body font size of 1.5em */
  line-height: 1.2;
}

.unresponsive {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding-top: 0px; /* Adds 20px padding to the top */
  padding-right: 0;
  padding-bottom: 00px;
  box-sizing: border-box;
}

.unresponsive p {
  margin-left: 20px;
}

.boxes {
  display: flex;
  justify-content: space-around;
  padding: 0px;
  text-align: center;
  box-sizing: border-box;
  margin: 0 0 0 0;
}

.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 25px 15px 0 15px;
}

.content-size {
  padding-top: 0px; /* Adds 20px padding to the top */
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  box-sizing: border-box;
  flex: 0 0 auto; /* Does not grow or shrink, only as wide as its content */
}


.nav-options {
  display: flex;
}

/* For devices less than 749px */
@media (max-width: 749px) {

  .desktop-pages {
    display: none;
  }
  

  .container {
    width: 90%;
    padding: 0;
  }

  .nav-container {
    width: 90%;
    padding: 0 10px;
  }

  .boxes {
    flex-direction: column;
    align-items: center;
  }

  .box {
    width: 100%;
  }

  /* .title {
    display: none;
  } */

  .divider-header {
    flex-direction: column; 
  }

  .divider-header .divider-icon {
    margin-right: 0;
  }
}

/* For devices smaller than 1024px */
@media (max-width: 1024px) {

  .six .boxes {
    flex-direction: column;
    align-items: center;
  }

  .six .box {
    width: 100%;
  }

}

/* For devices larger than 750px */
@media (min-width: 750px) {
  
  .desktop-pages {
    display: flex;
  }

  .mobile-menu-icon {
    display: none;
  }

  .container {
    width: 90%;
  }

  .title {
    display:block;
  }

  .nav-container {
    width: 90%;
    padding: 0 10px;
  }

  .boxes {
    flex-direction: row;
    align-items: flex-start;
  }

  .divider-header {
    flex-direction: row;
  }

  .divider-header .divider-icon {
    margin-right: 20px;
  }

  .column,
  .columns {
    margin-left: 4%;
  }

  .column:first-child,
  .columns:first-child {
    margin-left: 0;
  }

  .one.column,
  .one.columns {
    width: 4.66666666667%;
  }

  .two.columns {
    width: 13.3333333333%;
  }

  .three.columns {
    width: 22%;
  }

  .four.columns {
    width: 30.6666666667%;
  }

  .five.columns {
    width: 39.3333333333%;
  }

  .six.columns {
    width: 48%;
  }

  .seven.columns {
    width: 56.6666666667%;
  }

  .eight.columns {
    width: 65.3333333333%;
  }

  .nine.columns {
    width: 74.0%;
  }

  .ten.columns {
    width: 82.6666666667%;
  }

  .eleven.columns {
    width: 91.3333333333%;
  }

  .twelve.columns {
    width: 100%;
    margin-left: 0;
  }

  .one-third.column {
    width: 30.6666666667%;
  }

  .two-thirds.column {
    width: 65.3333333333%;
  }

  .one-half.column {
    width: 48%;
  }

  .one-fifth.column {
    width: 16.8%;
  }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns {
    margin-left: 8.66666666667%;
  }

  .offset-by-two.column,
  .offset-by-two.columns {
    margin-left: 17.3333333333%;
  }

  .offset-by-three.column,
  .offset-by-three.columns {
    margin-left: 26%;
  }

  .offset-by-four.column,
  .offset-by-four.columns {
    margin-left: 34.6666666667%;
  }

  .offset-by-five.column,
  .offset-by-five.columns {
    margin-left: 43.3333333333%;
  }

  .offset-by-six.column,
  .offset-by-six.columns {
    margin-left: 52%;
  }

  .offset-by-seven.column,
  .offset-by-seven.columns {
    margin-left: 60.6666666667%;
  }

  .offset-by-eight.column,
  .offset-by-eight.columns {
    margin-left: 69.3333333333%;
  }

  .offset-by-nine.column,
  .offset-by-nine.columns {
    margin-left: 78.0%;
  }

  .offset-by-ten.column,
  .offset-by-ten.columns {
    margin-left: 86.6666666667%;
  }

  .offset-by-eleven.column,
  .offset-by-eleven.columns {
    margin-left: 95.3333333333%;
  }

  .offset-by-one-third.column,
  .offset-by-one-third.columns {
    margin-left: 34.6666666667%;
  }

  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns {
    margin-left: 69.3333333333%;
  }

  .offset-by-one-half.column,
  .offset-by-one-half.columns {
    margin-left: 52%;
  }

}



/* Fonts
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* <uniquifier>: Use a unique and descriptive class name
   <weight>: Use a value from 100 to 900 */

.roboto-condensed-medium {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

/* <uniquifier>: Use a unique and descriptive class name
   <weight>: Use a value from 200 to 900 */

.source-sans-3-medium {
  font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 16rem so that all the REM measurements throughout Skeleton
are based on 16px sizing. So basically 1rem = 16px :) */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.4;

  color: #2D3338;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  background-color: #F8F8F8;
}

img {
  border-radius: 10px;
}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 1rem;
  margin-bottom: 1rem;

  max-width: 850px;

  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;

  color: #252C31;
}

h1 {
  font-size: 4.25rem;
  line-height: 1;
  letter-spacing: -.18rem;
  font-weight: 600;
}

h2 {
  font-size: 3.75rem;
  line-height: 1.25;
  letter-spacing: -.1rem;
  font-weight: 600;
}

h3 {
  font-size: 3.25rem;
  line-height: 1.3;
  letter-spacing: -.1rem;
  font-weight: 400;
}

h4 {
  font-size: 2rem;
  line-height: 1.35;
  letter-spacing: -.02rem;
  font-weight: 800;
}

/* Use as subtitles */

h5 {
  font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;

  font-size: 1.3rem;
  line-height: 1.45;
  letter-spacing: 0;
}

h6 {
  font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;

  font-size: 1.2rem;
  line-height: 1.45;
  letter-spacing: 0;
}

p {
  margin-top: 0;
}

figcaption {
  font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;

  font-size: .8rem;
  line-height: 1.45;
  letter-spacing: 0;
}

p.large {
  font-size: 1.75rem;
  margin-bottom: .25rem;
}

p.large-number {
  font-size: 6rem;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 1000;
  line-height: 1;
  letter-spacing:-.15rem;
}

p.large-emoji {
  font-size: 3.5rem;
  line-height: 1;
}

p.medium {
  font-size: 1.5rem;
  margin-bottom: .25rem;
}

/* Larger than phablet  */
@media (max-width: 750px) {

  /* Simply changing the px font size on html will affect all fonts set in rem to be a certain % smaller */
  html {
    font-size: 13px;
  }

  body {
    font-size: 1.2rem;
  }

  figcaption {
    font-size: 1rem;
  }

}


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #504525;
}

a:hover {
  color: #8A7946;
}

/* Navbar
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.sticky {
  position: -webkit-sticky;
  /* For Safari */
  position: sticky;
  top: 0;
  background-color: #252C31; 
  color: #FFFFFF;
  /* Dark background for visibility */
  padding: 5px 1%;
  margin: 0;
  z-index: 1000;
  /* Ensure it stays on top of other content */
  width: 98%;
  /* Full width */
  display: flex;
  justify-content: space-around;
}

/* Style the navigation menu */
.topnav {
  overflow: hidden;
  width: 100%;
  max-width: 1160px;
}

.logo-and-menu {
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}


/* Hide the links inside the navigation menu (except for logo/home) */

#targetDiv {
  transition-timing-function: ease;
  height: 0px;
  overflow: hidden;
  transition: height 0.2s ease-out;
}

#targetDiv.expanded {
  height: auto;
}

/* Style navigation menu links */
.topnav a {
  color: white;
  padding: 14px 12px;
  text-decoration: none;
  display: block;
  border-radius: 3px;
  text-align: center;
}

/* Style the hamburger menu */
.topnav a.menu-icon {
  /* background: black; */
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #dddddd47;
  cursor: pointer;
}

/* Style the active link (or home/logo) */
.active {
  background-color: #04AA6D;
  color: white;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.nav-container .navbar a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Chips
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.chip-container {
  display: flex;
  flex-wrap: wrap;
}

/* .chip {
  border-radius: 50px;
  border: 2px solid #A4ADB7;
  padding: 10px 15px;
  margin: 10px;
} */

/* Images
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.icon {
  display: block;
  width: 100%;
  max-width: 100px;
  height: auto;
  margin: 0 auto;
}

.inline-logo {
  height: 45px; /* Slightly taller than the text */
  margin-right: 10px;
}

.inline-image {
  height: 4rem; /* Slightly taller than the text */
  text-decoration: none; /* Remove underline */
  vertical-align: middle; /* Align image vertically with text */
}

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  padding: 5px 25px 4px 25px;
  color: #252C31;
  text-align: center;

  font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 1.1rem;
  letter-spacing: .05rem;
  font-weight: 700;
  line-height: 38px;
  text-decoration: none;
  
  white-space: nowrap;
  background-color: #F3D16E;
  border-radius: 4px;
  border: none;
  border-bottom: 2px solid #be951c;
  cursor: pointer;
  box-sizing: border-box;
  
  transition: all 0.2s ease-in-out;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #252C31;
  border-color: #888;
  outline: 0;
  background-color: #C5AE6D;
}

.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #2D3338;
  background-color: #CFD4DB;
  border: 1px solid #2D3338;
  margin: 5px;
  padding: 0px 15px;
  border-radius: 4px;
}

.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #234361;
  border-color: #234361;
}

span.fa {
  margin-right: 4px;
}


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px;
  /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box;
}

/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px;
}

input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #425a70;
  outline: 0;
}

label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600;
}

fieldset {
  padding: 0;
  border-width: 0;
}

input[type="checkbox"],
input[type="radio"] {
  display: inline;
}

label>.label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal;
}


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  /* display: flex;
  flex-direction: column;
  align-content: center;
  flex-wrap: wrap; */
}

li,
ul,
ol {
  font-size: 1rem;
  line-height: 1.4;
  padding-left: 1rem;
  margin-top: 0;
  margin-bottom: 1rem;
}



/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #EAEAEA;
  border-radius: 4px;
}

pre>code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre;
}


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* highlight an entire row, cell, or header by applying the "important" class */
tr.important td, th.important, td.important {
  font-weight: 900;
  background-color: #FFEDB7;
}

th {
  border-bottom: 1px solid #EAEAEA;
  padding: 5px;
  font-weight: 400;
}


th,
td {
  text-align: left;
}

td {
  border-bottom: 1px solid #ffffff;
  padding: 5px;
}

/* Add this class to <table> to get a table that has columns of the same width */
.uniform-columns {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

/* Just specify which column numbers you want center or right aligned, i.e. if you want column 2 & 7 right aligned, and 3 centered, just do:
<table class="tr2 tc3 tr7"> */

.tr1 td:nth-child(1), .tr1 th:nth-child(1),
.tr2 td:nth-child(2), .tr2 th:nth-child(2),
.tr3 td:nth-child(3), .tr3 th:nth-child(3),
.tr4 td:nth-child(4), .tr4 th:nth-child(4),
.tr5 td:nth-child(5), .tr5 th:nth-child(5),
.tr6 td:nth-child(6), .tr6 th:nth-child(6),
.tr7 td:nth-child(7), .tr7 th:nth-child(7),
.tr8 td:nth-child(8), .tr8 th:nth-child(8),
.tr9 td:nth-child(9), .tr9 th:nth-child(9) { text-align:right }

.tc1 td:nth-child(1), .tc1 th:nth-child(1),
.tc2 td:nth-child(2), .tc2 th:nth-child(2),
.tc3 td:nth-child(3), .tc3 th:nth-child(3),
.tc4 td:nth-child(4), .tc4 th:nth-child(4),
.tc5 td:nth-child(5), .tc5 th:nth-child(5),
.tc6 td:nth-child(6), .tc6 th:nth-child(6),
.tc7 td:nth-child(7), .tc7 th:nth-child(7),
.tc8 td:nth-child(8), .tc8 th:nth-child(8),
.tc9 td:nth-child(9), .tc9 th:nth-child(9) { text-align:center }


/* Horizontal scrolling tables */
.scroll-container {
  width: 100%; /* Adjust width as needed */
  overflow-x: auto; /* Enables horizontal scrolling */
  white-space: nowrap; /* Prevents content from wrapping to a new line */
  }

.scroll-content {
  display: inline-block; /* Keeps content in a single line */
  width: auto; /* Example width to show scrolling, adjust as needed */
}

table {
  width: auto; /* Ensures the table takes the width of its content */
  border-collapse: collapse; /* Ensures table borders collapse to remove extra space */
}

/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem;
}

button span {
  margin-right: 10px;
}

input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem;
}

pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 1rem;
}


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box;
}

.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box;
}

.u-pull-right {
  float: right;
}

.u-pull-left {
  float: left;
}


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1;
}


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both;
}


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 750px) {}

@media (max-width: 750px) {
  .icon {
    display: none;
  }

  .insight {
    display:flex;
    flex-direction: column;
  }
}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}



/*
* Colophon
* Content
* CommunityScale LLC
* CSS based on Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/