@charset "UTF-8";
/*
   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.
 */
/*
   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("../ttf/barlowsemicondensed-semibold.ttf") format("truetype"), local("?"); }
@font-face {
  font-family: 'Barlow Semi Condensed Medium';
  font-style: normal;
  font-weight: 500;
  src: url("../ttf/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", 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", 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", 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", sans-serif;
  font-size: 1.5rem;
  line-height: 1.32; }

h5,
.heading-sm {
  color: #292F36;
  margin: 0 0 0.5em 0;
  font-family: "Gotham 5r", sans-serif, sans-serif;
  font-size: 1.25rem;
  line-height: 1.40; }

h6,
.heading-xs {
  color: #292F36;
  margin: 0 0 0.5em 0;
  font-family: "Gotham 5r", sans-serif, sans-serif;
  font-size: 1rem;
  line-height: 1.48; }

.body-one {
  color: #292F36;
  font-family: "Gotham 4r", sans-serif, sans-serif;
  margin-bottom: 1em;
  font-size: 1.25rem;
  line-height: 1.4; }

.body-two {
  color: #292F36;
  font-family: "Gotham 4r", sans-serif, sans-serif;
  margin-bottom: 1em;
  font-size: 1rem;
  line-height: 1.48; }

.body-three {
  color: #292F36;
  font-family: "Gotham 4r", sans-serif, sans-serif;
  margin-bottom: 1em;
  font-size: 0.875rem;
  line-height: 1.54; }

.body-four {
  color: #292F36;
  font-family: "Gotham 4r", sans-serif, sans-serif;
  margin-bottom: 1em;
  font-size: 0.75rem;
  line-height: 1.64; }

.overline-one {
  color: #292F36;
  font-family: "Gotham 4r", sans-serif, sans-serif;
  margin-bottom: 1em;
  font-family: "Gotham 5r", sans-serif, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04rem;
  font-size: 0.875rem;
  line-height: 1.6; }

.overline-two {
  color: #292F36;
  font-family: "Gotham 4r", sans-serif, sans-serif;
  margin-bottom: 1em;
  font-family: "Gotham 5r", sans-serif, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04rem;
  font-size: 0.75rem;
  line-height: 1.64; }

.overline-three {
  color: #292F36;
  font-family: "Gotham 4r", sans-serif, sans-serif;
  margin-bottom: 1em;
  font-family: "Gotham 5r", sans-serif, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04rem;
  font-size: 0.625rem;
  line-height: 1.76; }

strong,
.strong {
  font-family: "Gotham 5r", sans-serif, sans-serif; }

.extra-strong {
  font-family: "Gotham 7r", sans-serif, sans-serif; }

em,
.em {
  font-family: "Gotham 4i", sans-serif, sans-serif; }

strong em,
em strong,
em.strong,
.strong em {
  font-family: "Gotham 5i", sans-serif, sans-serif; }

em.extra-strong,
.extra-strong em {
  font-family: "Gotham 7i", sans-serif; }

figcaption,
.figcaption {
  font-family: "Gotham 5r", sans-serif, sans-serif;
  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("../ttf/barlowsemicondensed-semibold.ttf") format("truetype"), local("?"); }
@font-face {
  font-family: 'Barlow Semi Condensed Medium';
  font-style: normal;
  font-weight: 500;
  src: url("../ttf/barlowsemicondensed-medium.ttf") format("truetype"), local("?"); }
.hero-banner-basic {
  background-image: url("../jpg/hero-bg.jpg");
  background-size: cover;
  background-color: #ccc; }

section.accessibility-efforts {
  padding-bottom: calc(64px - 10px); }
  section.accessibility-efforts .grid-container {
    margin-top: 5rem;
    gap: 4rem; }
    @media screen and (min-width: 640px) {
      section.accessibility-efforts .grid-container {
        grid-template-columns: repeat(2, 1fr); } }
    section.accessibility-efforts .grid-container .flex-container {
      gap: 2rem; }
    section.accessibility-efforts .grid-container img {
      width: 8rem;
      height: 8rem;
      border-radius: 50%; }

@media screen and (max-width: 640px) {
  .hero-banner-basic .flex-container {
    flex-direction: column; } }

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