/** Vendor */
/*! normalize.scss v0.1.0 | MIT License | based on git.io/normalize */
/** 1. Set default font family to sans-serif. 2. Prevent iOS text size adjust after orientation change, without disabling user zoom. */
html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }

/** Remove default margin. */
body { margin: 0; }

/* HTML5 display definitions ========================================================================== */
/** Correct `block` display not defined for any HTML5 element in IE 8/9. Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. Correct `block` display not defined for `main` in IE 11. */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

/** 1. Correct `inline-block` display not defined in IE 8/9. 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */
audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ }

/** Prevent modern browsers from displaying `audio` without controls. Remove excess height in iOS 5 devices. */
audio:not([controls]) { display: none; height: 0; }

/** Address `[hidden]` styling not present in IE 8/9/10. Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */
[hidden], template { display: none; }

/* Links ========================================================================== */
/** Remove the gray background color from active links in IE 10. */
a { background-color: transparent; }

/** Improve readability when focused and also mouse hovered in all browsers. */
a:active, a:hover { outline: 0; }

/* Text-level semantics ========================================================================== */
/** Address styling not present in IE 8/9/10/11, Safari, and Chrome. */
abbr[title] { border-bottom: 1px dotted; }

/** Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */
b, strong { font-weight: bold; }

/** Address styling not present in Safari and Chrome. */
dfn { font-style: italic; }

/** Address variable `h1` font-size and margin within `section` and `article` contexts in Firefox 4+, Safari, and Chrome. */
h1 { font-size: 2em; margin: 0.67em 0; }

/** Address styling not present in IE 8/9. */
mark { background: #ff0; color: #000; }

/** Address inconsistent and variable font size in all browsers. */
small { font-size: 80%; }

/** Prevent `sub` and `sup` affecting `line-height` in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

/* Embedded content ========================================================================== */
/** Remove border when inside `a` element in IE 8/9/10. */
img { border: 0; }

/** Correct overflow not hidden in IE 9/10/11. */
svg:not(:root) { overflow: hidden; }

/* Grouping content ========================================================================== */
/** Address margin not present in IE 8/9 and Safari. */
figure { margin: 1em 40px; }

/** Address differences between Firefox and other browsers. */
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }

/** Contain overflow in all browsers. */
pre { overflow: auto; }

/** Address odd `em`-unit font size rendering in all browsers. */
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }

/* Forms ========================================================================== */
/** Known limitation: by default, Chrome and Safari on OS X allow very limited styling of `select`, unless a `border` property is set. */
/** 1. Correct color not being inherited. Known issue: affects color of disabled elements. 2. Correct font properties not being inherited. 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */
button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ }

/** Address `overflow` set to `hidden` in IE 8/9/10/11. */
button { overflow: visible; }

/** Address inconsistent `text-transform` inheritance for `button` and `select`. All other form control elements do not inherit `text-transform` values. Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. Correct `select` style inheritance in Firefox. */
button, select { text-transform: none; }

/** 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. 2. Correct inability to style clickable `input` types in iOS. 3. Improve usability and consistency of cursor style between image-type `input` and others. */
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ }

/** Re-set default cursor for disabled elements. */
button[disabled], html input[disabled] { cursor: default; }

/** Remove inner padding and border in Firefox 4+. */
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/** Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. */
input { line-height: normal; }

/** It's recommended that you don't attempt to style these elements. Firefox's implementation doesn't respect box-sizing, padding, or width. 1. Address box sizing set to `content-box` in IE 8/9/10. 2. Remove excess padding in IE 8/9/10. */
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

/** Fix the cursor style for Chrome's increment/decrement buttons. For certain `font-size` values of the `input`, it causes the cursor style of the decrement button to change from `default` to `text`. */
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }

/** 1. Address `appearance` set to `searchfield` in Safari and Chrome. 2. Address `box-sizing` set to `border-box` in Safari and Chrome (include `-moz` to future-proof). */
input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; }

/** Remove inner padding and search cancel button in Safari and Chrome on OS X. Safari (but not Chrome) clips the cancel button when the search input has padding (and `textfield` appearance). */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** Define consistent border, margin, and padding. */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

/** 1. Correct `color` not being inherited in IE 8/9/10/11. 2. Remove padding so people aren't caught out if they zero out fieldsets. */
legend { border: 0; /* 1 */ padding: 0; /* 2 */ }

/** Remove default vertical scrollbar in IE 8/9/10/11. */
textarea { overflow: auto; }

/** Don't inherit the `font-weight` (applied by a rule above). NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */
optgroup { font-weight: bold; }

/* Tables ========================================================================== */
/** Remove most spacing between table cells. */
table { border-collapse: collapse; border-spacing: 0; }

td, th { padding: 0; }

/** General Settings and Utilities */
/** Accessibility - same as bootstrap/scss/mixins/_screen_reader.scss */
/** Colors */
/** Breakpoints */
/** Magic Numbers */
/** Typography */
/** General utility variables */
html { box-sizing: border-box; }

*, *::before, *::after { box-sizing: inherit; }

html, body { background: #fff; color: #333; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; height: auto; margin: 0; min-height: 100%; overflow-x: hidden; padding: 0; text-shadow: rgba(51, 51, 51, 0.01) 0 0 1px; }

/* stylelint-disable declaration-no-important */
[hidden] { display: none !important; }

/* stylelint-enable */
/** Fix for IE <= 11 where use elements within svgs would swallow click events and prevent the event from propagating up. See: https://connect.microsoft.com/IE/feedback/details/796745/mouse-events-are-not-delivered-at-all-anymore-when-inside-an-svg-a-use-is-removed-from-the-dom */
use { pointer-events: none; }

img { max-width: 100%; }

a { transition: color 100ms ease-in; }

a:link, a:visited { color: #fa114f; }

a:hover, a:active, a:focus { color: #d4043c; }

a.anchor { display: block; position: relative; top: -49px; visibility: hidden; }

/*================================================================

  Buttons

  The following class names style all buttons on the HfLA site. 
  To create a button: add the base button class, a color
  class, a size class, and (when needed) a page-specific class.


  Index:

  - Base class
  - Color classes
  - Size classes
  - Page-specific classes

=================================================================*/
/*---------------------------

  Button Base class

  * Use on all buttons

---------------------------*/
.btn { border: 0; box-shadow: 0 0 8px 0 rgba(51, 51, 51, 0.2); display: inline-block; font-weight: 700; text-decoration: none; transition: all 100ms ease-in; white-space: nowrap; }

/*---------------------------

  Button Colors

---------------------------*/
/*   Primary Button  ---  Pink   */
.btn-primary { background: #fa114f; color: #fff; }

.btn-primary:link, .btn-primary:visited { color: #fff; }

.btn-primary:hover, .btn-primary:active, .btn-primary:focus { background: #d4043c; color: #fff; text-decoration: none; }

/*   Primary on Dark Button  ---  Pink & white hover state   */
.btn-primary-on-dark { background: #fa114f; color: #fff; }

.btn-primary-on-dark:link, .btn-primary-on-dark:visited { color: #fff; }

.btn-primary-on-dark:hover, .btn-primary-on-dark:active, .btn-primary-on-dark:focus { background-color: #fff; color: #333; }

/*   Dark Button  ---  Black   */
.btn-dark { background-color: #333; color: #fff; }

.btn-dark:link, .btn-dark:visited { color: #fff; }

.btn-dark:hover, .btn-dark:active, .btn-dark:focus { background-color: #fa114f; }

/*---------------------------

  Button Sizes

---------------------------*/
/*   X-Large Button   */
.btn-xl { height: 72px; padding: 0 60px; border-radius: 100px; font-size: 1.5rem; }

@media (max-width: 767px) { .btn-xl { height: 60px; padding: 0 50px; border-radius: 60px; font-size: 1.25rem; } }

/*   Large Button   */
.btn-lg { height: 60px; padding: 0 50px; border-radius: 60px; font-size: 1.25rem; }

/*   Medium Button   */
.btn-md { height: 40px; padding: 0 32px; border-radius: 20px; font-size: 1rem; }

/*   Medium Narrow Button --- less padding   */
.btn-md-narrow { height: 40px; padding: 0 20px; border-radius: 20px; font-size: 1rem; line-height: 40px; /* Centers the text */ }

/*---------------------------------------------------- Page-Specific Button Classes Use when special styling is needed for a button on a specific page (usually placement) -----------------------------------------------------*/
/*   

- Page-specific class name formatting should be:

  btn--page-name
  EXAMPLE: btn--wins

- If there is more than one button in the page, formatting for each button should be:

  btn--page-name-button-function
  EXAMPLE: btn--home-getting-started

- Page-specific class names should live in that specific page's .scss file

*/
[type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea { padding-right: 20px; padding-left: 20px; appearance: none; background: #fff; border: 0 solid rgba(51, 51, 51, 0.06); border-radius: 20px; box-shadow: 0 0 8px 0 rgba(51, 51, 51, 0.2) inset; color: #333; font-size: 1rem; height: 40px; margin-bottom: 10px; width: 100%; }

textarea { appearance: none; border: 0 solid rgba(51, 51, 51, 0.06); border-radius: 16px; box-shadow: 0 0 8px 0 rgba(51, 51, 51, 0.2) inset; height: auto; padding: 20px; resize: vertical; }

::-webkit-resizer { display: none; }

.svg-sprites { display: none; }

.svg-sprites path, .icon path { fill: currentColor; }

.unstyled-list { list-style: none; margin: 0; padding: 0; }

.inline-list { list-style: none; margin: 0; padding: 0; }

.inline-list > li { display: inline-block; margin-right: 15px; }

.inline-list > li:last-child { margin-right: 0; }

.loader-wrapper { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #030d2d; display: flex; justify-content: center; align-items: center; z-index: 11; }

.loader { display: inline-block; width: 30px; height: 30px; position: relative; border: 4px solid #Fff; animation: loader 2s infinite ease; }

.loader-inner { vertical-align: top; display: inline-block; width: 100%; background-color: #fa114f; animation: loader-inner 2s infinite ease-in; }

@keyframes loader { 0% { transform: rotate(0deg); }
  25% { transform: rotate(180deg); }
  50% { transform: rotate(180deg); }
  75% { transform: rotate(360deg); }
  100% { transform: rotate(360deg); } }

@keyframes loader-inner { 0% { height: 0%; }
  25% { height: 0%; }
  50% { height: 100%; }
  75% { height: 100%; }
  100% { height: 0%; } }

html, body { font: 16px / 1.25 "Roboto", sans-serif; }

h1, h2, h3, h4, h5, h6, p, ul, ol { margin-top: 0; }

h1, .type-h1 { font: 700 2rem / 1.25 "Roboto", sans-serif; }

h2, .type-h2 { color: #333; font: 700 1.625rem / 1.154 "Roboto", sans-serif; }

h3, .type-h3 { font: 700 1.375rem / 1.136 "Roboto", sans-serif; }

h4, .type-h4 { color: #fa114f; font: 700 1.125rem / 1.111 "Roboto", sans-serif; }

blockquote p, .type-featured { font: 700 1.25rem / 1.25 "Roboto", sans-serif; }

.quote { border-bottom: 2px solid rgba(50, 221, 177, 0.25); margin: 0 0 32px; padding: 0 0 32px; position: relative; }

.quote cite { color: #333; font-style: normal; font-weight: 400; }

.quote .quote-tmb { position: absolute; right: -24px; bottom: -34px; border-radius: 100px; display: block; }

small, .type-small { font: 0.625rem / 1.25 "Roboto", sans-serif; }

@media (min-width: 768px) { html, body { font-size: 16px; line-height: 1.375; } h1, .type-h1 { font-size: 2.5rem; line-height: 1.125; } h2, .type-h2 { font-size: 2rem; line-height: 1.25; } h3, .type-h3 { font-size: 1.5rem; line-height: 1.25; } h4, .type-h4 { font-size: 1.125rem; line-height: 1.222; } blockquote p, .type-featured { font-size: 1.5rem; line-height: 1.458; } small { font-size: 0.875rem; line-height: 1.375; } }

@media (min-width: 960px) { html, body { font-size: 16px; line-height: 1.375; } h1, .type-h1 { font-size: 3rem; line-height: 1.05; } h2, .type-h2 { font-size: 2.25rem; line-height: 1.25; } h3, .type-h3 { font-size: 1.75rem; line-height: 1.25; } h4, .type-h4 { font-size: 1.125rem; line-height: 1.222; } blockquote p, .type-featured { font-size: 1.5rem; line-height: 1.458; } small { font-size: 0.875rem; line-height: 1.375; } }

.header-container { background: #fff; padding: 40px; height: fit-content; margin: 37px auto 0; font-family: "Roboto"sans-serif; font-style: normal; font-weight: normal; text-align: center; }

@media (max-width: 479px) { .header-container { padding: 87px 15px 0px 15px; margin-top: 10%; } }

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

/*---------------------------

  Cards

  The following classes style reusable cards on the HfLA website

  Index:

  - Page Cards
  - Small Cards

---------------------------*/
/*================================================================

  Page Cards

  The following classes style all page cards (the very large cards 
  that contain much of the content on the HfLA site). To create 
  a page card: add the base page card class, a color class, a size 
  class, and a page-specific class.


  Index:

  - Base class
  - Color classes
  - Size classes
  - Page-specific classes
  - Note about page card spacing

=================================================================*/
/*---------------------------

  Page Card Base class

---------------------------*/
.page-card-base { border-radius: 20px; overflow: hidden; width: 100%; }

/*--------------------------- Page Card Colors ---------------------------*/
.card-primary { background: #fff; }

.card-secondary { background: #f7f5f5; }

/*--------------------------- Page Card Sizes ---------------------------*/
.page-card-xl { box-shadow: 0 0 8px 0 rgba(51, 51, 51, 0.2); margin: 14px auto; max-width: 1080px; }

@media (max-width: 767px) { .page-card-xl { padding: 12.5% 10%; } }

.page-card-lg { max-width: 896px; box-shadow: 0 0 8px 0 rgba(51, 51, 51, 0.2); margin: 14px auto; }

@media (max-width: 479px) { .page-card-lg { margin: 12px auto; } .page-card-lg p.accordion { display: inline-block; width: 100%; } }

.page-card-md { max-width: 800px; margin: 0 auto; padding: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); }

/*---------------------------------------------------- Page Card Page-Specific Classes Use when special styling is needed for a page card  on a specific page (for instance, padding) -----------------------------------------------------*/
/*    - Page-specific class naming convention should be: page-card--page-name EXAMPLE: page-card--join - If there is more than one type of page card styling in the page, class naming convention for each page card should be: page-card--page-name-section EXAMPLE: page-card--join-volunteer - While generic page card classes live in this .scss file, page-specific classes  should live in the specific page's .scss file */
/*--------------------------- Note about Page Card Spacing ---------------------------*/
/*    The margins below one page card and above the page card beneath it are usually supposed to  add up (so if they have 14px margin, there should be combined 24px between the page cards).  However, sometimes the margins collapse into one combined margin (in this case, that would be  just 14px between the page cards).  To fix this, wrap these page cards in a div with flexbox property, which will separate the  collapsed margins again. */
/*================================================================

  Small Cards

=================================================================*/
.small-card { height: 180px; box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.15); border-radius: 20px; margin: 30px 0 45px 0; padding: 10px 0 10px 0; }

.color-dodgerblue { color: #1587FF; }

.color-lightseagreen { color: #0DC583; }

.color-orange { color: #F9B400; }

.color-chocolate { color: #F16618; }

.color-firebrick { color: #D7261B; }

.color-deeppink { color: #FA207C; }

.color-mediumvioletred { color: #D11D69; }

.color-darkorchid { color: #981DD1; }

.color-blueviolet { color: #571DD1; }

.contact-form { border-bottom: 2px solid rgba(50, 221, 177, 0.25); padding-bottom: 32px; }

.contact-form textarea { min-height: 200px; }

@media (min-width: 768px) { .contact-form .form-controls { display: flex; } .contact-form .form-controls .form-input { flex-grow: 1; } .contact-form .form-controls .btn { margin: 0 0 24px 12px; } }

.logo-garden li { margin-bottom: 12px; display: flex; justify-content: center; }

@media (min-width: 480px) { .logo-garden li { margin-right: 24px; } .logo-garden li:last-child { margin-right: 0; } }

@media (min-width: 480px) { .logo-garden .unstyled-list { display: flex; justify-content: space-between; } }

.logo-garden .logo img { display: block; height: 50px; margin: 10px 80px; }

@media (min-width: 480px) { .logo-garden .logo img { height: 70px; margin: 10px; } }

.hero { background: #030d2d url("https://akibrhast.github.io/assets/images/hero/hacknight-women.jpg") center center no-repeat; background-size: cover; display: flex; flex-direction: column; height: 80vh; justify-content: flex-end; max-height: 700px; min-height: 100vh; padding: 20px; position: relative; }

@media (min-width: 768px) { .hero { min-height: 0; } }

.hero::after { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(to bottom, rgba(3, 13, 45, 0.3) 0%, #030d2d 100%); content: ""; display: block; z-index: 1; }

@media (min-width: 768px) { .hero::after { background: linear-gradient(to bottom, rgba(3, 13, 45, 0) 30%, #030d2d 100%); opacity: 1; } }

.hero-inner { color: #fff; margin: 60px auto 0px; max-width: 800px; position: relative; z-index: 2; }

@media (min-width: 768px) { .hero-inner { margin-bottom: 0; margin-top: 150px; } }

.hero-inner h1 { font-size: 2.5rem; font-weight: bold; margin-bottom: .65rem; }

@media (min-width: 768px) { .hero-inner h1 { font-size: 3rem; } }

.hero-inner p { margin-bottom: .65rem; }

.hero-inner span { border-bottom: 3px solid #fa114f; }

.hero-signup .form-input { width: 100%; }

@media (min-width: 768px) { .hero-signup { display: flex; } .hero-signup .form-input { margin-right: 10px; } }

.hero-signup .form-confirmation { margin: 10px 0; }

.cal-title { color: #fa114f; }

.cal-container { background-color: #fff; border-radius: 16px; padding: 5px; }

@media (min-width: 480px) { .cal-container { padding: 10px; } }

.cal { margin: 0 auto; max-height: 500px; overflow-y: auto; padding: 5px; width: 100%; }

@media (min-width: 480px) { .cal { padding: 10px; } }

.cal-item { background: #fff; border-top: 1px solid #ccc; color: #333; margin: 0; padding: 10px; }

.cal-item:first-child { border-top: 0; }

@media (min-width: 480px) { .cal-item { padding: 20px; } }

.cal-item--title { color: #fa114f; font-size: 1.125rem; }

@media (min-width: 768px) { .cal-item--title { font-size: 18pt; } }

.cal-item--description { margin: 5px 0; }

.cal-item--details { font-size: 12pt; font-weight: 300; font-style: normal; }

button { background: #fff; border: 2px solid #fa114f; color: #fa114f; cursor: pointer; font-size: 10pt; margin: 5px 0; }

.projects { background: #f7f5f5; padding: 32px 16px; }

.projects-inner { display: flex; flex-direction: column; }

@media (min-width: 480px) { .projects-inner { flex-direction: row; flex-wrap: wrap; } }

.project-list { margin-bottom: 24px; order: 2; }

@media (min-width: 768px) { .project-list { display: grid; grid-gap: 24px; grid-template-columns: repeat(2, 1fr); order: 3; width: 100%; } }

.project-card { background: #fff; border: 0 solid rgba(51, 51, 51, 0.06); border-radius: 16px; box-shadow: 0 0 8px 0 rgba(51, 51, 51, 0.2); margin-bottom: 24px; overflow: hidden; }

@media (min-width: 768px) { .project-card { margin-bottom: 0; } }

.project-title-no-page { color: #333; }

.project-tmb-img { display: block; width: 100%; }

.project-body { padding: 16px; }

.project-header { color: #333; margin-bottom: 16px; margin-right: auto; order: 1; }

.project-pitch { order: 3; }

@media (min-width: 768px) { .project-pitch { align-self: flex-end; margin-bottom: 16px; margin-left: auto; order: 2; } }

@media (max-width: 479px) { .project-pitch { font-size: 0.9em; } }

.project-pitch .btn { margin: 0 0 0 12px; }

.project-tmb { position: relative; }

.status-indicator { float: right; text-align: center; margin-left: 10px; background-color: #ffff97; width: 92px; padding: 2px 7px; border-radius: 6px; box-shadow: 0 0 8px 0 rgba(51, 51, 51, 0.1); }

.status-text { margin: 0px 0px; }

.status-Active { background-color: #bbffbb; }

.status-Rebooting { background-color: #a4d5ff; }

.status-Completed { background-color: #ffadad; }

.project-card-field-inline { display: inline; }

.press { padding: 32px 16px; }

.news-cards { border-bottom: 2px solid rgba(50, 221, 177, 0.25); margin: 0; padding: 0 0 32px; }

@media (min-width: 480px) { .news-cards { display: grid; grid-gap: 24px; grid-template-columns: repeat(2, 1fr); order: 3; width: 100%; } }

@media (min-width: 768px) { .news-cards { grid-template-columns: repeat(3, 1fr); } }

.news-title { margin-bottom: 0; }

.news-title a:link, .news-title a:visited { color: #333; }

.news-title a:hover, .news-title a:active, .news-title a:focus { color: #d4043c; }

.page-card--home { text-align: center; }

.btn--home-subscribe { margin: 0 !important; }

.btn--home-survey { width: 175px; height: 40px; font-size: 1rem; text-align: center; margin: 0 !important; border-radius: 20px; }

.row { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; width: 70%; margin: 0 auto; align-items: center; text-align: initial; margin-left: 20%; }

@media screen and (max-width: 600px) { .row { text-align: center; flex-direction: column; margin: auto; } }

.column { display: flex; flex-direction: column; flex-basis: 100%; flex: 1; }

.volunteerWithUs { margin: 0 5%; }

.row-1 { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; width: 83%; margin-left: 8%; }

.volunteerWithUs .row { width: 90%; }

@media only screen and (max-device-width: 550px) { .page-card--home-volunteer .btn--home-survey { margin: 0 0 15px 0 !important; } .btn--home-subscribe { margin: 5px 0 10px 0 !important; } }

.home-getting-started-container { text-align: center; }

.btn--home-getting-started { margin: 0 20px 20px 0; }

@media (max-width: 767px) { .btn--home-getting-started { margin: 0 0 20px 0; } }

/* This page is built using a mobile first method.  Plain tags apply to mobile. Breakpoints below for larger sizes. */
.header-container--about-us { display: flex; justify-content: center; flex-flow: column; padding: 25px 15px 20px 15px; }

.header-container--about-us h1 { font-weight: 900; margin-bottom: 30px; }

.donation-gif-box-shadow { box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.12); }

.header-text--about-us { font-size: 18px; max-width: 500px; text-align: left; margin-left: auto; margin-right: auto; }

.header-text--about-us a { text-decoration: none; font-weight: 700; }

.header-text--about-us a:link, .header-text--about-us a:visited { color: #333; }

.header-text--about-us a:hover, .header-text--about-us a:active, .header-text--about-us a:focus { color: #fa114f; }

.page-content-container-grid { display: grid; grid-template-columns: auto; grid-template-rows: auto; grid-template-areas: "content"; align-items: start; margin-top: 20px; scroll-behavior: smooth; }

.grid-2-column { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 1fr); column-gap: 10px; row-gap: 26px; justify-items: stretch; align-content: space-between; }

.stick-it { position: fixed; top: 45px; left: 1070px; }

.sticky-nav li { list-style-type: none; position: relative; margin-bottom: 15px; }

.is-active { font-weight: 700; color: #333 !important; }

.is-active a { font-weight: 700; }

.is-active a:link, .is-active a:visited, .is-active a:hover, .is-active a:active, .is-active a:focus { color: #333; }

.is-active::before { position: absolute; content: "\25C0"; font-size: 10px; margin-left: -35px; margin-top: 5px; }

a.anchor { display: block; position: relative; top: -75x; visibility: hidden; }

.last-card { margin-bottom: 2rem; }

.sticky-nav { grid-area: nav; display: none; background: #fff; border: 0px solid rgba(51, 51, 51, 0.06); border-radius: 16px; box-shadow: 0 0 8px 0 rgba(51, 51, 51, 0.2); overflow: hidden; width: 250px; padding: 35px 30px 15px 18px; margin-top: 30px; }

.sticky-nav-inner-grid { display: grid; grid-template-columns: 15px auto; grid-template-rows: auto; grid-template-areas: "content"; align-items: start; margin-top: 20px; scroll-behavior: smooth; }

.sticky-nav-content-container { grid-area: content; }

.page-card--about { background: #fff; border: 0 solid rgba(51, 51, 51, 0.06); border-radius: 16px; box-shadow: 0 0 8px 0 rgba(51, 51, 51, 0.2); overflow: hidden; max-width: 896px; margin-bottom: 0; padding: 22px; height: fit-content; margin: 12px; }

.page-card--ed { border-radius: 0; }

.about-us-section-header { font-weight: 900; font-size: 1.25rem; cursor: pointer; transition: 0.4s; display: flex; justify-content: space-between; text-align: center; }

.about-us-section-header:after { content: "\221F"; float: right; transform: rotate(-45deg); transition: transform 0.25s ease-in; color: #fa114f; font-weight: bolder; font-size: 24px; }

.about-us-section-header--ED { font-weight: 900; font-size: 1.25rem; transition: 0.4s; display: flex; justify-content: space-between; text-align: center; padding-bottom: inherit; }

.about-us-section-header--ED:after { content: "\2000 \2000 \2000 \2000 \2000 \2000 \2000 \2000"; float: right; transform: rotate(-45deg); transition: transform 0.25s ease-in; color: #fa114f; font-weight: bolder; font-size: 24px; }

#letterBR { padding-left: 30px; }

.more-less { display: none; }

.sec-head-img-ed { padding: 0 25 0 0; }

.led-closed { margin-top: 25px; }

.read-more { color: #fa114f; text-align: right; margin-right: 30px; cursor: pointer; }

.read-more::after { content: "\221F"; position: absolute; margin-left: 10px; transform: rotate(-45deg); color: #fa114f; font-weight: bolder; font-size: 16px; }

.read-less { color: #fa114f; text-align: right; margin-right: 30px; cursor: pointer; }

.read-less::after { content: "\221F"; position: absolute; margin-left: 10px; transform: rotate(135deg); color: #fa114f; font-weight: bolder; font-size: 16px; }

.au_active::after { content: "\221F"; transform: rotate(135deg); transition: transform 0.25s ease-in; }

.sub-card-head { font-size: 1.2rem; font-weight: 600; padding: 15px 0 10px 0; display: flex; align-items: center; }

.sub-head-image { padding-right: 10px; }

.sub-head-text { padding-bottom: 5px; }

.sub-card-content { padding-left: 5px; padding-left: 23px; margin-left: 8px; }

.flex-container--wins { margin-top: 40px; }

.flex-container-row { display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }

@media only screen and (max-width: 350px) { .flex-container-row { margin-top: 18px; margin-bottom: 10px; } }

.flex-container-row--partners { justify-content: space-between; margin-top: 25px; }

.flex-container-row--partners .partner-logo { width: 100px; margin: 12px 15px; }

.border-dodgerblue { border-left-style: solid; border-left-width: 5px; border-left-color: #1587FF; }

.border-lightseagreen { border-left-style: solid; border-left-width: 5px; border-left-color: #0DC583; }

.border-orange { border-left-style: solid; border-left-width: 5px; border-left-color: #F9B400; }

.border-chocolate { border-left-style: solid; border-left-width: 5px; border-left-color: #F16618; }

.border-firebrick { border-left-style: solid; border-left-width: 5px; border-left-color: #D7261B; }

.border-deeppink { border-left-style: solid; border-left-width: 5px; border-left-color: #FA207C; }

.border-mediumvioletred { border-left-style: solid; border-left-width: 5px; border-left-color: #D11D69; }

.border-darkorchid { border-left-style: solid; border-left-width: 5px; border-left-color: #981DD1; }

.border-blueviolet { border-left-style: solid; border-left-width: 5px; border-left-color: #571DD1; }

.color-goldenrod-2 { color: #d49f28; font-weight: 700; }

.color-orangered { color: #ee412a; font-weight: 700; }

.color-brown { color: #8e1737; font-weight: 700; }

.color-goldenrod-11 { color: #fa9c25; font-weight: 700; }

.color-darkolivegreen { color: #48763e; font-weight: 700; }

.color-teal { color: #01548a; font-weight: 700; }

.color-midnightblue { color: #173567; font-weight: 700; }

.bold-quote { font-weight: 700; font-style: italic; text-align: center; }

.sdg-images { display: flex; flex-flow: row wrap; justify-content: space-around; align-content: space-between; }

.small-text { font-size: 8pt; }

.grid-center { place-self: center; }

.sdg-groups { margin-bottom: 20px; }

/* Clear floats after the columns */
.sdg-groups:after { content: ""; display: table; clear: both; }

.sdg-column { float: left; }

.sdg-left { width: 15%; }

.sdg-right { width: 85%; }

.sdg-left-flex-container { display: flex; flex-direction: column; align-items: center; }

.text-bold { font-weight: 700; }

.text-bold--sdg { margin: 10px 0 20px 0; }

.top-paragraph { padding-top: 25px; }

.sdg-title-mobile { display: inline; }

.sdg-title-full { display: none; }

.accomplishment-title { color: #fa114f; text-decoration: underline; margin: 25px 0 10px 0; font-weight: 500; }

.accomplishment-wins { color: #fa114f; text-decoration: none; margin: 25px 0 10px 0; align-items: flex-start; display: flex; justify-content: center; font-size: 24px; }

.accomplishment-wins img { padding-right: 20px; }

.accomplishment-highlights { margin: 30px 0 0 0; }

.eliptical { color: #959393; text-align: right; }

.align-left { text-align: left; }

.align-center { text-align: center; }

.wins-cup { padding-right: 25px; }

.wins-card-mobile { display: block; }

.wins-card-desktop { display: none; }

.coming-soon { margin-top: 18px; }

.garcetti-mobile { display: block; }

.garcetti-large { display: none; }

.small-card p { text-align: center; }

.metrics-image-size { height: 110px; width: 120px; }

@media only screen and (max-width: 445px) { .metrics-image-size { height: 35%; width: 35%; } }

.metrics-title { font-size: 2rem; text-decoration: none; font-weight: 700; color: #fa114f; }

.metrics-vrms-title { font-size: 2.2rem; text-decoration: none; font-weight: 900; color: #333; text-align: center; padding: 40px 0 36px 0; }

.metrics-vrms-links { display: flex; flex-flow: row nowrap; justify-content: space-evenly; align-content: space-between; }

.list-container-no-indent ol { margin: 10px; padding: 10px; }

.donation-spacing { margin: 0 0 40px 20px; font-size: 18px; }

.text-small-italic { font-size: 15px; font-style: italic; }

.news-cells { display: flex; flex-flow: column nowrap; justify-content: center; padding: 25px 0 15px 0; align-items: center; }

.news-cells p { padding-top: 40px; margin: 0 20px 0 20px; }

.more-padding { padding-top: 10px; }

/* Below are the breakpoints and adjustments for different size monitors */
@media (min-width: 960px) { .header-container--about-us { flex-flow: row; padding: 3rem 1rem 0 1rem; } .about-header-text-margin { margin-right: 100px; } .page-content-container-grid { grid-template-columns: 996px auto; grid-template-rows: auto; grid-gap: 75px; grid-template-areas: "content nav"; margin-top: 30px; } .sticky-nav { display: block; margin-right: 20px; } .sticky-nav-spacer-div { grid-area: nav; width: 250px; } .sticky-nav-content-container { margin-left: 100px; grid-area: content; justify-self: start; margin-top: 20px; } .page-card--about { margin: 12px 12px 40px; max-width: 896px; padding: 60px; } .page-card--platform { padding: 60px; } .read-more { display: none; } .read-less { display: none; } .last-card { margin-bottom: 150px; } .about-us-section-header { font-size: 1.5rem; margin: 0 0 40px; cursor: default; justify-content: center; } .about-us-section-header--ED { justify-content: center; cursor: default; font-size: 1.5rem; margin: 0 0 40px; } .about-us-section-content { display: block; transition: display 0s, opacity 2.5s linear; } .about-us-section-header:after { display: none; } .sec-head-img { display: none; } .sec-head-img-ed { display: none; } .line-break { display: none; } .sticky-nav a { text-decoration: none; } .platform-mid-section { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto auto auto auto auto auto auto auto; grid-template-areas: "top-left top-right" "top-left top-right" "top-left mid-right" "mid-left mid-right" "mid-left low-right" "mid-left low-right" "bottom-left bottom-right" "bottom-left bottom-right" "bottom-left bottom-right"; column-gap: 80px; } .platform-sec-impact { grid-area: top-left; } .platform-sec-learning { grid-area: top right; } .platform-sec-diversity { grid-area: mid-left; } }

@media only screen and (min-width: 960px) and (min-width: 1306px) { .platform-sec-diversity { grid-row-start: 2; margin-top: 3rem; } }

@media (min-width: 960px) { .platform-sec-giving { grid-area: mid-right; } .platform-sec-agility { grid-area: low-right; } .platform-sec-scalability { grid-area: bottom-left; } }

@media only screen and (min-width: 960px) and (min-width: 1316px) { .platform-sec-scalability { grid-row-start: 6; margin-top: 8rem; } }

@media (min-width: 960px) { .platform-sec-sustainability { grid-area: bottom-right; } .flex-container-reverse { display: flex; flex-direction: row-reverse; } .flex-container { display: flex; flex-direction: row; } .sdg-left-column { width: 40%; margin: 30px 25px 0 0; } .sdg-right-column { width: 60%; padding-left: 10px; } .bottom-right-column { width: 50%; padding-left: 10px; } .top-left-column { width: 50%; padding-right: 10px; } .top-left-column--acc { padding-right: 25px; } .bottom-right-column--acc { padding-left: 25px; } .top-left-column--donations { width: 45%; } .bottom-right-column--donations { width: 55%; } .sdg-title-mobile { display: none; } .sdg-title-full { display: inline; } .wins-card-mobile { display: none; } .wins-card-desktop { display: block; } .wins-column-width-left { width: 30%; padding-left: 30px; } .wins-column-width-right { width: 70%; padding-left: 25px; } .news-cells p { padding-top: 48.33px; margin: 0 20px 0 20px; } .news-cells--govtech { margin-bottom: 75px; } .garcetti-mobile { display: none; } .garcetti-large { display: block; } }

@media only screen and (max-width: 1321px) { .page-content-container-grid { grid-template-columns: auto auto; grid-gap: 75px; } .stick-it { right: 0px; left: auto; } }

@media only screen and (max-width: 1171px) { .sticky-nav-content-container { margin-left: 10px; } }

@media only screen and (max-width: 1000px) { .page-content-container-grid { grid-gap: 23px; } }

.entire-quote { margin-top: 30px; width: 90%; }

.quote-marks { position: relative; width: 20px; display: inline-block; vertical-align: top; bottom: 10px; left: -10px; }

#quote-tmc { border-radius: 100px; position: relative; right: -50px; bottom: 10px; height: 75px; width: 75px; }

.mayor-cite { position: relative; bottom: 50px; left: 20px; color: #767676; font-style: normal; }

.quote-text { position: relative; display: inline-block; width: 88%; }

@media only screen and (min-width: 700px) { .quote-text { font-weight: bold; } .entire-quote { position: relative; width: 93%; left: 100px; } #quote-tmc { bottom: 110px; right: 180px; height: 100px; width: 100px; } .mayor-cite { position: relative; left: 125px; bottom: 90px; color: #767676; font-style: normal; } .garcetti-quote { position: relative; margin-bottom: -100px; margin-left: 3vw; } }

.header--communities { display: flex; flex-flow: row; justify-content: center; background: #fff; padding: 64px; height: fit-content; margin: 37px auto 0; font-family: "Roboto", sans-serif; font-style: normal; font-weight: normal; align-items: center; /*This page has a lot more text than the others, so it starts looking weird earlier*/ }

@media (max-width: 959px) { .header--communities { flex-direction: column; } }

.header--communities .header-text--communities { display: flex; flex-direction: column; align-items: center; }

.header--communities .header-text--communities p { font-size: 18px; max-width: 508px; margin-top: 8px; text-align: left; }

@media (max-width: 767px) { .header--communities .header-text--communities p { max-width: 300px; margin: auto; font-size: 16px; } }

.header--communities .header-text--communities h1 { font-size: 48px; }

@media (max-width: 767px) { .header--communities .header-text--communities h1 { font-size: 24px; margin-bottom: 28px; } }

.header--communities .header-img--communities { max-height: 240px; margin-left: 80px; }

@media (max-width: 959px) { .header--communities .header-img--communities { margin: auto; } }

@media (max-width: 767px) { .header--communities .header-img--communities { width: 100%; } }

.header--communities .header-self-invite--communities { display: flex; align-items: flex-start; max-width: 508px; margin-top: 31px; }

@media (max-width: 767px) { .header--communities .header-self-invite--communities { max-width: 300px; margin-bottom: 30px; } }

.header--communities .header-self-invite--communities .alert--communities { font-size: 16px; font-weight: bold; max-width: 450px; }

.header--communities .self-invite-img { /*Note "margin-top: 15px" is needed to keep this img aligned with neighboring text*/ margin-top: 15px; margin-right: 27px; width: 24px; height: 24px; }

.content--communities { background: #f7f5f5; display: flex; flex-direction: column; }

.content--communities .page-card-container { display: flex; min-height: 454px; height: fit-content; }

@media (max-width: 959px) { .content--communities .page-card-container { flex-direction: column; } }

.content--communities .page-card-image-container { flex: 0 0 auto; width: 327px; overflow: hidden; }

@media (max-width: 959px) { .content--communities .page-card-image-container { width: 100%; max-height: 40vh; } }

.content--communities .page-card-image { /*moved this to the container so I could use object-fit to accomodate random heights margin: -5px; max-width: 372px;*/ width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 767px) { .content--communities .page-card-image { height: auto; /*  width: 100%; max-height: 40vh; overflow: hidden;*/ } }

.content--communities .page-card-content { flex: 0 1 auto; margin: 34px; height: -moz-fit-content; height: fit-content; }

@media (max-width: 767px) { .content--communities .page-card-content { margin: 40px 0; padding: 0 16px; } }

@media (max-width: 479px) { .content--communities .page-card-content h3 { font-size: 1.25rem; } }

@media (min-width: 480px) { .content--communities .page-card-content h3 { font-size: 1.25rem; } }

@media (min-width: 960px) { .content--communities .page-card-content h3 { font-size: 1.5rem; } }

/*leader card styling - adapted from project page, mostly wrt sizing */
.leader-list--communities { display: grid; justify-content: start; grid-template-columns: auto auto; grid-gap: 20px; margin: 20px 0px; }

@media (max-width: 959px) { .leader-list--communities { display: flex; flex-direction: column; grid-gap: 0px; align-items: center; } }

.leader-img--communities { margin: 10px; width: 50px; min-width: 40px; border-radius: 10px; }

.leader-card--communities { display: grid; grid-template-rows: auto; grid-template-columns: 24% auto; border-radius: 16px; box-shadow: 0 0 8px 0 rgba(51, 51, 51, 0.2); width: 240px; height: 70px; margin-bottom: 10px; font-size: 14px; }

.main-footer { background: #030d2d; color: #fff; padding: 32px 16px 100px; }

@media (min-width: 768px) { .main-footer { padding-bottom: 32px; } }

.main-footer a { color: #fff; text-decoration: none; }

.main-footer .header-list { align-items: center; display: flex; justify-content: center; }

.main-footer .btn--donate-footer { position: absolute; right: 0; margin-right: 0; margin-top: -5px; }

.main-footer .footer-header { position: relative; color: #fa114f; margin-bottom: 54px; }

.content-hack-night { margin: 83px 0px; padding: 25px; }

@media (max-width: 767px) { .content-hack-night { margin-top: 52px; padding: 0; margin: 0px; } }

.header-container--events { padding: .2rem 4rem 5.5rem 4rem; }

.events--head-content { margin: 2% 0 0% 4%; text-align: initial; }

.header-text-margin--events { max-width: 520px; margin: 0; }

.header-desc { text-align: initial; font-weight: 530; font-size: 1.125rem; margin: 2% 0 20px 5%; }

@media (max-width: 767px) { .header-desc { font-size: 16px; line-height: 19px; margin-bottom: 20px; } }

.show-desc { margin-left: 43%; }

@media (max-width: 767px) { .show-desc { margin: 74px 0px; font-size: 13px; line-height: 15px; } }

.show-video { display: flex; flex-direction: row-reverse; margin-left: 40px; margin-bottom: -7%; justify-content: center; }

@media (max-width: 767px) { .show-video { flex-direction: row-reverse; flex-grow: 6; margin: 0; } }

.flex-page-card { display: flex; justify-content: center; margin-left: 45px; margin-right: 45px; }

@media (max-width: 767px) { .flex-page-card { flex-direction: column; width: 90%; } }

@media (max-width: 479px) { .flex-page-card { width: 95%; } }

.flex-page-card > .column-card-lg--events { background: #fff; border: 0 solid rgba(51, 51, 51, 0.06); border-radius: 20px; box-shadow: 0 0 8px 0 rgba(51, 51, 51, 0.2); overflow: hidden; max-width: 489px; width: 100%; padding: 32px; margin-top: 8px; margin-bottom: 8px; font-family: "Roboto" sans-serif; }

.flex-page-card > .column-card-lg--events:first-child { margin-right: 8px; }

.flex-page-card > .column-card-lg--events:last-child { margin-left: 8px; }

@media (max-width: 767px) { .flex-page-card > .column-card-lg--events { padding: 5px 15px; max-width: 100%; } .flex-page-card > .column-card-lg--events:first-child, .flex-page-card > .column-card-lg--events:last-child { margin-left: auto; margin-right: auto; } }

#head-content::before { content: "\226A"; float: left; transition: transform 0.25s ease-in; color: #333; font-weight: normal; font-size: 18px; margin: 0 6px; }

@media (max-width: 959px) { #head-content::before { content: "\226A"; transform: rotate(90deg); transition: transform 0.25s ease-in; font-size: 22px; font-weight: normal; } }

.step-img-1 { height: 134px; text-align: center; max-width: 150px; }

.step-img-2 { height: 134px; text-align: center; max-width: 150px; }

.fullwidth-background-container { background-color: #F2C94D; margin: 0 -2em; }

.add-padding-container { padding: 0 2.5em; }

@media (max-width: 479px) { .getting-started-mobile-page { pading: 0 2em; display: inline; margin: 20px; border: 0 solid rgba(51, 51, 51, 0.06); border-radius: 16px; } }

.video-size { left: 0; top: 0; width: 387px; height: 250px; }

@media (max-width: 479px) { .video-size { left: 0; top: 0; width: 325px; height: 215px; } }

.meetup-steps { display: flex; align-items: center; margin: 24px 0; }

@media (max-width: 479px) { .meetup-steps { flex-direction: column; text-align: center; } }

.meetup-steps-2 { display: flex; align-items: center; margin: 24px 0; }

@media (max-width: 479px) { .meetup-steps-2 { flex-direction: column; text-align: center; } }

#text-content { padding: 28px; font-size: 16px; line-height: 19px; }

@media (max-width: 479px) { #text-content { padding: 0; text-align: initial; margin: 37px; } }

#text-content-1 { padding: 28px; font-size: 16px; line-height: 19px; }

@media (max-width: 479px) { #text-content-1 { padding: 8px; text-align: initial; margin-bottom: 25px; } }

.notification-banner { background-color: #F2C94D; width: 100%; display: flex; justify-content: center; align-content: center; }

@media (max-width: 767px) { .notification-banner { flex-direction: column; } }

.notification-banner p { text-align: center; margin: auto 29%; padding: 20px; font-size: 1rem; font-weight: 700; }

@media (max-width: 479px) { .notification-banner p { margin: 0; padding: 1em 2em; font-size: 16px; line-height: 19px; } }

.meetings-message { text-align: center; }

.location-image { margin: -5px; border-radius: 5px; max-width: 372px; }

@media (max-width: 479px) { .location-image { height: auto; } }

.getting-started-page-card-locations { background: #fff; border: 0 solid rgba(51, 51, 51, 0.06); border-radius: 16px; box-shadow: 0 0 8px 0 rgba(51, 51, 51, 0.2); overflow: hidden; max-width: 996px; margin-bottom: 0; padding: 20px; margin: 45px; font-family: "Roboto" sans-serif; height: fit-content; }

@media (max-width: 767px) { .getting-started-page-card-locations { padding: 16px 16px; } }

.locations-1 { display: flex; height: 388px; margin: -17px; }

@media (max-width: 767px) { .locations-1 { flex-direction: column; text-align: center; height: fit-content; } }

.location-content { margin: 34px; }

@media (max-width: 479px) { .location-content { margin: 40px 0; padding: 0; } }

.mini-projects { display: flex; flex-wrap: wrap; }

@media (max-width: 479px) { .mini-projects { margin: 11px; font-size: 12px; line-height: 14px; } }

#mini-img { width: 90px; height: 66px; }

.img-dis { width: 92px; border: 1px solid gray; margin: 10px; height: 120px; }

.proj-desc { text-align: center; font-size: 15px; }

.days-display { font-size: 0.9rem; margin: 22px 32px; }

@media (max-width: 479px) { .days-display { font-size: 0.7rem; margin: 0; } }

.title-meetup { font-size: 1.25rem; text-align: center; font-weight: 700; text-align: left; margin-bottom: 16px; }

.class-btn { text-align: center; margin-top: 8px; }

@media (max-width: 479px) { .class-btn { margin: 0; } }

.btn--events { margin-bottom: 32px; }

.event-title-1 { display: none; text-align: center; font-size: 30px; margin-top: 20px; line-height: 35px; font-weight: normal; }

@media (max-width: 767px) { .event-title-1 { font-size: 17px; display: flex; justify-content: space-around; margin-bottom: 16px; } }

.event-title-1::after { content: "\221F"; }

@media (max-width: 767px) { .event-title-1::after { content: "\221F"; float: right; transform: rotate(-45deg); transition: transform 0.25s ease-in; color: #fa114f; font-weight: bolder; font-size: 24px; } }

@media (max-width: 767px) { .active::after { content: "\221F"; transform: rotate(135deg); transition: transform 0.25s ease-in; } }

.event-title { text-align: center; font-size: 1.5rem; margin-top: 20px; font-weight: 700; margin-bottom: 15px; }

@media (max-width: 767px) { .event-title { font-size: 17px; display: flex; justify-content: space-between; align-items: center; } .event-title::after { content: "\221F"; float: right; transform: rotate(-45deg); transition: transform 0.25s ease-in; color: #fa114f; font-weight: bolder; font-size: 24px; } .active::after { content: "\221F"; transform: rotate(135deg); transition: transform 0.25s ease-in; } }

.vector-img { display: none; }

@media (max-width: 767px) { .vector-img { display: initial; } }

@media (max-width: 767px) { .mobile-dropdown { display: none; } }

@media (max-width: 767px) { .mobile-locations-dropdown { display: none; background: #F2C94D; } }

.days-display-1 { margin: 22px 32px; }

@media (max-width: 767px) { .days-display-1 { margin: 0; } }

.schedule-list-1 { list-style: none; font-size: 16px; line-height: 19px; grid-template-columns: .95fr 1.15fr; display: grid; padding-left: 0; }

@media (max-width: 767px) { .schedule-list-1 { font-size: 13px; line-height: 15px; } }

.day-header-1 { text-transform: uppercase; margin-block-end: 0.25em; font-size: 1rem; font-weight: 700; margin: 30px 0 10px 0; padding: 0; }

@media (max-width: 767px) { .day-header-1 { font-size: 15px; line-height: 18px; } }

.description { margin: 0; }

@media (max-width: 479px) { .description { text-align: initial; margin: 57px; } }

/* These styles are for the mobile view of the events page */
@media (max-width: 959px) { .header-container--events { padding: 2rem 2rem 2rem 2rem; } .mobile--hide-video { display: none; } .hacknights--head-content { margin: 20px 0 0 0; } }

@media (min-width: 960px) { .fullscreen--hide-video { display: none; } }

.fullscreen-video { margin-right: 5rem; }

.events-video-fullscreen-container { position: relative; height: 0; padding-bottom: 56.25%; }

/* The below styles were moved from _hack-nights.scss, which has been deleted along with it's page namesake.  They have been saved because they are still being used in other places on the site. */
.section-hack-nights { background: #030d2d; color: #fff; }

.events-page, .content-section--events { background: #030d2d; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: "Roboto"sans-serif; font-style: normal; font-weight: normal; }

.userTimeZone { font-weight: 700; }

.events-page-header { color: #fff; margin-top: 48px; font-size: 36px; }

.main-header { position: absolute; top: 0; left: 0; right: 0; background: #fff; box-shadow: 0 1px 4px 0 rgba(51, 51, 51, 0.12); font-weight: 700; padding: 20px; padding-bottom: 10px; z-index: 10; }

@media (min-width: 768px) { .main-header { padding: 20px 10px 10px 10px; padding-top: 20px; position: fixed; } .main-header::after { display: block; clear: both; content: ""; } .main-header .header-links { flex-grow: 0; } }

.main-header .header-links { flex-grow: 1; text-align: right; }

.main-header .header-links li { margin-right: 20px; }

.main-header .header-links li:last-child { margin-right: 0; }

.main-header .header-links a:link, .main-header .header-links a:visited { color: #333; margin: -4px; }

.main-header .header-links a:hover, .main-header .header-links a:active, .main-header .header-links a:focus { color: #fa114f; }

.main-header .branding { position: absolute; top: -24px; left: -20px; }

@media (min-width: 768px) { .main-header .branding { height: 150px; width: 150px; } }

.main-header .main-header-content { display: flex; }

.main-header-content { display: flex; }

.btn--donate-header { margin: -10px 20px 0 0; }

@media only screen and (max-width: 1028px) { .main-header .branding { position: absolute; top: -13px; left: -18px; height: 50px; width: 95px; } }

@media (max-width: 767px) { .main-header { position: fixed; padding: 7px; } .btn--donate-header { padding: 5px 25px; font-size: .75rem; font-weight: 500; height: 30px; margin-top: 6px; line-height: 0; } }

.header-nav { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; box-shadow: 0 -1px 0 0 rgba(51, 51, 51, 0.12); padding: 10px 0; }

.header-nav ul { display: flex; }

.header-nav li { margin: 0; text-align: center; width: 25%; }

.header-nav a { text-decoration: none; }

.header-nav a:link, .header-nav a:visited { color: #333; }

.header-nav a:hover, .header-nav a:active, .header-nav a:focus { color: #fa114f; }

@media (max-width: 767px) { .header-nav { font-size: 0.625rem; line-height: 1.25; text-transform: uppercase; } }

@media (min-width: 768px) { .header-nav { background: none; box-shadow: none; flex-grow: 1; padding: 0 0 0 80px; position: static; } .header-nav ul { margin-right: 20px; } .header-nav li { margin-left: 2em; width: auto; } }

body { transition: transform 300ms ease-in-out; }

body.nav-active { transform: translateX(-240px); }

@media (min-width: 768px) { body.nav-active { transform: none; } }

.nav-icon { width: 20px; height: 20px; display: block; margin: 0 auto 8px; }

@media (min-width: 768px) { .nav-icon { display: none; } }

/* Hamburger nav CSS */
@media (min-width: 768px) { #swapButton { display: none; } }

@media (max-width: 767px) { #burgerImage { display: block; height: 25px; width: 25px; border: none; padding-right: 41px; padding-top: 5px; } #burgerImageX { display: none; height: 25px; width: 25px; border: none; padding-right: 41px; padding-top: 5px; } #headerNav { display: none; } .nav-icon { display: none; } .header-nav { position: absolute; top: 53px; bottom: auto; height: auto; width: auto; z-index: -1; padding: 18px 71px; } .header-nav ul { flex-direction: column; } .header-nav li { padding: 6px; text-align: left; width: 100%; font-weight: 500; text-transform: none; font-size: 16px; } .header-nav li a { text-decoration: none; } .header-nav li a:link, .header-nav li a:visited, .header-nav li a:hover, .header-nav li a:active, .header-nav li a:focus { color: #333; } .header-nav li a:active { text-decoration: underline; } }

.impact-stats { display: grid; grid-gap: 12px; grid-template-columns: repeat(3, 1fr); }

@media (min-width: 480px) { .impact-stats { grid-gap: 24px; } }

.impact-stat { font-weight: 700; }

.impact-large { display: block; }

a.filter-item { text-decoration: none; }

.project-list { margin-top: .5rem; }

ul.filter-list { background: #f7f5f5; display: grid; list-style: none; padding-left: 0; grid-auto-flow: column; grid-column-gap: 20px; grid-template-columns: repeat(4, 1fr); }

li.filter-item { border: 1px solid rgba(0, 0, 0, 0.24); border-radius: 5px; color: black; background: white; display: flex; padding: 10px 15px; position: relative; transition-duration: 0.5s; cursor: pointer; }

li.filter-item a { color: black; text-transform: capitalize; }

li.filter-item:hover, li.filter-item:focus-within { background: white; }

li.filter-item:focus-within a { outline: none; }

ul.filter-list li ul { background: white; border: 1px solid rgba(0, 0, 0, 0.24); visibility: hidden; opacity: 0; transition: all 0.5s ease; z-index: 99; list-style: none; width: 115%; padding: 15px 20px; line-height: 2em; font-size: 0.9em; position: absolute; left: 0; top: 100%; cursor: default; }

ul.filter-list li:hover > ul, ul.filter-list li:focus-within > ul, ul.filter-list li ul:hover, ul.filter-list li ul:focus { visibility: visible; opacity: 1; display: block; }

ul.filter-list li ul li { clear: both; width: 100%; text-align: left; }

.hidden-project { display: none; }

.filter-checkbox { border: 1px solid #000000; border-radius: 4px; margin: 0px 5px; cursor: pointer; }

.labelArrow { transform: rotate(-45deg); font-size: 24px; position: absolute; top: 2%; right: 10%; }

.btn--current-projects-filter-tag { box-sizing: border-box; margin: 0em .5em 1em; padding: .3em 1em; background: #fa114f; border: none; border-radius: 5px; color: #fff; font-weight: 500; font-size: 15px; text-transform: capitalize; }

.btn--current-projects-filter-tag::after { content: "\00d7"; padding-left: .5em; }

.btn--current-projects-filter-tag:hover, .btn--current-projects-filter-tag:active, .btn--current-projects-filter-tag:focus { background: #d4043c; color: #fff; text-decoration: none; }

a.clear-filter-tags { margin-left: 1em; text-decoration: underline; color: #767676; }

a.clear-filter-tags:hover { cursor: pointer; }

.number-of-checked-boxes { color: #fa114f; }

@media (max-width: 767px) { ul.filter-list li ul { width: 105%; padding: 15px; } }

@media (max-width: 659px) { ul.filter-list { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); grid-auto-flow: row; grid-gap: 10px; } li.filter-item { padding: 5px 10px; } .labelArrow { top: -8%; right: 5%; font-size: 20px; } .clear-filter-tags { display: none; } }

.js-inline-link { display: inline-block; width: 24px; height: 24px; }

.js-inline-link.js-inline-link-meetup { width: 89px; height: 32px; }

.js-inline-link .icon { width: 100%; height: 100%; }

.wide-div { margin-top: 29px; background: #030c2c; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: "Roboto" sans-serif; font-style: normal; font-weight: normal; }

.header-container--credits { display: flex; flex-direction: row; justify-content: center; padding: 64px; }

.header-container--credits img { max-height: 240px; }

@media (max-width: 767px) { .header-container--credits img { max-height: 170px; } }

@media (max-width: 479px) { .header-container--credits { flex-direction: column; align-items: center; padding: 32px; } }

.credits-text-margin { display: flex; flex-direction: column; margin-right: 80px; }

.credits-text-margin p { font-size: 18px; max-width: 508px; margin-top: 8px; text-align: left; }

.credits-text-margin h1 { font-size: 48px; }

@media (max-width: 479px) { .credits-text-margin { margin: auto; margin-bottom: 36px; } .credits-text-margin h1 { font-size: 24px; margin-bottom: 20px; } }

.header-text { font-size: 26px; display: flex; max-width: 895px; text-align: center; padding: 30px; margin: 12px auto; font-family: "Roboto" sans-serif; }

@media (max-width: 479px) { .mobile-image { padding: 0; } }

.credit-hero { padding: 33px; margin: 0px auto; display: flex; justify-content: space-evenly; }

@media (max-width: 479px) { .credit-hero { flex-direction: column; text-align: -webkit-center; } }

.credits-item { margin: 15px; padding-bottom: 15px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; }

@media (max-width: 479px) { .credits-item { margin: 5px; } }

.page-card--credits { padding: 30px; }

@media (max-width: 479px) { .page-card--credits { padding: 32px 16px; } }

.credits-list { order: 2; }

@media (min-width: 768px) { .credits-list { display: grid; grid-gap: 32px 54px; grid-template-columns: repeat(2, 1fr); order: 3; width: 100%; } }

.credits-inner { display: flex; flex-direction: column; }

@media (min-width: 480px) { .credits-inner { flex-direction: row; flex-wrap: wrap; } }

.icon-left { width: 100px; padding-right: 20px; display: flex; justify-content: center; }

@media (max-width: 479px) { .icon-left { width: 60px; padding-right: 10px; } }

.icon-info { width: 190px; }

.icon-info p { margin: 0; }

.header-container--project-meetings { display: flex; flex-direction: column; align-items: center; background: #fff; padding: 32px; height: fit-content; margin: 37px auto 0; font-family: "Roboto" sans-serif; font-style: normal; font-weight: normal; text-align: center; }

@media (min-width: 960px) { .header-container--project-meetings { flex-direction: row; align-items: center; padding: 64px; justify-content: center; } }

@media (max-width: 480px) { .header-container--project-meetings { height: 80vh; background-size: auto 30%; } }

.header-container--project-meetings .project-meetings-banner-icon { max-height: 240px; padding: 0 15px; }

@media (min-width: 960px) { .header-container--project-meetings .project-meetings-banner-icon { margin: auto 1rem auto 0; } }

.header-container--project-meetings .project-meetings-header-text-container { display: flex; flex-direction: column; font-size: 1.125rem; }

@media (min-width: 960px) { .header-container--project-meetings .project-meetings-header-text-container { margin: auto 5rem; } }

.header-container--project-meetings .project-meetings-header-text-container h1 { color: #333; font-weight: 700; font-size: 24px; padding-bottom: 28px; }

@media (min-width: 960px) { .header-container--project-meetings .project-meetings-header-text-container h1 { font-size: 48px; padding-bottom: 0; } }

.header-container--project-meetings .project-meetings-header-text-container p { font-size: 18px; margin: auto; max-width: 300px; margin-bottom: 1rem; text-align: start; }

@media (min-width: 960px) { .header-container--project-meetings .project-meetings-header-text-container p { margin-bottom: 0; } }

@media (min-width: 768px) { .header-container--project-meetings .project-meetings-header-text-container p { max-width: 508px; } }

.covid-notification-banner { background-color: #f2c94d; width: 100%; display: flex; justify-content: center; align-content: center; }

.covid-notification-banner p { text-align: center; font-weight: bold; margin: 0; padding: 15px 0; }

.calendar-started-page { background: #030d2d; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }

.page-card--project-meetings { padding: 30px; }

@media (max-width: 479px) { .page-card--project-meetings { padding: 32px 16px; } }

.schedule-list { list-style: none; }

.schedule-list li:before { content: "\2022"; color: #fa114f; font-weight: bold; font-size: 28px; display: inline-block; width: 0.60em; margin-left: -0.6em; vertical-align: middle; }

.time-slot-text { vertical-align: text-top; display: inline-block; margin-block-end: 0; }

.day-header { margin-block-end: 16px; }

.team-meetings-title { color: #fff; }

@media (max-width: 479px) { .team-meetings-title { margin-top: 60px; } }

.meetings-message { text-align: center; }

.userTimeZone { margin-bottom: 20px; }

.bg-color { background-color: #f7f5f5; }

.page-hero { background-size: cover !important; background-color: #fff; display: flex; flex-direction: column; justify-content: flex-end; position: relative; margin-top: 29px; width: 100vw; }

.page-hero::after { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(to bottom, rgba(3, 13, 45, 0.3) 0%, #030d2d 100%); content: ""; display: block; z-index: 1; }

@media (min-width: 768px) { .page-hero::after { background: linear-gradient(to bottom, rgba(3, 13, 45, 0) 30%, #030d2d 100%); opacity: 1; } }

@media (max-width: 479px) { .page-hero::after { background: linear-gradient(to bottom, rgba(3, 13, 45, 0.3) 30%, #030d2d 100%); } }

.guidepage-header { display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; padding: 3%; background-color: #fff; }

.guidepage-header h1 { font-size: 30px; }

.guidepage-header .left-col { width: 50%; margin-left: 5%; }

.guidepage-header .right-col { width: 30%; }

@media (max-width: 479px) { .guidepage-header .left-col { width: 100%; margin: 5%; } .guidepage-header .right-col { margin: 5%; width: 100%; } }

@media (min-width: 480px) { .border-right { border-right: 1px solid rgba(0, 0, 0, 0.3); align-self: center; max-height: 150px; height: 280px; margin: 0% 5%; } }

.section-container h5 { font-size: 1.1em; font-weight: normal; }

.section-container h4 { text-align: left; }

.section-container .add-margin-top-to-header { margin-top: 4rem; }

.section-container p { text-align: left; }

.after-paragraph-margin { margin-bottom: 2rem; }

.section-container img { display: table-cell; vertical-align: top; }

.subheading { text-align: center; }

.black-font { color: black; }

.img-and-caption { display: inline-block; }

.img-caption { font-style: italic; font-size: 0.9em; margin-top: -1.0%; text-align: left; padding-left: 5%; }

.inline-text-with-title { display: flex; }

.section-container { background: #fff; box-shadow: 0px 4px 8px rgba(51, 51, 51, 0.2); border-radius: 10px; margin: 2% 12%; padding: 5% 12.5%; text-align: center; }

.grayarrow { width: 20px; max-width: none; margin: 1rem auto; }

@media (max-width: 479px) { .grayarrow { width: 15px; } }

@media (max-width: 767px) { .section-container { padding: 12.5% 10%; } }

.overlay-links { position: relative; }

.overlay-links h4 { font-size: 0.85em; }

@media (max-width: 767px) { .overlay-links h4 { line-height: 1.5em; } }

.overlay-links h4 a { text-decoration: underline; }

.guide-pages-text-section-reduced-width { width: 90%; margin: auto auto 1rem auto; }

@media (max-width: 479px) { .guide-pages-text-section-reduced-width { width: 100%; } }

.guide-pages-text-section-reduced-width img { width: 100%; }

.overlay-links-img { max-width: none; width: 90%; margin: auto; }

@media (max-width: 479px) { .overlay-links-img { width: 100%; } }

@media (max-width: 479px) { .hide-guide-page-arrow-on-mobile { display: none; visibility: hidden; } .hide-guide-page-arrow-on-mobile + h4 { display: none; } }

.header-p { font-size: 27px; display: flex; max-width: 895px; text-align: center; padding: 30px; margin: 12px auto; font-family: "Roboto"sans-serif; }

@media (max-width: 479px) { .header-p { font-size: 18px; text-align: left; } }

.getting-started-page { background: #030d2d; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: "Roboto"sans-serif; font-style: normal; font-weight: normal; }

.gs-link { text-decoration: none; font-size: 20px; text-align: center; }

.getting-started-step-title-overview { text-align: center; font-size: 20px; }

.getting-started-step-title-header { font-size: 1.5rem; }

@media (max-width: 479px) { .getting-started-step-title-header { font-size: 1.25rem; } }

.getting-started-step-subheader { text-align: center; }

.getting-started-onboarding-instructions { text-align: initial; padding-top: 20px; }

.step-img { height: 100px; text-align: center; }

.step-links { padding: 33px; margin: 0px auto; }

.step-link-img { display: flex; justify-content: space-evenly; margin-left: 6%; }

@media (max-width: 479px) { .step-link-img { flex-direction: column; text-align: -webkit-center; } }

.step-header { display: flex; justify-content: center; color: #000000; font-family: "Roboto"sans-serif; }

@media (max-width: 479px) { .step-header { text-align: center; } }

.page-card--getting-started { padding: 30px; }

@media (max-width: 479px) { .page-card--getting-started { padding: 32px 16px; } }

.self-onboarding { display: flex; padding: inherit; margin: 11px; }

.getting-started-guide-content-section { text-align: justify; }

.zoom-pictures { display: flex; justify-content: space-evenly; flex-wrap: wrap; }

.zoom-img { width: 320px; align-self: center; }

.project-position { padding: 16px; margin: 30px auto; }

.accordion { color: black; cursor: pointer; transition: 0.4s; font-size: 1.25rem; text-align: left; border-bottom: 0.5px solid gray; min-width: 835px; margin-top: 45px; }

@media (max-width: 479px) { .accordion { margin-top: 20px; min-width: 255px; font-size: 1.125rem; } }

.svg-accordion { float: right; }

.svg-accordion:hover { opacity: 0.5; }

.accordion:after { content: "\221F"; float: right; transform: rotate(-45deg); transition: transform 0.25s ease-in; color: #fa114f; font-weight: bolder; font-size: 24px; }

.active::after { content: "\221F"; transform: rotate(135deg); transition: transform 0.25s ease-in; }

.panel { display: none; overflow: hidden; text-align: left; margin-top: 40px; }

.ordered-list-steps { display: flex; flex-direction: row; padding: 4px 0px; height: fit-content; margin-left: 26px; text-align: center; }

@media (max-width: 479px) { .ordered-list-steps { flex-direction: column; flex-wrap: wrap; padding: 8px 5px; } }

.project-position-1 { padding: 40px 28px; margin: 0px 30px; width: 50%; }

@media (max-width: 479px) { .project-position-1 { flex-direction: column; width: auto; } }

.ordered-list-steps-1 { display: flex; flex-direction: row; justify-content: center; padding: 5px; text-align: center; }

@media (max-width: 479px) { .ordered-list-steps-1 { flex-direction: column; flex-wrap: wrap; } }

.ordered-list-steps-2 { display: flex; justify-content: center; align-content: center; }

.project-position-2 { text-align: center; }

.project-position-3 { margin: 0px 30px; width: 50%; }

@media (max-width: 479px) { .project-position-3 { flex-direction: column; width: auto; } }

hr { width: 80%; margin-bottom: 8%; }

.g-s-list { text-align: initial; margin: 5px 0; }

.dashboardEmbed { display: flex; background-color: #020d2d; margin: 0 auto 0 auto; }

@media (min-width: 768px) { .dashboardEmbed #mobileView { display: none; } }

@media (max-width: 767px) { .dashboardEmbed #mobileView { display: block; margin: 22% auto 0 auto; } .dashboardEmbed #webView { display: none; } }

iframe { margin: 0 auto 0 auto; }

.dashboardEmbed { background-color: #020d2d; }

.accordion { padding: 0.2rem; }

#myCanvas { justify-content: center; text-align: center; margin: auto; }

.donut-list li { list-style: none; margin: auto; text-align: center; padding: 1rem; }

.dot { height: 2rem; width: 2rem; padding-right: 1rem; margin-right: 1rem; margin-top: 1rem; border-radius: 50%; display: inline-block; }

.used { background-color: #89cff0; }

.never-used { background-color: #0000ff; }

.indent { padding-left: 2rem; }

.highlight { background-color: #EDEDED; word-wrap: break-word; }

.screenshot { text-align: center; }

.screenshot-2FA img { display: block; margin-left: auto; margin-right: auto; min-width: 200px; }

.title-left { text-align: left; }

@media (min-width: 768px) { .screenshot-2FA img { width: 100%; } }

@media (max-width: 767px) { .screenshot-2FA img { width: 100%; } #myCanvas { width: 80%; } .donut-list li { padding-left: 0.1rem; text-align: left; } }

@media (max-width: 959px) { .accordion { min-width: 150px; } .screenshot-2FA img { min-width: 200px; width: 100%; } }

@media (min-width: 960px) { .screenshot-2FA img { width: 50%; } }

.toolkit-header { display: flex; justify-content: center; }

.toolkit-header__text { display: flex; align-items: center; flex-direction: column; margin-right: 5rem; }

.toolkit-header__text h1 { margin-top: 2.25rem; margin-bottom: 3.125rem; }

.toolkit-header__text-group { display: flex; flex-wrap: wrap; justify-content: space-evenly; text-align: center; padding: 1.4rem 0; background-color: #f7f5f5; }

.toolkit-header__text-group a { font-weight: 300; text-decoration: none; color: #333; }

.toolkit-header__text-group a:hover { color: #fa114f; transform: scale(1.01); }

.toolkit-header__text-group .selected-category { font-weight: 700; color: #fa114f; }

.toolkit-header__p { font-size: 1.125rem; max-width: 508px; text-align: left; margin: 12px auto; }

.toolkit-header__hero-image { margin: 33px 0px; max-width: 100%; }

.toolkit-svg { width: auto; height: 240px; }

@media (max-width: 850px) { .toolkit-header { flex-flow: column; } .toolkit-header__text { margin-right: 0; } .toolkit-header__text h1 { margin-bottom: 0.4rem; } .toolkit-header__p { margin-bottom: 0; } .toolkit-header__hero-image { margin: 10px 0; } .header-container { padding: 2rem; margin-top: 10%; } }

.toolkit-background { background-color: #030D2D; padding: 2rem; }

.suggest-guide-group { display: flex; justify-content: space-between; align-items: center; padding-left: 3rem; padding-right: 3rem; text-align: center; margin-bottom: 2rem; }

.suggest-guide-group h2 { font-style: normal; font-weight: normal; font-size: 1.75rem; color: #FFFFFF; margin-bottom: 0; }

.toolkit-flex-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, max-content)); padding-left: 2rem; padding-right: 2rem; align-items: stretch; justify-content: center; }

.toolkit-flex-item.section-container { position: relative; max-width: 23rem; padding: 0rem; height: auto; margin: 1.2rem 1rem; overflow: hidden; }

.toolkit-flex-item.section-container a { width: 1.5rem; }

.toolkit-flex-item-img-container { max-height: 16.95rem; overflow: hidden; }

.toolkit-flex-item-img-container svg { width: 100%; height: 100%; }

.resource-svg-icons { height: 17.5rem; width: 17.5rem; margin: 0 auto; }

.toolkit-info-container { margin: 1rem 0rem 2rem; padding: 0rem 2rem; }

.toolkit-info-container h3 { font-weight: normal; text-align: left; font-size: 1.125rem; height: fit-content; }

.toolkit-info-container p { margin: 1rem auto auto 0rem; line-height: 1.1rem; width: 100%; }

.toolkit-flex-item-status { position: absolute; font-size: 1.125rem; line-height: 1.2rem; right: 1rem; bottom: 1rem; }

.toolkit__card-list { margin-bottom: 10rem; }

@media only screen and (max-width: 1430px) { .toolkit-header__text-group { padding-left: 0; padding-right: 0; } .toolkit-header__banner-item { font-size: 1.1rem; margin: 0 2.5rem; } }

@media (max-width: 959px) { .toolkit-header__text-group { justify-content: space-evenly; align-items: center; } .toolkit-header__banner-item { font-size: .9rem; margin: 0 .6rem; max-width: 6rem; text-align: center; } .suggest-guide-group { padding-left: 0rem; padding-right: 0rem; } .toolkit-flex-container { display: grid; grid-gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; } .toolkit-flex-item { margin: 0 auto; } .resource-svg-icons { height: 15.5rem; width: 15.5rem; } }

@media (max-width: 479px) { .toolkit-header { padding-bottom: 3rem; } .toolkit-header__banner-item { font-size: .5rem; max-width: 3.6rem; } .toolkit-header__p { font-size: 1rem; } }

.toolkit-flex-container { display: flex; flex-wrap: wrap; align-content: center; flex-direction: column; }

.toolkit-flex-item { margin-bottom: 1.5rem; }

.resource-svg-icons { height: 14.5rem; width: 14.5rem; }

.toolkit-info-container h3 { font-size: 1.4rem; margin-bottom: 1.5rem; line-height: 1.5rem; max-height: fit-content; }

.suggest-guide-group { flex-direction: column; }

.suggest-guide-group h2 { margin-bottom: 1rem; }

@media (max-width: 767px) { .toolkit-svg { max-width: 350px; } }

@media (max-width: 479px) { .toolkit-svg { max-width: 250px; } }

.wins-hero { margin-top: 40px; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; }

.wins-hero img { max-height: 360px; }

.wins-hero h1 { margin-bottom: 56px; }

.wins-btn { max-width: 300px; max-height: 75px; }

.wins-see-more-div { position: absolute; background-color: white; right: 0px; bottom: 0px; color: #fa114f; padding: 0px 3px; cursor: pointer; }

.wins-card-text { margin-top: 40px; height: 88px; overflow: hidden; position: relative; }

.wins-card-text p { margin: 0; }

@media (max-width: 767px) { .wins-hero img { height: 230px; } .wins-hero h1 { font-style: normal; font-weight: normal; font-size: 38px; } .wins-hero .wins-btn { max-width: 217px; max-height: 60.5px; font-size: 18.5px; } }

@media (max-width: 479px) { .wins-hero img { height: 105px; } .wins-hero .wins-btn { max-width: 134px; max-height: 46px; font-size: 12px; line-height: 14px; } }

.wins-page-contain { margin: 0 auto; max-width: 1292px; }

.wins-page-contain > p { margin: 18px 60px; }

.wins-card { padding: 45px; display: flex; flex-direction: column; }

.wins-card-top { display: flex; }

.wins-card-top-right { flex-grow: 1; }

.wins-card-profile-img { width: 86px; height: 86px; border-radius: 100px; margin-right: 20px; }

.wins-card-big-quote { width: 28px; height: 112px; margin-right: 20px; margin-left: 58px; position: relative; }

.wins-card-bottom { display: flex; }

.wins-card-content { display: flex; flex-direction: column; margin-left: 20px; width: 100%; position: relative; overflow: hidden; margin-left: 6px; }

.wins-card-name { font-weight: bold; font-size: 20px; padding-bottom: .4em; }

.wins-card-team { font-weight: normal; font-size: 16px; line-height: 18px; display: flex; align-items: center; }

.wins-card-title { display: flex; justify-content: space-between; }

.wins-card-icon, .wins-card-github-icon, .wins-card-linkedin-icon { margin-left: 18px; }

.wins-card-icons { display: flex; }

.wins-card-info { font-weight: bold; }

.wins-card-overview { margin-top: 1em; }

@media (max-width: 767px) { .wins-card { position: relative; } .wins-card-text { height: 81px; position: inherit; } .wins-see-more-div { height: 0; margin-top: 4px; padding: 0; right: 7%; top: 88.5%; } .home-getting-started-container h1 { font-size: 2rem; } .project-inner { font-size: .937rem; line-height: 1.3rem; margin-bottom: .3rem; } .btn--wins { height: 40px; padding: 0 20px; border-radius: 20px; font-size: 1rem; line-height: 40px; } }

@media (max-width: 479px) { .wins-card-text { height: 80px; } .wins-card { padding: 24px; } .wins-card-left { width: 50px; } .wins-card-profile-img { width: 50px; height: 50px; border-radius: 100px; margin-right: 6px; } .wins-card-big-quote { margin: 0 6px 0 32px; height: 54px; width: 18px; position: static; } .wins-card-name { font-size: 19px; line-height: 22px; } .wins-card-icon { margin-left: 13.5px; } .github-icon { height: 20px; width: 20px; } .linkedin-icon { height: 20px; width: 20px; } .wins-card-text { margin-top: 16px; } .wins-card-overview { margin-top: 0; font-size: 16px; } }

@media (min-width: 960px) { .wins-card-overview { overflow: hidden; text-overflow: ellipsis; } .overlay { display: none; z-index: 1; position: fixed; left: 0px; top: 0px; width: calc(100vw + 17px); height: 100%; background-color: rgba(70, 70, 70, 0.5); padding: 10px; overflow-y: auto; overflow-x: hidden; } .display-none { display: none; } .display-initial { display: flex; flex-direction: column; } .top-buffer { height: 20vh; } .bottom-buffer { height: 5vh; } .modal-container { position: absolute; width: 60%; left: 20%; } .center-screen { opacity: 1; } .overlay-card-text { padding-top: 40px; } .wins-card-badges { display: flex; flex-flow: row wrap; width: 100%; } .wins-card-badges .badge-item { flex: 1 1; flex-basis: 250px; margin: 4px; display: flex; } .wins-card-badges .badge-item .badge-icon { margin: 2px 12.5px 0 0; height: 15px; min-width: 30px; display: flex; justify-content: center; } }

@media (max-width: 959px) { .overlay { display: none; } .display-none { display: none; } .expanded { height: auto; } .expanded .wins-see-more-div { position: relative; text-align: right; } }

.wins-card-content > * { flex: 0 0 auto; }

.wins-page-contain > ul.filter-list { grid-template-columns: repeat(2, 1fr); min-width: 216px; width: 40%; }

.wins-page-contain > ul.filter-list li ul { width: 100%; }

@media (max-width: 767px) { .wins-page-contain > ul.wins-filter { width: 100%; grid-template-rows: none; } }

/*--------
| Mobile 
----------*/
.join-us-wrapper { min-height: 100vh; }

.join-us-banner { display: flex; flex-direction: column; align-items: center; padding: 4rem 1rem; height: fit-content; }

.join-us-banner .join-us-banner-text { display: flex; flex-direction: column; align-items: center; }

.join-us-banner .join-us-banner-text h1 { font-size: 24px; padding-bottom: 28px; }

.join-us-banner .join-us-banner-text p { font-size: 18px; max-width: 300px; }

@media (min-width: 768px) { .join-us-banner .join-us-banner-text p { max-width: 500px; } }

.join-us-banner img { width: 80%; max-width: 500px; margin: auto; padding-top: 20px; }

.join-us-card-container { background: #f7f5f5; display: flex; flex-direction: column; }

.join-us-card-container .page-card--join { display: flex; flex-direction: column; align-items: center; padding: 3rem; }

@media (max-width: 479px) { .join-us-card-container .page-card--join { padding: 32px 20px; } }

.join-us-card-container .page-card--join h1 { font-size: 1.25rem; margin-bottom: 1rem; }

@media (max-width: 320px) { .join-us-card-container .page-card--join h1 { padding: 0 43px; text-align: center; } }

.join-us-card-container .page-card--join h2 { font-size: 16px; width: 100%; }

.join-us-card-container .page-card--join .join-us-card-img { width: 150px; padding: 40px 0; }

.join-us-card-container .page-card--join .join-us-donation-png { width: 100%; margin: 20px auto; }

.join-us-card-container .page-card--join ol { padding-left: 20px; max-width: 300px; }

.join-us-card-container .page-card--join ul { padding-left: 20px; }

.join-us-card-container .page-card--join .join-us-card-body { width: 100%; display: flex; flex-direction: column; align-items: center; }

.join-us-card-container .page-card--join .join-us-card-body p { padding-bottom: 20px; max-width: 300px; }

.join-us-card-container .page-card--join .join-us-card-body li { padding: 3px 0; }

.join-us-card-container .page-card--join .join-us-card-body li::marker { padding: 3px 0; }

.join-us-card-container .page-card--join .join-us-card-body .join-us-remove-p-padding { padding-bottom: 0; }

.join-us-card-container .page-card--join .join-us-card-body .btn-partner-with-us { margin-bottom: 27px; width: 175px; }

.join-us-card-container .join-us-donation { margin: 20px auto; background: #f6f6f6; padding: 20px; border-radius: 20px; }

.join-us-card-container .join-us-donation h2 { margin-bottom: 24px; }

.join-us-card-container .join-us-donation li { font-size: 1.125rem; padding: 8px 0; }

.join-us-card-container .join-us-donation #donation-footer { padding-left: 20px; font-size: 15px; }

/*---------
| Tablet
-----------*/
@media (min-width: 768px) { .join-us-card-container .page-card--join { display: grid; grid-template-columns: 2fr 3fr; grid-template-rows: auto; } .join-us-card-container .page-card--join h1 { grid-column: 2 / span 1; grid-row: 1 / span 1; font-size: 1.5rem; margin-bottom: 2rem; } .join-us-card-container .page-card--join ol { max-width: 480px; } .join-us-card-container .page-card--join img { grid-column: 1 / span 1; grid-row: 1 / span 2; margin: auto; } .join-us-card-container .page-card--join #join-us-donation-icon { margin: 1rem auto; align-self: flex-start; } .join-us-card-container .page-card--join .join-us-card-body { grid-column: 2 / span 2; grid-row: 2 / span 1; align-items: flex-start; } .join-us-card-container .page-card--join .join-us-card-body p { max-width: 480px; } .join-us-card-container .page-card--join .join-us-card-body .join-us-donation-png { max-width: 419px; padding-bottom: 20px; } .join-us-card-container .page-card--join .join-us-donation { display: flex; flex-direction: row-reverse; align-items: center; grid-column: 1 / span 2; grid-row: 3 / span 1; } .join-us-card-container .page-card--join .join-us-donation img { width: 318px; } .join-us-card-container .page-card--join .join-us-donation .join-us-donation-body { padding: 0 32px 0 16px; } .join-us-card-container .page-card--join .join-us-donation .join-us-donation-body h2 { font-size: 18px; } .join-us-card-container .page-card--join .join-us-donation .join-us-donation-body ol { line-height: 24px; } .join-us-card-container .page-card--join .join-us-donation .join-us-donation-body li { padding: 5px 0; } }

/*---------
| Desktop
-----------*/
@media (min-width: 960px) { .join-us-banner { flex-direction: row; max-width: 1200px; margin: 37px auto 0; } .join-us-banner .join-us-banner-text { width: 500px; min-width: 300px; margin: auto 5rem auto 8rem; } .join-us-banner .join-us-banner-text h1 { font-size: 48px; padding-bottom: 0; } .join-us-banner .join-us-banner-text p { font-size: 18px; max-width: 508px; } .join-us-banner img { max-width: 385px; margin: auto 1rem auto 0; padding: 0 15px; } }

.header-container--sitemap { display: flex; flex-direction: row; justify-content: center; background: #fff; padding: 64px; height: fit-content; margin: 37px auto 0; font-family: 'Roboto' sans-serif; font-style: normal; font-weight: normal; text-align: center; }

.header-container--sitemap img { max-width: 252.14px; }

@media (max-width: 767px) { .header-container--sitemap { flex-direction: column; align-items: center; padding: 32px; } }

.header-text-margin--sitemap { display: flex; flex-direction: column; margin-right: 80px; }

.header-text-margin--sitemap p { font-size: 18px; max-width: 508px; margin-top: 8px; text-align: left; }

.header-text-margin--sitemap h1 { font-size: 48px; }

@media (max-width: 767px) { .header-text-margin--sitemap { margin: auto; margin-bottom: 36px; } .header-text-margin--sitemap h1 { font-size: 24px; margin-bottom: 20px; } }

.sitemap-page { background: #f7f5f5; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; text-align: center; /*   Page-specific button  */ /*   Medium Long Button  - more padding */ }

.sitemap-page h3 { font-size: 24px; margin-bottom: 32px; }

.sitemap-page p { font-size: 16px; max-width: 477px; margin: auto; margin-bottom: 40px; }

@media (max-width: 767px) { .sitemap-page h3 { font-size: 20px; } .sitemap-page p { font-size: 16px; max-width: 300px; } }

.sitemap-page .page-card--sitemap-flex { padding: 48px; text-align: left; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; }

@media (min-width: 768px) { .sitemap-page .page-card-lg:nth-child(1n + 2) { padding-left: 0; } }

.sitemap-page .page-card--sitemap { width: 100%; padding: 48px; }

@media (max-width: 479px) { .sitemap-page .page-card--sitemap { padding: 32px 16px; } }

.sitemap-page .page-card--sitemap img { margin: auto; margin-left: auto; }

.sitemap-page .page-card--sitemap .card-mobile-icon { display: none; }

@media (max-width: 767px) { .sitemap-page .page-card--sitemap h3 { text-align: center; } .sitemap-page .page-card--sitemap .card-desktop-icon { display: none; } .sitemap-page .page-card--sitemap .card-mobile-icon { display: flex; margin: 58px auto; } .sitemap-page .page-card--sitemap a { display: flex; justify-content: center; } }

.sitemap-page .btn--site-map-suggest { width: 224px; height: 40px; font-size: 1rem; text-align: center; margin: 0 !important; border-radius: 20px; }

.sitemap-page .btn-md-long-2 { height: 40px; padding: 0 44px; border-radius: 20px; font-size: 1rem; }

.program-areas-header { display: flex; justify-content: center; }

.program-areas-header__text { display: flex; align-items: center; flex-direction: column; margin-right: 5rem; }

.program-areas-header__text h1 { margin-top: 2.25rem; margin-bottom: 3.125rem; }

.program-areas-header__text-group { display: flex; flex-wrap: wrap; justify-content: space-evenly; text-align: center; padding: 1.4rem 0; background-color: #f7f5f5; }

.program-areas-header__text-group a { font-weight: 300; text-decoration: none; color: black; }

.program-areas-header__text-group a:hover { color: #D11D69; transform: scale(1.01); }

.program-areas-header__text-group .selected-category { color: #D11D69; }

.program-areas-header__p { font-size: 1.125rem; max-width: 508px; text-align: left; margin: 12px auto; }

.program-areas-header__hero-image { margin: 33px 0px; max-width: 100%; }

.program-areas-hero-svg { width: auto; height: 240px; }

@media (max-width: 850px) { .program-areas-header { flex-flow: column; } .program-areas-header__text { margin-right: 0; } .program-areas-header__text h1 { margin-bottom: 0.4rem; } .program-areas-header__p { margin-bottom: 0; } .program-areas-header__hero-image { margin: 10px 0; } .header-container { padding: 2rem; margin-top: 10%; } }

.content--program-areas { background: #f7f5f5; display: flex; flex-direction: column; }

.content--program-areas .page-card-container { display: flex; min-height: 454px; height: fit-content; }

@media (max-width: 959px) { .content--program-areas .page-card-container { flex-direction: column; } }

.content--program-areas .page-card-image-container { flex: 0 0 auto; width: 327px; overflow: hidden; }

@media (max-width: 959px) { .content--program-areas .page-card-image-container { width: 100%; max-height: 40vh; } }

.content--program-areas .page-card-image { /*moved this to the container so I could use object-fit to accomodate random heights margin: -5px; max-width: 372px;*/ width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 767px) { .content--program-areas .page-card-image { height: auto; /*  width: 100%; max-height: 40vh; overflow: hidden;*/ } }

.content--program-areas .page-card-content { flex: 0 1 auto; margin: 34px; height: -moz-fit-content; height: fit-content; }

@media (max-width: 767px) { .content--program-areas .page-card-content { margin: 40px 0; padding: 0 16px; } }

@media (min-width: 480px) { .content--program-areas .page-card-content h3 { font-size: 1.25rem; } }

@media (min-width: 960px) { .content--program-areas .page-card-content h3 { font-size: 1.5rem; } }

.project-card-mini { width: 92px; height: 120px; border: 1px solid #C4C4C4; box-sizing: border-box; border-radius: 3px; }

.project-card-mini .project-card-mini-image { width: inherit; height: 67.83px; }

.project-card-mini .project-card-mini-title { text-align: center; }

.issue-template-container { position: relative; }

.issue-template-code { border: 1px solid #f7f5f5; background-color: #f7f5f5; font-family: monospace; text-align: left; font-size: 0.8em; }

.copy-button { position: absolute; z-index: 10; background: white; border: 0.5px solid white; border-radius: 4px; color: black; width: 85px; height: 30px; right: 1%; top: 1%; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15); }

.copy-button:hover { background: white; color: black; }

.clipboard { max-width: none; width: auto; max-height: 22px; }

.green-text { color: #58915b; }

.blue-text { color: #407BFF; }

.overlay-links { position: relative; }

.overlay-links h4 { font-size: 0.85em; }

.link-section p { text-align: center; }

.github-issues-screenshot { max-width: none; width: 90%; }

.assignees { position: absolute; left: 90%; width: 7%; top: 17.5%; }

.assignees + h4 { position: absolute; left: 97.5%; top: 17.5%; }

.labels { position: absolute; left: 90%; width: 7%; top: 21%; }

.labels + h4 { position: absolute; left: 97.5%; top: 21%; }

.project-board { position: absolute; left: 90%; width: 7%; top: 27.5%; }

.project-board + h4 { position: absolute; left: 97.5%; top: 27.5%; }

.milestones { position: absolute; left: 90%; width: 7%; top: 36%; }

.milestones + h4 { position: absolute; left: 97.5%; top: 36%; }

.left-pointer { transform: rotate(180deg); }

.title { position: absolute; right: 88%; width: 7%; right: 94%; top: 9%; }

.title + h4 { position: absolute; right: 87%; width: 10%; direction: rtl; text-align: start; top: 9%; right: 92.5%; }

.overview { position: absolute; right: 88%; width: 7%; top: 19%; }

.overview + h4 { position: absolute; right: 87%; width: 10%; direction: rtl; text-align: start; top: 19%; }

.dependency { position: absolute; right: 88%; width: 7%; top: 25.5%; }

.dependency + h4 { position: absolute; right: 87%; width: 10%; direction: rtl; text-align: start; top: 25.5%; }

.action-items { position: absolute; right: 88%; width: 7%; top: 30.5%; }

.action-items + h4 { position: absolute; right: 87%; width: 10%; direction: rtl; text-align: start; top: 30.5%; }

.resources { position: absolute; right: 88%; width: 7%; top: 54.5%; }

.resources + h4 { position: absolute; right: 87%; width: 10%; direction: rtl; text-align: start; top: 54.5%; }

.resume { position: absolute; right: 88%; width: 7%; top: 62.4%; }

.resume + h4 { position: absolute; right: 87%; width: 10%; direction: rtl; text-align: start; top: 62.4%; }

@media (max-width: 767px) { .overlay-links h4 { font-size: 0.4em; } .screenshot { width: 85%; } .clipboard { max-height: 16px; } .copy-button { width: 70px; height: 26px; top: 0%; } }

.grayarrow { width: 20px; max-width: none; }

.pinkpointer { width: 7%; }

.elipsis-arrow { position: absolute; left: 91%; width: 7%; top: 37%; }

.elipsis-arrow + h4 { position: absolute; left: 99%; top: 37%; }

.select-response-arrow { position: absolute; left: 91%; width: 7%; top: 35%; }

.select-response-arrow + h4 { position: absolute; left: 99%; top: 35%; }

.select-existing-spreadsheet-arrow { position: absolute; right: 80%; width: 7%; top: 54%; transform: rotate(180deg); width: 18%; }

.select-existing-spreadsheet-arrow + h4 { position: absolute; right: 99%; width: 10%; top: 54%; direction: rtl; text-align: start; }

.select-target-sheet-arrow { position: absolute; right: 90%; width: 7%; top: 50%; transform: rotate(180deg); }

.select-target-sheet-arrow + h4 { position: absolute; right: 99%; width: 10%; top: 50%; direction: rtl; text-align: start; }

.format-spreadsheet-row-1-arrow { position: absolute; right: 92%; width: 7%; top: 15%; transform: rotate(180deg); }

@media (max-width: 479px) { .format-spreadsheet-row-1-arrow { position: absolute; right: 95%; width: 12%; top: 10%; transform: rotate(240deg); } }

.format-spreadsheet-row-1-arrow + h4 { position: absolute; right: 102%; width: 10%; top: 15%; direction: rtl; text-align: start; }

@media (max-width: 479px) { .format-spreadsheet-row-1-arrow + h4 { position: absolute; right: 102%; width: 10%; top: 2%; direction: rtl; text-align: start; } }

.format-spreadsheet-linked-worksheet-arrow { position: absolute; right: 80%; width: 7%; top: 96%; transform: rotate(180deg); width: 18%; }

@media (max-width: 479px) { .format-spreadsheet-linked-worksheet-arrow { position: absolute; right: 67%; width: 25%; top: 87%; transform: rotate(300deg); } }

.format-spreadsheet-linked-worksheet-arrow + h4 { position: absolute; right: 102%; width: 10%; top: 96%; direction: rtl; text-align: start; }

@media (max-width: 479px) { .format-spreadsheet-linked-worksheet-arrow + h4 { position: absolute; right: 65%; width: 10%; top: 70%; direction: rtl; text-align: start; } }

.formula-cell-arrow { position: absolute; right: 75%; width: 7%; top: 29%; transform: rotate(180deg); width: 23%; }

.formula-cell-arrow + h4 { position: absolute; right: 100%; width: 10%; top: 29%; direction: rtl; text-align: start; width: 12%; }

.trim-section-formula-cell-arrow { position: absolute; left: 62%; width: 7%; top: 29%; width: 35%; }

.trim-section-formula-cell-arrow + h4 { position: absolute; left: 100%; top: 29%; }

.guide-page-add-page-arrow { position: absolute; right: 94%; width: 7%; top: 8%; transform: rotate(180deg); }

@media (max-width: 479px) { .guide-page-add-page-arrow { position: absolute; right: 89%; width: 7%; top: 1%; transform: rotate(270deg); } }

.guide-page-add-page-arrow + h4 { position: absolute; right: 102%; width: 10%; top: 8%; direction: rtl; text-align: start; }

@media (max-width: 479px) { .guide-page-add-page-arrow + h4 { position: absolute; right: 86%; width: 10%; top: -15%; direction: rtl; text-align: start; text-align: left; } }

.guide-page-add-data-arrow { position: absolute; right: 68%; width: 7%; top: 31%; transform: rotate(180deg); width: 30%; }

@media (max-width: 479px) { .guide-page-add-data-arrow { visibility: hidden; } }

.guide-page-add-data-arrow + h4 { position: absolute; right: 102%; width: 10%; top: 31%; direction: rtl; text-align: start; }

@media (max-width: 479px) { .guide-page-add-data-arrow + h4 { position: absolute; right: 60%; width: 10%; top: -60%; direction: rtl; text-align: start; text-align: left; } }

.guide-page-mobile-add-page-arrow { display: none; visibility: hidden; }

@media (max-width: 479px) { .guide-page-mobile-add-page-arrow { position: absolute; right: 69%; width: 7%; top: 1%; transform: rotate(310deg); visibility: visible; } }

.guide-page-connectors-arrow { position: absolute; left: 60%; width: 7%; top: 45%; width: 35%; }

@media (max-width: 479px) { .guide-page-connectors-arrow { visibility: hidden; display: none; } }

.guide-page-connectors-arrow + h4 { position: absolute; left: 97%; top: 45%; }

@media (max-width: 479px) { .guide-page-connectors-arrow + h4 { position: absolute; left: 70%; top: 45%; } }

.guide-page-mobile-connectors-arrow { display: none; visibility: hidden; }

@media (max-width: 479px) { .guide-page-mobile-connectors-arrow { position: absolute; right: 32%; width: 7%; top: 45%; transform: rotate(0deg); visibility: visible; } }

.guide-page-add-data-sources { position: absolute; right: 65%; width: 7%; top: 60%; transform: rotate(180deg); width: 30%; }

@media (max-width: 479px) { .guide-page-add-data-sources { display: none; visibility: hidden; } }

.guide-page-add-data-sources + h4 { position: absolute; right: 98%; width: 10%; top: 60%; direction: rtl; text-align: start; }

@media (max-width: 479px) { .guide-page-add-data-sources + h4 { position: absolute; right: 48%; width: 10%; top: 55%; direction: rtl; text-align: start; text-align: left; } }

.guide-page-mobile-add-data-sources-arrow { display: none; visibility: hidden; }

@media (max-width: 479px) { .guide-page-mobile-add-data-sources-arrow { position: absolute; right: 60%; width: 7%; top: 60%; transform: rotate(0deg); visibility: visible; } }

.guide-page-add-chart-arrows { position: absolute; right: 85%; width: 7%; top: 6%; transform: rotate(180deg); width: 18%; }

@media (max-width: 479px) { .guide-page-add-chart-arrows { visibility: hidden; display: none; } }

.guide-page-add-chart-arrows + h4 { position: absolute; right: 105%; width: 10%; top: 6%; direction: rtl; text-align: start; }

@media (max-width: 479px) { .guide-page-add-chart-arrows + h4 { position: absolute; right: 70%; width: 10%; top: -10%; direction: rtl; text-align: start; text-align: left; } }

.guide-page-mobile-add-chart-arrow { display: none; visibility: hidden; }

@media (max-width: 479px) { .guide-page-mobile-add-chart-arrow { position: absolute; right: 80%; width: 7%; top: 0%; transform: rotate(320deg); visibility: visible; } }

.guide-pages-customize-chart-image { margin-top: 4rem; margin-bottom: 2rem; }

.guide-page-customize-chart-data-pane-arrow { position: absolute; left: 82%; width: 7%; top: 2%; transform: rotate(300deg); }

@media (max-width: 479px) { .guide-page-customize-chart-data-pane-arrow { visibility: hidden; display: none; } }

.guide-page-customize-chart-data-pane-arrow + h4 { position: absolute; left: 85%; top: -3%; }

@media (max-width: 479px) { .guide-page-customize-chart-data-pane-arrow + h4 { position: absolute; left: 65%; top: 10%; } }

.guide-page-mobile-customize-chart-data-pane-arrow { display: none; visibility: hidden; }

@media (max-width: 479px) { .guide-page-mobile-customize-chart-data-pane-arrow { position: absolute; right: 12%; width: 7%; top: 11%; transform: rotate(180deg); visibility: visible; } }

.guide-page-customize-chart-properties-panel-arrow { position: absolute; left: 90%; width: 7%; top: 6%; }

@media (max-width: 479px) { .guide-page-customize-chart-properties-panel-arrow { visibility: hidden; display: none; } }

.guide-page-customize-chart-properties-panel-arrow + h4 { position: absolute; left: 99%; top: 5%; }

@media (max-width: 479px) { .guide-page-customize-chart-properties-panel-arrow + h4 { position: absolute; left: 65%; top: -15%; width: 50px; line-height: 10px; text-align: right; } }

.guide-page-mobile-customize-chart-properties-panel-arrow { display: none; visibility: hidden; }

@media (max-width: 479px) { .guide-page-mobile-customize-chart-properties-panel-arrow { position: absolute; right: 7%; width: 8%; top: 2%; transform: rotate(210deg); visibility: visible; } }

.guide-page-customize-chart-dimension-arrow { position: absolute; left: 90%; width: 7%; top: 15%; }

@media (max-width: 479px) { .guide-page-customize-chart-dimension-arrow { visibility: hidden; display: none; } }

.guide-page-customize-chart-dimension-arrow + h4 { position: absolute; left: 99%; top: 15%; }

@media (max-width: 479px) { .guide-page-customize-chart-dimension-arrow + h4 { position: absolute; left: 67%; top: 26%; text-align: right; } }

.guide-page-mobile-customize-chart-dimension-arrow { display: none; visibility: hidden; }

@media (max-width: 479px) { .guide-page-mobile-customize-chart-dimension-arrow { position: absolute; right: 12%; width: 7%; top: 27%; transform: rotate(180deg); visibility: visible; } }

.guide-page-customize-chart-metric-arrow { position: absolute; left: 90%; width: 7%; top: 22%; }

@media (max-width: 479px) { .guide-page-customize-chart-metric-arrow { visibility: hidden; display: none; } }

.guide-page-customize-chart-metric-arrow + h4 { position: absolute; left: 99%; top: 22%; }

@media (max-width: 479px) { .guide-page-customize-chart-metric-arrow + h4 { position: absolute; left: 70%; top: 34%; text-align: right; } }

.guide-page-mobile-customize-chart-metric-arrow { display: none; visibility: hidden; }

@media (max-width: 479px) { .guide-page-mobile-customize-chart-metric-arrow { position: absolute; right: 12%; width: 7%; top: 35%; transform: rotate(180deg); visibility: visible; } }

.guide-page-customize-chart-sort-arrow { position: absolute; left: 90%; width: 7%; top: 28%; }

@media (max-width: 479px) { .guide-page-customize-chart-sort-arrow { visibility: hidden; display: none; } }

.guide-page-customize-chart-sort-arrow + h4 { position: absolute; left: 99%; top: 28%; }

@media (max-width: 479px) { .guide-page-customize-chart-sort-arrow + h4 { position: absolute; left: 73%; top: 42%; text-align: right; } }

.guide-page-mobile-customize-chart-sort-arrow { display: none; visibility: hidden; }

@media (max-width: 479px) { .guide-page-mobile-customize-chart-sort-arrow { position: absolute; right: 12%; width: 7%; top: 43%; transform: rotate(180deg); visibility: visible; } }

.guide-page-customize-chart-filter-arrow { position: absolute; left: 90%; width: 7%; top: 40%; }

@media (max-width: 479px) { .guide-page-customize-chart-filter-arrow { display: none; visibility: hidden; } }

.guide-page-customize-chart-filter-arrow + h4 { position: absolute; left: 99%; top: 40%; }

@media (max-width: 479px) { .guide-page-customize-chart-filter-arrow + h4 { position: absolute; left: 70%; top: 66%; text-align: right; } }

.guide-page-mobile-customize-chart-filter-arrow { display: none; visibility: hidden; }

@media (max-width: 479px) { .guide-page-mobile-customize-chart-filter-arrow { position: absolute; right: 12%; width: 7%; top: 67%; transform: rotate(180deg); visibility: visible; } }

.guide-page-dimension-2-arrow { position: absolute; left: 88%; width: 7%; top: 20%; }

@media (max-width: 479px) { .guide-page-dimension-2-arrow { visibility: hidden; display: none; } }

.guide-page-dimension-2-arrow + h4 { position: absolute; left: 97%; top: 20%; }

@media (max-width: 479px) { .guide-page-dimension-2-arrow + h4 { position: absolute; left: 70%; top: 17%; } }

.guide-page-mobile-dimension-2-arrow { display: none; visibility: hidden; }

@media (max-width: 479px) { .guide-page-mobile-dimension-2-arrow { position: absolute; right: 12%; width: 6%; top: 22%; transform: rotate(220deg); visibility: visible; } }

.guide-page-style-pane-arrow { position: absolute; left: 92%; width: 7%; top: 25%; }

@media (max-width: 479px) { .guide-page-style-pane-arrow { visibility: hidden; display: none; } }

.guide-page-style-pane-arrow + h4 { position: absolute; left: 102%; top: 25%; }

@media (max-width: 479px) { .guide-page-style-pane-arrow + h4 { position: absolute; left: 73%; top: 13%; text-align: right; width: 30px; line-height: 9px; } }

.guide-page-mobile-style-pane-arrow { display: none; visibility: hidden; }

@media (max-width: 479px) { .guide-page-mobile-style-pane-arrow { position: absolute; right: 10%; width: 6%; top: 22%; transform: rotate(220deg); visibility: visible; } }

.additional-resources-bold-text { font-weight: bold; }

.additional-resources-bold-text-top-margin { margin-top: 3rem; }

.guidepage-pink-underline-link { text-decoration: underline; color: #FA114F; }

/** This combination of styles pushes the footer to the botto of the page even when the content is short. */
.page-wrapper { display: flex; flex-direction: column; height: 100%; min-height: 100vh; }

.page-wrapper .main-content { flex-grow: 1; }

.page-contain { margin: 0 auto; max-width: 800px; }

.content-section { padding: 32px 16px; }

.redirect-page-contain { margin-top: 2em; }

.sr-only { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

.sr-only-focusable { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

.sr-only-focusable:active, .sr-only-focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* stylelint-disable declaration-no-important */
.hidden { display: none !important; }

@media (max-width: 767px) { .hide-mobile { display: none !important; } }

/* stylelint-enable */
@media print { html, body { font-size: 12pt; line-height: 1.25; overflow: visible; } * { -webkit-print-color-adjust: exact; } h1, .type-h1 { font-size: 36pt; line-height: 1.25; } h2, .type-h2 { font-size: 24pt; line-height: 1.25; } h3, .type-h3 { font-size: 18pt; line-height: 1.25; } h4, .type-h4 { font-size: 14pt; line-height: 1.25; } blockquote p, .type-featured { font-size: 24pt; line-height: 1.25; } small { font-size: 10pt; line-height: 1.25; } }

.project-hero { background-size: cover !important; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; position: relative; margin-top: 29px; width: 100vw; height: 46vw; max-height: 74vh; }

.project-hero::after { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(to bottom, rgba(3, 13, 45, 0.3) 0%, #030d2d 100%); content: ""; display: block; z-index: 1; }

@media (min-width: 768px) { .project-hero::after { background: linear-gradient(to bottom, rgba(3, 13, 45, 0) 30%, #030d2d 100%); opacity: 1; } }

@media (max-width: 479px) { .project-hero::after { background: linear-gradient(to bottom, rgba(3, 13, 45, 0.3) 30%, #030d2d 100%); } }

.meetingTime { padding-bottom: 1rem; }

.project-home-page { background: #030d2d; }

.page-card--project-description-page { padding: 30px; margin-bottom: 0; margin-top: 28px; }

@media (max-width: 479px) { .page-card--project-description-page { padding: 30px 15px; } }

.getting-page-card-title { color: #333; }

.project-page-card-title { color: #333; }

#project-description-card { padding-bottom: 19px; }

.project-page-status-indicator { display: inline-block; float: none; }

.project-page-description { display: grid; grid-template-columns: 40% auto; grid-template-rows: auto; padding: 0px 2%; }

@media (max-width: 479px) { .project-page-description { display: grid; grid-template-columns: auto; grid-template-rows: auto auto; } }

.project-page-description-field { display: inline-block; }

.open-roles { margin-bottom: 7px; }

#open-roles-list { column-count: 2; list-style: none; margin-bottom: 0; padding-left: 18px; }

#open-roles-list li:before { content: "\2022"; color: #fa114f; font-weight: bold; font-size: 28px; display: inline-block; width: 0.60em; margin-left: -0.6em; vertical-align: middle; }

@media (max-width: 479px) { #open-roles-list { column-count: 1; } }

.description-grid-item { padding: 0px 10px; }

.getting-started { margin: 4% 39% 0% 39%; display: flex; align-items: center; border: 1px solid #eaeaea; padding: 0px 13px; border-radius: 12px; width: fit-content; }

@media (max-width: 479px) { .getting-started { margin: 4% auto 0% auto; } }

.getting-started-button-text { margin-bottom: 0px; white-space: nowrap; }

.getting-started-button { width: 38px; height: 34px; margin: 0 5px; border: none; background: transparent; transition: transform 1s; }

.getting-started-button:focus { outline: 0; }

.getting-started-button:hover { background: transparent; }

#getting-started-section { max-height: 294px; padding: 30px; transition: max-height 1s, padding 1s; margin-top: 28px; }

#help-getting-started { height: 175px; width: 224px; display: flex; justify-content: center; flex-direction: column; text-align: center; border: 1px solid rgba(51, 51, 51, 0.1); border-radius: 16px; padding: 5px 15px; text-align: left; }

.help-getting-started-text { margin: 0px 15px 13px 15px; }

.btn--project-help-make-guide { margin: 0 0 0 0; }

.btn--project-help-make-guide:focus { outline: 0; }

#help-make-text-section { height: 175px; max-width: 0px; padding: 35px 0px; overflow: hidden; text-align: center; min-width: 0px; transition: min-width 1s, padding 1s; text-align: left; }

.project-start-guide-img { margin: 17% 0 17% 0; border-radius: 11px; }

.resource-list { display: flex; flex-wrap: wrap; margin-left: 21px; }

@media (max-width: 479px) { .resource-list { display: flex; flex-wrap: wrap; margin-left: 0px; } }

.resource-link { text-decoration: none; }

.resource-link:link { color: #333; }

.resource-link:visited { color: #333; }

.resource-link:hover { color: #fa114f; }

.resource-card { text-align: center; border-radius: 16px; box-shadow: 0 0 8px 0 rgba(51, 51, 51, 0.2); overflow: hidden; display: inline-block; margin: 0px 42px 21px 0px; }

@media (max-width: 479px) { .resource-card { margin: 0px 13px 21px 0px; } }

.resource-img { width: 128px; height: 128px; padding: 20px; margin: auto auto; }

@media (max-width: 479px) { .resource-img { width: 116px; height: 116px; } }

.resource-img-provided { padding: 12px; }

.resource-title { font-size: 16px; margin-block-end: 0px; }

.resource-body { padding: 10px; box-shadow: 0px 5px 12px 0px rgba(0, 0, 0, 0.1); border-top: 2px solid #ececec; }

.leader-img { margin: 12px 12px 12px 12px; width: 70px; min-width: 40px; border-radius: 12px; }

.contributor-link { margin: 12px 24px 12px 0px; width: 70px; min-width: 70px; border-radius: 12px; }

.leader-card { display: grid; grid-template-rows: auto; grid-template-columns: 24% auto; border-radius: 16px; box-shadow: 0 0 8px 0 rgba(51, 51, 51, 0.2); margin: auto 32px auto 0px; margin-bottom: 25px; width: 46%; }

@media (max-width: 479px) { .leader-card { min-width: 100%; display: flex; flex-direction: column; width: auto; justify-content: center; align-content: center; align-items: center; margin: auto auto 25px auto; } }

.leader-description { padding: 0px 12px; display: flex; flex-direction: column; justify-content: center; }

.leader-description-field { margin-block-end: 0.25em; }

.empty-content-message { font-style: italic; max-height: 175px; max-width: 229px; margin: 0px 0px 30px 21px; text-align: center; border: 1px solid rgba(51, 51, 51, 0.1); border-radius: 16px; padding: 5px 15px; text-align: left; }

.empty-content-message p { margin-block-end: 0; padding: 10px 10px; }

.role-paragraph { display: inline-block; margin-block-end: 0; vertical-align: text-top; }

.contributor-div { box-shadow: 0 0 8px 0 rgba(51, 51, 51, 0.2); border-radius: 16px; margin: 13px 30px 13px 0px; width: 94px; padding: 12px; flex-shrink: 0; }

@media (max-width: 479px) { .contributor-div { margin: 0px 10px 26px 0px; } }

.userTimeZone--project-page { font-size: 15px; margin-bottom: 20px; }

/*# sourceMappingURL=main.css.map */