@charset "UTF-8";
/*
   Font Awesome S3 Bucket URLs
   Current version: 6.6.0
   If you are changing the location of these files,
   see the readme in this directory for more detail on manual steps to take when uploading new files.
 */
/*
   Font Awesome S3 Bucket URLs
   Current version: 6.6.0
   If you are changing the location of these files,
   see the readme in this directory for more detail on manual steps to take when uploading new files.
 */
/*
 * File is used in dashboard/app/assets/stylesheets/application.scss and pegasus/sites.v3/code.org/public/hourofcode/overview.haml
 * In order to add font to the Pegasus pages you should manually add this file to every page. In case you'll need
 * to add this font to many Pegasus page - you should probably think of other solution and not forget to update
  the Pegasus pages that were using font already.
 */
@font-face {
  font-family: 'Barlow Semi Condensed Semibold';
  font-style: normal;
  font-weight: 600;
  src: url("/fonts/barlowSemiCondensed/BarlowSemiCondensed-SemiBold.ttf") format("truetype"), local("?"); }
@font-face {
  font-family: 'Barlow Semi Condensed Medium';
  font-style: normal;
  font-weight: 500;
  src: url("/fonts/barlowSemiCondensed/BarlowSemiCondensed-Medium.ttf") format("truetype"), local("?"); }
/* This file is an adopted copy of apps/src/componentLibrary/typography/typography.module.scss.
   Updating styles in this file will require a manual sync with the that file.
*/
/* — example: all h3s in a ul need to look like h5s
    ul.icon-list {
      h3 { @include heading-sm }
    }
*/
h1,
.heading-xxl {
  color: #292F36;
  margin: 0 0 0.5em 0;
  font-family: "Barlow Semi Condensed Semibold", "Noto Sans", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-size: 3rem;
  line-height: 1.16; }

h2,
.heading-xl {
  color: #292F36;
  margin: 0 0 0.5em 0;
  font-family: "Barlow Semi Condensed Semibold", "Noto Sans", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-size: 2.125rem;
  line-height: 1.24; }

h3,
.heading-lg {
  color: #292F36;
  margin: 0 0 0.5em 0;
  font-family: "Barlow Semi Condensed Semibold", "Noto Sans", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-size: 1.75rem;
  line-height: 1.28; }

h4,
.heading-md {
  color: #292F36;
  margin: 0 0 0.5em 0;
  font-family: "Barlow Semi Condensed Medium", "Noto Sans", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-size: 1.5rem;
  line-height: 1.32; }

h5,
.heading-sm {
  color: #292F36;
  margin: 0 0 0.5em 0;
  font-family: "Metropolis", "Noto Sans", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 1.25rem;
  line-height: 1.40; }

h6,
.heading-xs {
  color: #292F36;
  margin: 0 0 0.5em 0;
  font-family: "Metropolis", "Noto Sans", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.48; }

.body-one {
  color: #292F36;
  font-family: "Metropolis", "Noto Sans", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 1em;
  font-size: 1.25rem;
  line-height: 1.4; }

.body-two {
  color: #292F36;
  font-family: "Metropolis", "Noto Sans", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 1em;
  font-size: 1rem;
  line-height: 1.48; }

.body-three {
  color: #292F36;
  font-family: "Metropolis", "Noto Sans", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 1em;
  font-size: 0.875rem;
  line-height: 1.54; }

.body-four {
  color: #292F36;
  font-family: "Metropolis", "Noto Sans", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 1em;
  font-size: 0.813rem;
  line-height: 1.64; }

.overline-one {
  color: #292F36;
  font-family: "Metropolis", "Noto Sans", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 1em;
  font-family: "Metropolis", "Noto Sans", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.04rem;
  font-size: 0.875rem;
  line-height: 1.6; }

.overline-two {
  color: #292F36;
  font-family: "Metropolis", "Noto Sans", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 1em;
  font-family: "Metropolis", "Noto Sans", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.04rem;
  font-size: 0.813rem;
  line-height: 1.64; }

.overline-three {
  color: #292F36;
  font-family: "Metropolis", "Noto Sans", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-bottom: 1em;
  font-family: "Metropolis", "Noto Sans", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.04rem;
  font-size: 0.688rem;
  line-height: 1.76; }

strong,
.strong {
  font-family: "Metropolis", "Noto Sans", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 600;
  font-style: normal; }

.extra-strong {
  font-family: "Metropolis", "Noto Sans", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 700;
  font-style: normal; }

em,
.em {
  font-family: "Metropolis", "Noto Sans", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-style: italic; }

strong em,
em strong,
em.strong,
.strong em {
  font-family: "Metropolis", "Noto Sans", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-style: italic; }

em.extra-strong,
.extra-strong em {
  font-family: "Metropolis", "Noto Sans", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-style: italic; }

figcaption,
.figcaption {
  font-family: "Metropolis", "Noto Sans", "Noto Sans Arabic", "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans KR", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", "Noto Sans Thaana", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 0.875rem;
  margin: 0.5em 0 1em;
  line-height: 1.64; }

/*
 * File is used in dashboard/app/assets/stylesheets/application.scss and pegasus/sites.v3/code.org/public/hourofcode/overview.haml
 * In order to add font to the Pegasus pages you should manually add this file to every page. In case you'll need
 * to add this font to many Pegasus page - you should probably think of other solution and not forget to update
  the Pegasus pages that were using font already.
 */
@font-face {
  font-family: 'Barlow Semi Condensed Semibold';
  font-style: normal;
  font-weight: 600;
  src: url("/fonts/barlowSemiCondensed/BarlowSemiCondensed-SemiBold.ttf") format("truetype"), local("?"); }
@font-face {
  font-family: 'Barlow Semi Condensed Medium';
  font-style: normal;
  font-weight: 500;
  src: url("/fonts/barlowSemiCondensed/BarlowSemiCondensed-Medium.ttf") format("truetype"), local("?"); }
.hero-banner-basic.overlay {
  position: relative;
  width: 100%;
  height: 100%; }
  .hero-banner-basic.overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(125deg, #3B7043 45%, #89D155 100%);
    z-index: 1; }
  .hero-banner-basic.overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("/images/banners/banner-bg-mesh-dots-light.png");
    background-repeat: repeat;
    background-size: 70%;
    z-index: 2; }
    @media screen and (max-width: 992px) {
      .hero-banner-basic.overlay::after {
        background-size: cover; } }
@media screen and (max-width: 640px) {
  .hero-banner-basic {
    background-size: 50%; } }
.hero-banner-basic .wrapper {
  position: relative;
  z-index: 10; }
.hero-banner-basic .text-wrapper {
  width: 64%; }
  @media screen and (max-width: 640px) {
    .hero-banner-basic .text-wrapper {
      width: 100%; } }
.hero-banner-basic figure {
  width: 30%; }
  @media screen and (max-width: 640px) {
    .hero-banner-basic figure {
      display: none; } }
  .hero-banner-basic figure img {
    width: 100%; }

.csp-page-projects .content-wrapper {
  gap: 2rem; }
.csp-page-projects .image-wrapper img {
  width: 30%; }
  .csp-page-projects .image-wrapper img:first-child {
    width: 27.5%; }

/*# sourceMappingURL=csp-styles.css.map */