/************************************/
/*         About Page Header        */
/************************************/

#about .page-header {
  background: url(/images/about-background.jpg) 50% 40% no-repeat;
  background-size: cover;
  height: 250px;
}

#about .page-header .title {
  margin-left: 1.4em;
  color: var(--white-color);
  text-shadow: var(--black-color) 0px 0px 30px;
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 3em;
}


/************************************/
/*           About Page             */
/************************************/

#about .intro-section {
  max-width: 34em;
  width: 100%;
  font-size: 1.2em;
}

#about img.feature-image {
  max-width: 408px;
  height: auto;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}

#about .objective-section {
  max-width: 30em;
  width: 100%;
  margin: 1em;
  font-size: 1.2em;
}

#about .goal-section {
  max-width: 22em;
  width: 100%;
  margin: 2.5em 0.5em 0em 0.5em;
}

#about .goal-section .subsection-title {
  margin-bottom: 0em;
}

#about .goal-section img {
  width: 52px;
  height: 52px;
  margin-left: -0.4em;
  margin-right: 0.6em;
}

#about div.goal-section p {
  font-size: 1em;
}

#about .strategy-section {
  max-width: 36em;
  width: 100%;
}

#about .pillar-section {
  max-width: 22em;
  width: 100%;
  margin: 3em 0.5em 0em 0.5em;
}

#about .pillar-section .subsection-title {
  margin-bottom: 0em;
}

#about .pillar-section img {
  max-width: 4em;
  margin-left: -1em;
}

#about div.pillar-section p {
  font-size: 1em;
}

#about .teammate-section {
  margin: 2em 1em 1em 1em;
  max-width: 22em;
  width: 100%;
}

#about img.teammate-image {
  width: 10em;
  padding: 5px;
  border: 4px solid var(--light-black-color);
  border-radius: 10em;
  margin-left: 3em;
}

#about .teammate-title {
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 1.4em;
  margin-top: 0.75em;
  margin-bottom: 0.4em;
}

#about .teammate-subtitle {
  color: var(--gray-color);
  font-family: var(--title-font);
  font-size: 1em;
}

#about .teammate-links a {
  font-family: var(--icon-font);
  font-size: 1.2em;
  color: var(--bright-green-color);
  margin-left: 0.7em;
}

#about .teammate-links a:hover {
  color: var(--bright-orange-color);  
}

#about .teammate-links a:active {
  color: var(--bright-blue-color);  
}

#about .teammate-text {
  font-weight: 400;
  font-size: 1em;
  line-height: 1.4;
  margin-top: 1.5em;
}

#about .logo-section {
  max-width: 45em;
  width: 100%;
}

#about #get-involved-section {
  width: 100%;
  background: linear-gradient(315deg, var(--dark-fuchsia-color) 28%, var(--bright-fuchsia-color) 28%);
  margin-top: 5em;
  color: var(--white-color);
}

#about #get-involved-section .page-section {
  margin-top: 5em;
  margin-bottom: 5em;
}

#about #get-involved-section .section-title {
  font-size: 3.5em;
  margin-bottom: 0em;
}

#about #get-involved-section a.action {
  max-width: 32em;
  margin-top: 3em;
  margin-right: 1em;
  color: var(--white-color);
}

#about #get-involved-section a.action .icon {
  font-family: var(--solid-icon-font), var(--icon-font);
  font-size: 4em;
  min-width: 74px;
  text-align: center;
  margin-right: 0.1em;
}

#about #get-involved-section a.action .title {
  font-weight: 500;
  font-size: 1.2em;
}

#about #get-involved-section a.action .description {
  font-weight: 400;
  font-size: 0.9em;
  line-height: 1.4em;
  margin-top: 0.4em;
}

#about #get-involved-section a.action:hover .icon,
#about #get-involved-section a.action:hover .title,
#about #get-involved-section a.action:hover .description {
  color: var(--bright-orange-color);
  cursor: pointer;
}

#about #get-involved-section a.action:active .icon,
#about #get-involved-section a.action:active .title,
#about #get-involved-section a.action:active .description {
  color: var(--bright-blue-color);
}

#about .history-section {
  max-width: 32em;
  width: 100%;
}

#about img.history-image {
  margin-bottom: 2em;
}

#about .history-subsection {
  max-width: 22em;
  width: 100%;
  margin-top: 1em;
}

#about div.history-subsection p {
  font-size: 1.05em;
}

#about img.logo-image {
  width: 14em;
  margin: 0em 3em 0em 3em;
}

#about .logo-link {
  margin-bottom: 3em;
}

#about .sponsorship-section {
  max-width: 40em;
  width: 100%;
}

#about .sponsorship-logo {
  margin: 5em 3em 3em 3em;
}


/***********************************/
/*         Responsiveness          */
/***********************************/

@media (max-width:80em) {
  #about .sponsorship-section {
    max-width: none;
    margin-bottom: 2.5em;
  }
}

@media (max-width:70em) {
  #about .intro-section {
    margin-bottom: 2em;
  }
  
  #about .strategy-section {
    max-width: none;
    margin-top: 3em;
  }
  
  #about .history-section {
    margin-bottom: 2.5em;
  }
}

@media (max-width:22em) {
  #about img.logo-image {
    width: 14em;
    margin: 0em 1em 0em 1em;
  }
}
/************************************/
/*      Affiliates Page Header      */
/************************************/

#affiliates .page-header {
  background: url(/images/affiliates-header.jpg) 80% center no-repeat;
  background-size: cover;
}

#affiliates #tapestry {
  background: var(--bright-orange-color);
}

#affiliates #tapestry:after {
  border-top: 50px solid var(--bright-orange-color);
}

#affiliates #tapestry .title-line-a {
  font-family: var(--title-font);
  color: var(--dark-orange-color);
  font-size: 3.3em;
  margin-top: 2.7em;
}

#affiliates #tapestry .title-line-b {
  font-family: var(--title-font);
  color: var(--white-color);
  font-size: 2em;
  margin-top: .2em;
  margin-bottom: 4.15em;
}


/************************************/
/*      Affiliates Page Intro       */
/************************************/

#affiliates .intro-section {
  max-width: 38em;
  width: 100%;
  font-size: 1.1em;
}

#affiliates .join-box {
  max-width: 22em;
  width: 100%;
  border: 5px solid var(--bright-orange-color);
  background-color: var(--light-orange-overlay);
  padding: 2.5em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; 
}

#affiliates .join-box .heading {
  font-weight: 600;
  font-size: 1.4em;
}

#affiliates .join-box .button {
  border: 5px solid var(--bright-orange-color);
  background-color: var(--dark-orange-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.6em;
  padding: .4em .75em .45em .75em;
  margin-top: 1.5em;
  text-transform: uppercase;
  max-width: 13.5em;
  white-space: normal;
  text-align: center;
  line-height: 1.4em;
}

#affiliates .join-box .button:hover {
  cursor: pointer;
  border: 5px solid var(--white-color);
  background-color: var(--bright-orange-color);
}

#affiliates .join-box .button:active {
  cursor: pointer;
  border: 5px solid var(--white-color);
  background-color: var(--bright-blue-color);  
  outline: none;
}

#affiliates .join-box .button::-moz-focus-inner {
  border: 0 !important;
}


/************************************/
/*      Affiliates Page Cards       */
/************************************/

#affiliates .card {
  margin: 1em 1em 2em 1em;
  max-width: 20em;
  width: 100%;
}

#affiliates .card-image {
  max-width: 20em;
  overflow: hidden;
  margin-bottom: -5px;
}

#affiliates .card-image img {
  margin: 0px;
  width: 100%;
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  -moz-transition-duration: .5s;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
}

#affiliates .card-image img:hover {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  -moz-transition-duration: .5s;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
}

#affiliates .card-body {
  padding: 0.5em;
}

#affiliates .card-title {
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 1.4em;
  margin-top: 0.75em;
  margin-bottom: 0.4em;
}

#affiliates .card-subtitle {
  color: var(--gray-color);
  font-family: var(--title-font);
  font-size: 0.7em;
  margin-bottom: 1em;
}

#affiliates .card-links a {
  font-family: var(--icon-font);
  font-size: 1.1em;
  color: var(--bright-orange-color);
}

#affiliates .card-links a:hover {
  color: var(--dark-orange-color);  
}

#affiliates .card-links a:active {
  color: var(--bright-blue-color);  
}

#affiliates .card-links a:not(:last-child) {
  margin-right: 0.6em;
}

#affiliates .card-text {
  color: var(--gray-color);
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 0.85em;
  line-height: 1.4;
  margin-top: 1.5em;
}


/***********************************/
/*         Responsiveness          */
/***********************************/

@media (max-width:68em) {
  #affiliates .intro-section {
    max-width: none;
    min-width: 30em;
    margin-bottom: 2em;
  }
}

@media (max-width:34em) {
  #affiliates .intro-section {
    min-width: 16em;
  }
  
  #affiliates .card {
    margin: 0em 0em 2em 0em;
  }
}












/**********************************************/
/*          Avatar on Page Editing            */
/**********************************************/

#editable-avatar {
  position: relative;
  margin-bottom: 1.5em;
}

#editable-avatar #avatar-overlay {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--black-overlay);
  color: var(--white-color);
  cursor: pointer;
}

#editable-avatar #avatar-overlay .action {
  background-color: var(--white-overlay);
  font-family: var(--alt-title-font);
  font-weight: 400;
  font-size: 0.7em;
  text-align: center;
  color: var(--white-color);
  padding: 0.8em 1em 0.8em 1em;
}

#edit-avatar-container {
  position: absolute;
  width: 100%;
}

#edit-avatar-container .outer-caret {
  width: 0px;
  height: 0px;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 14px solid var(--light-black-color);
}

#edit-avatar-container .inner-caret {
  width: 0px;
  height: 0px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--white-color);
  z-index: 100;
  margin-top: -10px;
  margin-bottom: -4px;
}

#edit-avatar-container .edit-avatar {
  background-color: var(--white-color);
  border: 3px solid var(--light-black-color);
}

#edit-avatar-container .edit-avatar a.menu-item,
.edit-avatar input.edit-avatar-upload + label {
  padding: 0.75em 1em 0.75em 1em;
  margin-left: 0em;
  margin-right: 0em;
  font-size: 0.7em;
  font-family: var(--alt-title-font);
  color: var(--black-color);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

#edit-avatar-container .edit-avatar a.menu-item:link,
#edit-avatar-container .edit-avatar a.menu-item:visited {
  color: var(--black-color);
}

#edit-avatar-container .edit-avatar a.menu-item:hover,
.edit-avatar input.edit-avatar-upload:focus + label,
.edit-avatar input.edit-avatar-upload + label:hover  {
  background-color: var(--orange-overlay);
  color: var(--white-color);
}

#edit-avatar-container .edit-avatar a.menu-item:active {
  background-color: var(--bright-blue-color);
  color: var(--white-color);
}

.edit-avatar input.edit-avatar-upload {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
/************************************/
/*       Backstage Form Style       */
/************************************/

#backstage-container form .title {
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 2.2em;
  margin-bottom: 1em;
}

#backstage-container form .item {
  margin-bottom: 1.2em;
  width: 100%;
}

#backstage-container form .item.extra-bottom {
  margin-bottom: 2em;
}

#backstage-container form .item.short-bottom {
  margin-bottom: 0.6em;
}

#backstage-container form .item.no-bottom {
  margin-bottom: 0em;
}

#backstage-container form .last-item {
  margin-top: 1em;
}

#backstage-container form label.text-field {
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 1em;
  margin-top: 0.5em;
}

#backstage-container form label.text-field.above {
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 1em;
  margin-bottom: 0.5em;
}

#backstage-container form label.text-field.read-only {
  color: var(--light-gray-color);
}

#backstage-container form input.text-field {
  color: var(--black-color);
  background: var(--white-color);
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 1.1em;
  border: none;
  border-bottom: 4px solid var(--black-color);
  outline: none;
  padding: 0em 0.25em 0.25em 0.25em;
}

#backstage-container form input.text-field:hover {
  border-bottom: 4px solid var(--bright-orange-color);
}

#backstage-container form input.text-field:focus {
  border-bottom: 4px solid var(--bright-blue-color);
}

#backstage-container form input.read-only.text-field {
  color: var(--gray-color);
  border-bottom: 4px solid var(--light-gray-color);
}

#backstage-container form input.read-only.text-field:hover {
  border-bottom: 4px solid var(--light-gray-color);
}

#backstage-container form input.small-text.text-field {
  font-size: 0.9em;
}

#backstage-container form textarea {
  color: var(--black-color);
  background: var(--white-color);
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 0.9em;
  line-height: 1.2em;
  border: 4px solid var(--black-color);
  outline: none;
  padding: 0.7em 0.6em 0.7em 0.6em;
  height: 6em;
  resize: none;
}

#backstage-container form textarea:hover {
  border: 4px solid var(--bright-orange-color);
}

#backstage-container form textarea:focus {
  border: 4px solid var(--bright-blue-color);
}

#backstage-container form label.checkbox {
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 0.8em;
}

#backstage-container form input.checkbox {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox;
  margin-right: 0.5em;
  margin-bottom: 0.37em;
}

#backstage-container form select {
  color: var(--black-color);
  background: var(--white-color);
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 0.8em;
  border: 2px solid var(--black-color);
  outline: none;
  height: 2.3em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#backstage-container form input[type="date"],
#backstage-container form input[type="time"] {
  color: var(--black-color);
  background: var(--white-color);
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 0.8em;
  border: 2px solid var(--black-color);
  outline: none;
  padding: 0.25em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#backstage-container form input[type="date"] {
  max-width: 10em;
}

#backstage-container form input[type="time"] {
  max-width: 7em;
}

#backstage-container form #story_published_on {
  margin-left: 2em;
}

#backstage-container form .flash {
  text-align: center;
  margin-bottom: 2em;
  font-size: 0.85em;
  color: var(--alert-red-color);
}

#backstage-container form .button {
  border: 4px solid var(--light-black-color);
  background-color: var(--bright-green-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.2em;
  padding: 0.75em 1em 0.75em 1em;
  text-transform: uppercase;
  text-align: center;
}

#backstage-container form .button.mini {
  border: 3px solid var(--light-black-color);
  font-weight: 400;
  font-size: 0.9em;
  padding: 0.5em 0.75em 0.5em 0.75em;
}

#backstage-container form .button.left-padded {
  margin-left: 1em;
}

#backstage-container form .button:hover {
  cursor: pointer;
  background-color: var(--bright-orange-color);
}

#backstage-container form .button:focus {
  cursor: pointer;
  background-color: var(--bright-blue-color);
  outline: none;
}

#backstage-container form .button:disabled {
  cursor: not-allowed;
  border: 4px solid var(--dark-white-color);
  background-color: var(--light-gray-color);
  color: var(--dark-white-color);
  outline: none;
}

#backstage-container form .button::-moz-focus-inner {
  border: 0 !important;
}

#backstage-container form a {
  font-size: 0.9em;
}

/************************************/
/*       Backstage Page Style       */
/************************************/

#backstage-container .session-box {
  width: 24em;
  background: #ffffff;
  padding: 2em 3em 2em 3em;
  border: solid 5px var(--black-color);
}

#backstage-container .control-panel {
  max-width: 54em;
  width: 100%;
  background: #ffffff;
  padding: 2em 3em 2em 3em;
  border: solid 5px var(--black-color);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; 
}


/************************************/
/*      Backstage Panel Style       */
/************************************/

#backstage-container .panel-title {
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 2em;
  margin-bottom: 0.2em;
  overflow-wrap: break-word;
  max-width: 100%;
}

#backstage-container .panel-text {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 1em;
  margin-top: 0.5em;
  margin-bottom: 1em;
}

#backstage-container .panel-descriptor {
  font-family: var(--body-font);
  font-weight: 500;
  font-size: 0.7em;
  color: var(--gray-color);
  text-align: right;
  line-height: 1.5em;
}

#backstage-container #watchable-toggle {
  position: relative;
  font-size: 1.2em;
  margin-left: 0.5em;
}

#backstage-container #watchable-toggle:before {
  position: absolute;
  width: 1.6em;
  height: 1.6em;
  top: -0.3em;
  left: -0.25em;
  border-radius: 100%;
  background: var(--light-gray-color);
  z-index: -10;
  display: none;
  content: "";
}

#backstage-container #watchable-toggle:hover:before {
  display: block;
}

#backstage-container #watchable-toggle.unwatched {
  font-family: var(--icon-font);
  color: var(--gray-color);
}

#backstage-container #watchable-toggle.watched {
  font-family: var(--solid-icon-font);
  color: var(--bright-fuchsia-color);
}

#backstage-container .panel-menu a {
  border: 4px solid var(--light-black-color);
  background-color: var(--bright-green-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.2em;
  padding: 0.75em 1em 0.75em 1em;
  text-transform: uppercase;
  text-align: center;
  margin-top: 1em;
}

#backstage-container .panel-menu a.compact {
  font-size: 1em;
  padding: 1.025em 1.2em 1.025em 1.2em;
}

#backstage-container .panel-menu a.half {
  width: 42.5%;
}

#backstage-container .panel-menu a.third {
  width: 25%;
}

#backstage-container .panel-menu a:hover {
  cursor: pointer;
  background-color: var(--bright-orange-color);
}

#backstage-container .panel-menu a:focus {
  cursor: pointer;
  background-color: var(--bright-blue-color);  
  outline: none;
}

#backstage-container .panel-filters {
  font-size: 0.75em;
  font-weight: 500;
  color: var(--gray-color);
}

#backstage-container .panel-filters a {
  padding-top: 0.5em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-bottom: 0.5em;
}

#backstage-container .panel-filters a.selected {
  font-weight: 700;
  color: var(--light-black-color);
}

#backstage-container .panel-filters a.selected.togglable {
  padding-right: 0em;
}

#backstage-container .panel-filters a.ordering {
  color: var(--light-black-color);
  font-family: var(--solid-icon-font);
}

#backstage-container .panel-filters a:hover {
  color: var(--bright-orange-color);
}


/************************************/
/*      Backstage Record Lists      */
/************************************/

#backstage-container .records-list {
  margin-top: 1em;
}

#backstage-container .record-row {
  position: relative;
  padding: 0.5em 1.25em 0.5em 1.25em;
  font-size: 0.85em;
  line-height: 1.75em;
}

#backstage-container .record-row.even {
  background: var(--medium-white-color);
}

#backstage-container .record-row.odd {
  background: var(--dark-white-color);
}

#backstage-container .record-row:hover {
  cursor: pointer;
  background: var(--orange-overlay); 
}

#backstage-container .record-row:active {
  cursor: pointer;
  background: var(--blue-overlay); 
}

#backstage-container .record-row .row-title {
  font-weight: 500;
  margin-right: 1em;
}

#backstage-container .record-row .row-detail {
  font-size: 0.8em;
}

#backstage-container .record-row .row-subtitle {
  font-size: 0.9em;
  margin-right: 0.9em;
}

#backstage-container .record-row .row-subtitle.small {
  font-size: 0.8em;
}

#backstage-container .record-row .row-subdetail {
  font-size: 0.8em;
}

#backstage-container .record-row .row-subdetail:not(:first-child) {
  margin-left: 1em;
}

#backstage-container .record-row .inline-icon {
  margin-right: 0.2em;
  font-family: var(--solid-icon-font), var(--icon-font);
}

#backstage-container .record-row .inline-icon img {
  display: block;
  height: 0.9em;
}


/************************************/
/*   Backstage Queue Status Colors  */
/************************************/

#backstage-container .record-row .commented {
  font-size: 0.75em;
  font-family: var(--solid-icon-font);
  color: var(--bright-blue-color);
  margin-left: 0.5em;
  margin-right: 0.1em;
}

#backstage-container .record-row .watched {
  font-size: 0.9em;
  font-family: var(--solid-icon-font);
  color: var(--bright-fuchsia-color);
  margin-left: 0.4em;
}

#backstage-container .record-row .row-detail.dismissed {
  font-weight: 700;
  color: var(--gray-color);
}

#backstage-container .record-row .row-detail.warned,
#backstage-container .record-row .row-detail.ignored {
  font-weight: 700;
  color: var(--bright-orange-color);
}

#backstage-container .record-row .row-detail.activated,
#backstage-container .record-row .row-detail.eligible,
#backstage-container .record-row .row-detail.reviewed {
 font-weight: 700;
 color: var(--bright-green-color);
}

#backstage-container .record-row .row-detail.revoked,
#backstage-container .record-row .row-detail.denied,
#backstage-container .record-row .row-detail.withdrawn  {
  font-weight: 700;
  color: var(--alert-red-color);
}


/************************************/
/*         Backstage Search         */
/************************************/

#backstage-container form#search {
  position: relative;
}

#backstage-container form input.search-box {
  position: relative;
  color: var(--black-color);
  background: var(--white-color);
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 0.9em;
  border: 2px solid var(--black-color);
  outline: none;
  padding: 0.3em 3.6em 0.2em 0.8em;
  width: 10em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  background-image: url(/images/search-icon.svg);
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 1em;
}

#backstage-container form input.search-box:hover {
  border: 2px solid var(--bright-orange-color); 
}

#backstage-container form input.search-box:focus {
  border: 2px solid var(--bright-blue-color); 
}

#backstage-container form input#search-clear {
  /* Text version */
  /*top: 0.8em;
  right: 2.2em;*/  
  position: absolute;
  top: 1em;
  right: 2.5em;
  width: 0.75em;
  background: none;
  color: var(--light-gray-color);
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 0.9em;
  border: none;
  outline: none;
  display: none;
}

#backstage-container form input#search-clear:hover {
  cursor: pointer;
  color: var(--gray-color);
}

#backstage-container form input#search-clear:active {
  color: var(--bright-fuchsia-color);
}

#backstage-container form input.search-box:not(:placeholder-shown) + input#search-clear {
  display: block;
}


/***********************************/
/*         Responsiveness          */
/***********************************/

@media (max-width:56em) {
  #backstage-container .control-panel {
    max-width: none;
    min-width: 30em;
  }
}

@media (max-width:54em) {
  #backstage-container .panel-menu a.half,
  #backstage-container .panel-menu a.third {
    width: 100%;
  }
}

@media (max-width:34em) {
  #backstage-container .session-box {
    width: auto;
    padding: 2em 2em 2em 2em;
  }
  
  #backstage-container .control-panel {
    min-width: 16em;
    padding: 2em 2em 2em 2em;
  }
  
  #backstage-container .panel-descriptor {
    text-align: left;
  }
}
/************************************/
/*     Changemakers Page Header     */
/************************************/

#changemakers .page-header {
  background: url(/images/changemakers-header.png) 70% 50% no-repeat;
  background-size: contain;
  background-color: var(--dark-fuchsia-color);
  height: 500px;
}

#changemakers img.logo-image {
  transform-origin: center left;
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  -moz-transition-duration: .5s;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  margin-left: 2em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


/************************************/
/*    Changemakers Page Sections    */
/************************************/

#changemakers .intro-section {
  max-width: 32em;
  min-width: 24em;
  width: 100%;
  font-size: 1.1em;
  margin-right: 2em;
}

#changemakers img.sponsorship-logo {
  margin: 0.5em 1em 0.5em 1em;
}

#changemakers img.sponsorship-logo.large {
  margin: 2em;
}

#changemakers img.feature-image {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  height: auto;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  max-width: 300px;
}

#changemakers img.feature-image.wide {
  max-width: 500px;
}

#changemakers img.feature-image.round {
  border-radius: 100%;
}

#changemakers .crowned-image {
  position: relative;
}

#changemakers img.crown {
  position: absolute;
  top: -8px;
  right: -20px;
}

#changemakers #bio-section {
  width: 100%;
  background: linear-gradient(300deg, #68236D 72%, var(--dark-fuchsia-color) 72%);
  margin-top: 5em;
  color: var(--white-color);
}

#changemakers #bio-section .page-section {
  margin-top: 5em;
  margin-bottom: 5em;
}

#changemakers .bio-subsection {
  max-width: 36em;
  width: 100%;
}

#changemakers #impact-section {
  width: 100%;
  background: url(/images/changemakers-background-a.jpg) 50% 70% no-repeat;
  background-size: cover;
  margin-top: 5em;
  color: var(--white-color);
}

#changemakers #impact-section .page-section {
  margin-top: 5em;
  margin-bottom: 5em;
}

#changemakers .impact-subsection {
  max-width: 35.4em;
  width: 100%;
  text-shadow: var(--black-color) 0px 0px 20px;
}

#changemakers .plans-subsection {
  max-width: 38em;
  width: 100%;
}

#changemakers .social-links {
  max-width: 24em;
}

#changemakers .social-links a {
  font-family: var(--icon-font);
  font-size: 5.5em;
  color: var(--bright-fuchsia-color);
  margin: 0.2em;
}

#changemakers .social-links a:hover {
  color: var(--bright-orange-color);  
}

#changemakers .social-links a:active {
  color: var(--bright-blue-color);  
}

#changemakers .subsection-title {
  text-align: center;
}

#changemakers .image-title {
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 1.4em;
  margin-bottom: 0.4em;
} 

#changemakers .image-subtitle {
  color: var(--gray-color);
  font-family: var(--title-font);
  margin-bottom: 1em;
} 

#changemakers .pull-quote {
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 3em;
  margin-top: 1em;
  margin-bottom: 1em;
}

#changemakers .qa-section p {
  font-size: 1em;
  line-height: 1.5em;
}

#changemakers .qa-subsection {
  margin-top: 1em;
  margin-bottom: 1em;
}

#changemakers .qa-subsection.wide {
  max-width: 50em;
}

#changemakers .qa-subsection.medium {
  max-width: 38em;
}

#changemakers #sponsors-section {
  width: 100%;
  background: linear-gradient(300deg, #68236D 72%, var(--dark-fuchsia-color) 72%);
  margin-top: 5em;
  color: var(--white-color);
}

#changemakers #sponsors-section .page-section {
  margin-top: 5em;
  margin-bottom: 5em;
}

#changemakers .sponsors-subsection {
  max-width: 30em;
  width: 100%;
}


/***********************************/
/*         Responsiveness          */
/***********************************/

@media (max-width:70em) {
  #changemakers .intro-section {
    margin-bottom: 1em;
    margin-right: 0em;
  }
  
  #changemakers img.logo-image {
    transform-origin: center left;
    -moz-transform: scale(.7);
    -webkit-transform: scale(.7);
    transform: scale(.7);
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
  }
}

@media (max-width:56em) {
  #changemakers .page-header {
    background-size: cover;
  }
  
  #changemakers img.logo-image {
    transform-origin: center left;
    -moz-transform: scale(.55);
    -webkit-transform: scale(.55);
    transform: scale(.55);
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
  }
}

@media (max-width:34em) {  
  #changemakers .intro-section {
    min-width: 16em;
  }
  
  #changemakers .pull-quote {
    font-size: 2em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }
  
  #changemakers img.logo-image {
    transform-origin: 90% 100%;
    -moz-transform: scale(.35);
    -webkit-transform: scale(.35);
    transform: scale(.35);
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
    margin-left: 0em;
  }
}

@media (max-width:30em) { 
  #changemakers img.logo-image {
    transform-origin: 70% 100%;
    -moz-transform: scale(.35);
    -webkit-transform: scale(.35);
    transform: scale(.35);
  }
}

@media (max-width:20em) {
  #changemakers img.logo-image {
    transform-origin: 55% 100%;
    -moz-transform: scale(.35);
    -webkit-transform: scale(.35);
    transform: scale(.35);
  }
}
/************************************/
/*      Comment Display Style       */
/************************************/

#backstage-container .comment-list {
  margin-top: 1em;
}

#backstage-container .comment-row {
  margin-bottom: 1em;
}

#backstage-container .comment-row:last-child {
  margin-bottom: 2em;
}

#backstage-container .comment-row .comment-avatar {
  min-width: 28px;
  min-height: 28px;
  border-radius: 14px;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  margin-right: 0.5em;
}

#backstage-container .comment-row .row-heading {
  margin-top: 0.1em;
}

#backstage-container .comment-row .row-title {
  font-weight: 500;
  font-size: 0.9em;
}

#backstage-container .comment-row .row-title a:hover {
  color: var(--bright-orange-color);
}

#backstage-container .comment-row .row-detail {
  font-size: 0.7em;
  color: var(--gray-color);
  margin-left: 0.7em;
}

#backstage-container .comment-row .comment-delete {
  position: relative;
  font-size: 0.8em;
  font-family: var(--solid-icon-font);
  color: var(--gray-color);
  background: none;
  border: 0px;
  border-radius: 100%;
  padding: 0.5em;
  margin-left: 0.2em;
}

#backstage-container .comment-row .comment-delete:hover {
  cursor: pointer;
  color: var(--light-black-color);
  background: var(--light-gray-color);
}

#backstage-container .comment-row .row-text {
  white-space: preserve wrap;
  font-size: 0.85em;
  margin-top: 0.5em;
}


/************************************/
/*        Comment Form Style        */
/************************************/

#backstage-container .commenter-avatar {
  min-width: 28px;
  min-height: 28px;
  border-radius: 14px;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  margin-right: 0.5em;
}

#backstage-container form#comment_box textarea {
  color: var(--black-color);
  background: var(--white-color);
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 0.85em;
  line-height: 1.2em;
  border: 3px solid var(--light-black-color);
  background: var(--dark-white-color);
  outline: none;
  padding: 0.7em 0.6em 0.7em 0.6em;
  height: 35px; /* Necessary scrollHeight for autoresize magic */
  resize: none;
  overflow-y: hidden;
}

#backstage-container form#comment_box textarea:hover {
  border: 3px solid var(--bright-blue-color);
}

#backstage-container form#comment_box textarea:focus {
  border: 3px solid var(--bright-blue-color);
}

#backstage-container form#comment_box .comment-buttons .button {
  border: 3px solid var(--light-black-color);
  color: var(--white-color);
  background: var(--bright-blue-color);
  font-family: var(--title-font);
  font-weight: 400;
  font-size: 0.9em;
  padding: 0.5em 0.75em 0.5em 0.75em;
  text-transform: uppercase;
  text-align: center;
  min-width: none;
  margin-left: 2em;
}

#backstage-container form#comment_box .comment-buttons .button:hover {
  cursor: pointer;
  background-color: var(--bright-fuchsia-color);
}

#backstage-container form#comment_box .comment-buttons .button:focus {
  cursor: pointer;
  background-color: var(--bright-fuchsia-color);
  outline: none;
}
/************************************/
/*        Concern Form Style        */
/************************************/

#concern form {
  border: 5px solid var(--dark-blue-color);
  background: var(--faint-blue-overlay);
  padding: 2em 2em 2.5em 2em;
  margin-bottom: 3em;
}

#concern form .title {
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 2.5em;
  margin-bottom: 1em;
}

#concern form .intro {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 1em;
  line-height: 1.4em;
  margin-bottom: 2.5em;
}

#concern form .item {
  margin-bottom: 1.2em;
  width: 100%;
}

#concern form .item.half-width {
  max-width: 17em;
}

#concern form label.text-field {
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 0.8em;
  margin-bottom: 0.3em;
}

#concern form #concern-background-counter,
#concern form #concern-description-counter,
#concern form #concern-recommended-response-counter {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 0.8em;
  color: var(--black-color);
}

#concern form .description {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 0.8em;
  margin-bottom: 0.3em;
}

#concern form .description.smaller {
  font-size: 0.78em;
}

#concern form input.text-field {
  color: var(--black-color);
  background: var(--white-color);
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 1.1em;
  border: 4px solid var(--dark-blue-color);
  outline: none;
  padding: 0.8em 1em 0.7em 1em;
}

#concern form select {
  color: var(--black-color);
  background: var(--white-color);
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 1.1em;
  border: 4px solid var(--dark-blue-color);
  outline: none;
  padding: 0.9em 1em 0.8em 1em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  
  /** Use Bootstrap's hack for adjusting the dropdown indicator so it respects padding **/
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1em;
}

#concern form textarea {
  color: var(--black-color);
  background: var(--white-color);
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 0.9em;
  line-height: 1.2em;
  border: 4px solid var(--dark-blue-color);
  outline: none;
  padding: 0.7em 0.6em 0.7em 0.6em;
  height: 6em;
  resize: none;
}

#concern form input.text-field:hover,
#concern form select:hover,
#concern form textarea:hover {
  border: 4px solid var(--bright-orange-color);
}

#concern form input.text-field:focus,
#concern form select:focus,
#concern form textarea:focus {
  border: 4px solid var(--bright-blue-color);
}

#concern form .flash {
  text-align: center;
  margin-bottom: 2.5em;
  font-size: 0.85em;
  color: var(--alert-red-color);
}

#concern form .button {
  border: 5px solid var(--light-gray-color);
  background-color: var(--dark-blue-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.5em;
  padding: .75em;
  margin-top: 1.5em;
  text-transform: uppercase;
}

#concern form .button:hover {
  cursor: pointer;
  background-color: var(--bright-blue-color);
}

#concern form .button:focus {
  cursor: pointer;
  background-color: var(--bright-blue-color);  
  outline: none;
}

#concern form .button::-moz-focus-inner {
  border: 0 !important;
}


/***********************************/
/*         Responsiveness          */
/***********************************/

@media (max-width:42em) {
  #concern form .item.half-width {
    max-width: none;
  }
}
/************************************/
/*       Concern Page Sections      */
/************************************/

#concern .page-section {
  max-width: 43em;
}


/************************************/
/*     Backstage Concern Review     */
/************************************/

#backstage-container .concern-item {
  margin-top: 1.25em;
  width: 100%;
  overflow-wrap: break-word;
}

#backstage-container .concern-item.flush-top {
  margin-top: 0em;
}

#backstage-container .concern-item.half-width {
  max-width: 20em;
}

#backstage-container .concern-item .item-title {
  font-weight: 600;
  font-size: 0.9em;
  margin-bottom: 0.2em;
}

#backstage-container .concern-item .item-title.large {
  font-weight: 600;
  font-size: 1.1em;
}

#backstage-container .concern-item .item-title .icon {
  position: relative;
  font-family: var(--solid-icon-font);
  margin-right: 0.3em;
}

#backstage-container .concern-item .item-text {
  font-size: 1em;
}

#backstage-container .concern-item .item-text.empty {
  font-size: 0.8em;
  font-weight: 700;
  margin-top: 0.3em;
  color: var(--light-gray-color);
}

#backstage-container .concern-item .item-text.small {
  font-size: 0.9em;
  white-space: preserve;
}

#backstage-container .concern-item .item-text img {
  height: 1em;
  margin-right: 0.4em;
}

#backstage-container .concern-item a.cert_code {
  font-size: 0.8em;
  font-weight: 500;
  margin-left: 6px;
  padding: 4px 4px 2px 4px;
  color: var(--white-color);
  background: var(--bright-green-color);
}

#backstage-container .concern-item a.cert_code:hover {
  background: var(--bright-orange-color);
}

#backstage-container .concern-item a.cert_code:active {
  background: var(--bright-blue-color);
}

#backstage-container .concern-item .concern-screenshot-container {
  width: 10em;
  margin-bottom: 1em;
}

#backstage-container .concern-item .concern-screenshot-caption {
  font-size: 0.7em;
  margin-top: 0.5em;
}


/************************************/
/*   Concern Screenshot Overlays    */
/************************************/

#backstage-container .concern-item .concern-screenshot {
  position: relative;
}

#backstage-container .concern-item .concern-screenshot-overlay  {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--black-overlay);
  color: var(--white-color);
  cursor: pointer;
}

#backstage-container .concern-item .concern-screenshot-overlay .action {
  background-color: var(--white-overlay);
  font-family: var(--alt-title-font);
  font-weight: 400;
  font-size: 0.7em;
  text-align: center;
  color: var(--white-color);
  padding: 0.8em 1em 0.8em 1em;
}


/************************************/
/*     Backstage Concern Buttons    */
/************************************/

#backstage-container .concern-buttons {
  margin-top: 2em;
}

#backstage-container .concern-buttons .button {
  border: 4px solid var(--light-black-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.2em;
  padding: 0.75em 1em 0.75em 1em;
  text-transform: uppercase;
  text-align: center;
  min-width: 4.5em;
  margin-left: 2em;
}

#backstage-container .concern-buttons .button.mini {
  border: 3px solid var(--light-black-color);
  font-weight: 400;
  font-size: 0.9em;
  padding: 0.5em 0.75em 0.5em 0.75em;
  min-width: none;
}

#backstage-container .concern-buttons .button.back-button {
  background-color: var(--light-black-color);
}

#backstage-container .concern-buttons .button.dismiss-button {
  background-color: var(--gray-color);
}

#backstage-container .concern-buttons .button.close-button,
#backstage-container .concern-buttons .button.undismiss-button {
  background-color: var(--bright-green-color);
}

#backstage-container .concern-buttons .button:hover {
  cursor: pointer;
  background-color: var(--bright-blue-color);
}

#backstage-container .concern-buttons .button:focus {
  cursor: pointer;
  background-color: var(--bright-blue-color);
  outline: none;
}

#backstage-container .concern-buttons .button::-moz-focus-inner {
  border: 0 !important;
}


/***********************************/
/*         Responsiveness          */
/***********************************/

@media (max-width:46em) {
  #backstage-container .concern-buttons .button {
    width: 100%;
    margin-left: 0em;
    margin-top: 2em;
  }
}
/************************************/
/*       Contact Page Header        */
/************************************/

#contact .page-header {
  background: url(/images/contact-background.jpg) 50% 60% no-repeat;
  background-size: cover;
  height: 250px;
}

#contact .page-header .title {
  margin-left: 1.4em;
  color: var(--white-color);
  text-shadow: var(--black-color) 0px 0px 30px;
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 3em;
}



/************************************/
/*        Contact Page Body         */
/************************************/

#contact .intro-section {
  max-width: 38em;
  width: 100%;
  font-size: 1.1em;
}

#contact .action-box {
  max-width: 22em;
  width: 100%;
  border: 5px solid var(--bright-fuchsia-color);
  background-color: var(--light-fuchsia-overlay);
  padding: 2.5em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; 
}

#contact .action-box .heading {
  font-weight: 600;
  font-size: 1.4em;
}

#contact .action-box .heading:not(:first-child) {
  margin-top: 1.8em;
}

#contact .action-box .subheading {
  font-weight: 600;
  font-size: 1.15em;
  margin-top: 2.2em;
  margin-bottom: 0.8em;
}

#contact .action-box p {
  font-size: 1em;
} 

#contact .action-box a.inline {
  border-bottom: 2px solid var(--bright-fuchsia-color);
}

#contact .action-box a.inline:hover {
  border-bottom: 2px solid var(--bright-orange-color);
}

#contact .action-box a.inline:active {
  border-bottom: 2px solid var(--bright-blue-color);
}

#contact .social-links a {
  font-family: var(--icon-font);
  font-size: 1.7em;
  color: var(--bright-fuchsia-color);
}

#contact .social-links a:hover {
  color: var(--bright-orange-color);  
}

#contact .social-links a:active {
  color: var(--bright-blue-color);  
}

#contact .social-links a:not(:last-child) {
  margin-right: 0.6em;
}


/***********************************/
/*         Responsiveness          */
/***********************************/

@media (max-width:68em) {
  #contact .intro-section {
    margin-bottom: 2em;
  }
}
/************************************/
/*      Data Policy Page Header     */
/************************************/

#data-policy .page-header {
  background: url(/images/data-policy-background.jpg) 50% 40% no-repeat;
  background-size: cover;
  height: 250px;
}

#data-policy .page-header .title {
  margin-left: 1.4em;
  color: var(--white-color);
  text-shadow: var(--black-color) 0px 0px 30px;
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 3em;
}



/************************************/
/*      Data Policy Page Body       */
/************************************/

#data-policy .intro-section {
  max-width: 38em;
  width: 100%;
  font-size: 1.1em;
}

#data-policy .action-box {
  max-width: 22em;
  width: 100%;
  border: 5px solid var(--bright-green-color);
  background-color: var(--light-green-overlay);
  padding: 2.5em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; 
}

#data-policy .action-box .heading {
  font-weight: 600;
  font-size: 1.4em;
}

#data-policy .action-box p {
  font-size: 1em;
} 

#data-policy .action-box a.inline {
  border-bottom: 2px solid var(--bright-green-color);
}

#data-policy .action-box a.inline:hover {
  border-bottom: 2px solid var(--bright-orange-color);
}

#data-policy .action-box a.inline:active {
  border-bottom: 2px solid var(--bright-blue-color);
}


/***********************************/
/*         Responsiveness          */
/***********************************/

@media (max-width:68em) {
  #data-policy .intro-section {
    margin-bottom: 2em;
  }
}
/************************************/
/*        Donate Page Header        */
/************************************/

#donate .page-header {
  background: url(/images/about-feature-d.jpg) 50% 55% no-repeat;
  background-size: cover;
  height: 400px;
}

#donate .page-header .title {
  margin-left: 1.4em;
  color: var(--white-color);
  text-shadow: var(--black-color) 0px 0px 30px;
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 3em;
}

#donate .page-header .title .heart {
  color: var(--bright-blue-color);
  font-family: var(--solid-icon-font);
  font-size: 0.9em;
  margin-left: 0.2em;
}


/************************************/
/*          Donate Page             */
/************************************/

#donate .intro-section {
  max-width: 34em;
  width: 100%;
  font-size: 1.2em;
}

#donate img.feature-image {
  max-width: 408px;
  height: auto;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}

#donate #donation-section {
  width: 100%;
  background: linear-gradient(315deg, var(--dark-blue-color) 28%, var(--bright-blue-color) 28%);
  margin-top: 5em;
  color: var(--white-color);
}

#donate #donation-section .page-section {
  margin-top: 5em;
  margin-bottom: 5em;
}

#donate #donation-section .section-title {
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 3em;
  margin-bottom: 0.3em;
}

#donate #donation-section .text-section {
  font-size: 1.1em;
  font-weight: 500;
  max-width: 34em;
  width: 100%;
}

#donate #donation-section div.text-section p {
  line-height: 1.6em;
}

#donate #donation-section .amounts-section {
  width: 100%;
  max-width: 24em;
}
  
#donate #donation-section button {
  border: 5px solid var(--white-color);
  background-color: var(--bright-green-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.6em;
  padding: .4em .75em .45em .75em;
  margin-top: 1.5em;
  margin-left: 0.2em;
  margin-right: 0.2em;
  text-transform: uppercase;
  max-width: 13.5em;
  white-space: normal;
  text-align: center;
  line-height: 1.4em;
}

#donate #donation-section button.narrow {
  padding: .4em .55em .45em .55em;
}

#donate #donation-section button:hover {
  cursor: pointer;
  background-color: var(--bright-orange-color);
}

#donate #donation-section button:active {
  cursor: pointer;
  background-color: var(--bright-blue-color);  
  outline: none;
}

#donate #donation-section button::-moz-focus-inner {
  border: 0 !important;
}




/************************************/
/*          Donate Success          */
/************************************/

#donate .button-wrap {
  width: 100%;
}

#donate .social-share {
  margin-bottom: 2em;
}

#donate .social-button {
  border: 5px solid var(--dark-blue-color);
  background-color: var(--bright-blue-color);
  color: var(--white-color);
  font-family: var(--title-font), var(--icon-font);
  font-weight: 500;
  font-size: 1.2em;
  padding: .75em 1.5em .75em 1.5em;
  margin-top: 2em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  min-width: 6em;
}

#donate .social-button:hover {
  cursor: pointer;
  background-color: var(--bright-orange-color);
  border: 5px solid var(--dark-orange-color);
}

#donate .social-button:active {
  cursor: pointer;
  background-color: var(--bright-blue-color);
  border: 5px solid var(--dark-blue-color);
  outline: none;
}

#donate .social-button::-moz-focus-inner {
  border: 0 !important;
} 



/***********************************/
/*         Responsiveness          */
/***********************************/

@media (max-width:70em) {
  #donate .intro-section {
    margin-bottom: 2em;
  }
}

@media (max-width:38em) {
  #donate .social-button {
    width: 100%;
  }
}
/**************************************************************/
/*  Flexbox Ultralight                                        */
/*  Version 1.0                                               */
/*  by Johanna Brewer                                         */
/*  Copyright 2019                                            */
/*  Download: https://github.com/deadroxy/flexbox-ultralight  */
/**************************************************************/

.flexbox {
  display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
  display: -moz-box;      /* OLD: Firefox (buggy) */
  display: -ms-flexbox;   /* MID: IE 10 */
  display: -webkit-flex;  /* NEW, Chrome 21+ */
  display: flex;          /* NEW: Opera 12.1, Firefox 22+ */
}

.flexbox.horizontal {
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}

.flexbox.horizontal-reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse; 
  -moz-box-orient: horizontal;
  -moz-box-direction: reverse; 
  -ms-flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.flexbox.vertical {
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.flexbox.vertical-reverse {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse; 
  -moz-box-orient: vertical;
  -moz-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

.flexbox.center {
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.flexbox.start {
  -webkit-box-align: start;
  -moz-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

.flexbox.end {
  -webkit-box-align: end;
  -moz-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}

.flexbox.stretch {
  -webkit-box-align: stretch;
  -moz-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
}

.flexbox.flex-0 {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -webkit-flex: 0;
  -ms-flex: 0;
  flex: 0;
}

.flexbox.flex-1 {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.flexbox.wrap {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flexbox.wrap-reverse {
  -webkit-flex-wrap: wrap-reverse;
  -ms-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}

.flexbox.justify-space-between {
  -webkit-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
}

.flexbox.justify-space-around {
  -webkit-justify-content: space-around;
  -ms-justify-content: space-around;
  justify-content: space-around;
}
@font-face {
    font-family: 'Nevis';
    src: url(/type/nevis/Nevis.eot);
    src: url(/type/nevis/Nevis.eot?#iefix) format('embedded-opentype'),
         url(/type/nevis/Nevis.woff2) format('woff2'),
         url(/type/nevis/Nevis.woff) format('woff'),
         url(/type/nevis/Nevis.ttf) format('truetype'),
         url(/type/nevis/Nevis.svg#webfontbold) format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url(/type/gotham/Gotham-Book.eot);
    src: url(/type/gotham/Gotham-Book.eot?#iefix) format('embedded-opentype'),
         url(/type/gotham/Gotham-Book.woff2) format('woff2'),
         url(/type/gotham/Gotham-Book.woff) format('woff'),
         url(/type/gotham/Gotham-Book.ttf) format('truetype'),
         url(/type/gotham/Gotham-Book.svg#Gotham-Book) format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url(/type/gotham/Gotham-BookItalic.eot);
    src: url(/type/gotham/Gotham-BookItalic.eot?#iefix) format('embedded-opentype'),
         url(/type/gotham/Gotham-BookItalic.woff2) format('woff2'),
         url(/type/gotham/Gotham-BookItalic.woff) format('woff'),
         url(/type/gotham/Gotham-BookItalic.ttf) format('truetype'),
         url(/type/gotham/Gotham-BookItalic.svg#Gotham-BookItalic) format('svg');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Gotham';
    src: url(/type/gotham/Gotham-Medium.eot);
    src: url(/type/gotham/Gotham-Medium.eot?#iefix) format('embedded-opentype'),
         url(/type/gotham/Gotham-Medium.woff2) format('woff2'),
         url(/type/gotham/Gotham-Medium.woff) format('woff'),
         url(/type/gotham/Gotham-Medium.ttf) format('truetype'),
         url(/type/gotham/Gotham-Medium.svg#Gotham-Medium) format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url(/type/gotham/Gotham-Bold.eot);
    src: url(/type/gotham/Gotham-Bold.eot?#iefix) format('embedded-opentype'),
         url(/type/gotham/Gotham-Bold.woff2) format('woff2'),
         url(/type/gotham/Gotham-Bold.woff) format('woff'),
         url(/type/gotham/Gotham-Bold.ttf) format('truetype'),
         url(/type/gotham/Gotham-Bold.svg#Gotham-Bold) format('svg');
    font-weight: 700;
    font-style: normal;
}

@font-face {
  font-family: 'FontAwesome';
  src: url(/type/fontawesome/fa-regular-400.eot);
  src: url(/type/fontawesome/fa-regular-400.eot?#iefix) format('embedded-opentype'),
       url(/type/fontawesome/fa-regular-400.woff2) format('woff2'),
       url(/type/fontawesome/fa-regular-400.woff) format('woff'),
       url(/type/fontawesome/fa-regular-400.ttf) format('truetype'),
       url(/type/fontawesome/fa-regular-400.svg#fontawesome) format('svg');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'FontAwesomeSolid';
  src: url(/type/fontawesome/fa-solid-900.eot);
  src: url(/type/fontawesome/fa-solid-900.eot?#iefix) format("embedded-opentype"),
       url(/type/fontawesome/fa-solid-900.woff2) format("woff2"),
       url(/type/fontawesome/fa-solid-900.woff) format("woff"),
       url(/type/fontawesome/fa-solid-900.ttf) format("truetype"),
       url(/type/fontawesome/fa-solid-900.svg#fontawesome) format("svg");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'FontAwesomeBrands';
  src: url(/type/fontawesome/fa-brands-400.eot);
  src: url(/type/fontawesome/fa-brands-400.eot?#iefix) format('embedded-opentype'),
       url(/type/fontawesome/fa-brands-400.woff2) format('woff2'),
       url(/type/fontawesome/fa-brands-400.woff) format('woff'),
       url(/type/fontawesome/fa-brands-400.ttf) format('truetype'),
       url(/type/fontawesome/fa-brands-400.svg#fontawesome) format('svg');
  font-weight: 400;
  font-style: normal;
}



/************************************/
/*           Footer Style           */
/************************************/

#footer {
  background: var(--black-color);
  color: var(--white-color);
  font-size: 1em;
  margin-top: 4em;
}

#footer-content {
  width: 100%;
  padding-top: 1em;
}

@media (min-width:80em) {
  #footer-content {
    width: 80em;
  }
}

#footer-content .creators,
#footer-content .sponsors,
#footer-content .social-links,
#footer-content .reporting {
  margin-right: 1em;
  margin-left: 1em;
  padding-top: 1em;
  padding-bottom: 2em;
}

#footer-content .creators,
#footer-content .sponsors {
  font-size: 0.85em;
}

#footer-content .reporting {
  font-size: 0.85em;
}

#footer-content .reporting a {
  margin-top: 0.7em;
  font-size: 1em;
  font-weight: 500;
}

#footer-content img.left-logo {
  margin-right: 1em;
}

#footer-content .creators img:not(.left-logo):hover {
  border-bottom: 2px solid var(--bright-green-color);
  margin-bottom: -2px;
}

#footer-content .creators img:not(.left-logo):active {
  border-bottom: 2px solid var(--bright-blue-color);
  margin-bottom: -2px;
}

#footer-content .sitemap {
  padding-bottom: 2em;
}

#footer-content .sitemap .column {
  margin-right: 0.8em;
  margin-left: 0.8em;
  padding-top: 1em;
}

#footer-content .sitemap a {
  font-size: 0.85em;
  font-weight: 400;
}

#footer-content .sitemap a:not(:first-child) {
  margin-top: 0.7em;
}

#footer-content .social-links .top-row {
  margin-bottom: 1.2em;
}

#footer-content .social-links a {
  font-family: var(--icon-font);
  font-size: 2em;
}

#footer-content .social-links a:hover {
  color: var(--bright-green-color);  
}

#footer-content .social-links a:active {
  color: var(--bright-blue-color);  
}

#footer-content .social-links a:not(:last-child) {
  margin-right: 0.6em;
}

#footer-content img.sponsorship-logo {
  margin-right: 1em;
}
/************************************/
/*        Global Definitions        */
/************************************/

* {
  margin: 0;
  padding: 0;
  z-index: 1;
}

html, body {
  height: 100%;
}

body {
  font-size: 12pt;
  -webkit-text-size-adjust:none;
  -moz-text-size-adjust:none;
  -ms-text-size-adjust:none;
  -webkit-text-size-adjust:100%;
  -moz-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
}

#site-container,
#backstage-container {
  position: relative;
  width: 100%;
  height: 100%;
  height: auto !important;
  min-height: 100%;
  font-family: var(--body-font);
  font-weight: 400;
  color: var(--black-color);
  background: var(--white-color);
}

#backstage-container {
  background: var(--dark-white-color);
}

input {
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type=date]::-webkit-inner-spin-button,
input[type=time]::-webkit-inner-spin-button,
input[type=date]::-webkit-outer-spin-button,
input[type=time]::-webkit-outer-spin-button,
input[type=date]::-webkit-clear-button,
input[type=time]::-webkit-clear-button {
  -webkit-appearance: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
}

/************************************/
/*        Flash Notice Style        */
/************************************/

.flash#notice {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: 30%;
  margin-right: 30%;
  z-index: 1000;
  text-align: center;
  font-size: 0.9em;
  padding: 1.5em 3.5em 1.5em 3.5em;
  border: 5px solid var(--white-color);
  background-color: var(--bright-green-color);
  color: var(--white-color);
}

#backstage-container .flash#notice {
  position: relative;
  margin-bottom: -2em;
}

@media (max-width:48em) {
  .flash#notice {
    border: 3px solid var(--white-color);
  }
}

@media (max-width:34em) {
  .flash#notice {
    margin-left: 5%;
    margin-right: 5%;
  }
}

/************************************/
/*           Link Style             */
/************************************/

a {
  color: inherit;
  text-decoration: none;
}

a.inline:hover,
a.stealth:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--bright-green-color);
  margin-bottom: -2px;
  text-shadow: var(--bright-green-color) 0px 0px 200px;
}

a.inline:active,
a.stealth:active {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--bright-blue-color);
  margin-bottom: -2px;
  text-shadow: var(--bright-blue-color) 0px 0px 200px;
}

a.inline {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--bright-orange-color);
  margin-bottom: -2px;
  text-shadow: none;
  overflow-wrap: break-word;
}
/************************************/
/*          Header Style            */
/************************************/

#header {
  background-color: var(--black-color);
  height: 3em;
  z-index: 100;
}

#header-content {
  height: 3em;
  width: 100%;
}

@media (min-width:80em) {
  #header-content {
    width: 80em;
  }
}

#header-content a.logo {
  color: var(--white-color);
  text-decoration: none;
  font-family: var(--title-font);
  font-size: 1.4em;
  margin-left: 1.25em;
  border-bottom: none;
}

#header-content a.logo img {
  margin-right: 0.2em;
}

#header-content a.item {
  color: var(--white-color);
  text-decoration: none;
  font-family: var(--alt-title-font), var(--solid-icon-font);
  font-weight: 500;
  font-size: 0.9em;
  margin-right: 1.1em;
}

#header-content a.item.last {
  margin-right: 1.9em;
}

#header-content #veggieburger {
  display: none;
  color: var(--white-color);
}

#header-content #veggieburger a {
  font-size: 1.5em;
  line-height: 1.5em;
  margin-left: 0.5em;
  margin-right: 0.5em;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#header-content #veggieburger a:hover {
  text-shadow: var(--bright-green-color) 0px 0px 100px;
}

#veggieburger-menu {
  background-color: var(--black-color);
  color: var(--white-color);
  font-family: var(--alt-title-font);
  font-weight: 500;
  font-size: 1em;
  width: 100%;
  padding-top: 0.8em;
  padding-bottom: 0.8em;
  position: absolute;
  top: 40px;
  z-index: 10;
}

#veggieburger-menu .row {
  height: 3.5em;
  line-height: 4em;
}

#veggieburger-menu a {
  margin-left: 1.75em;
}

#header-content a.item.selected,
#header-content a.item:hover,
#veggieburger-menu a.selected,
#veggieburger-menu a:hover,
#header-content a.item.selected.pledge,
#header-content a.item.pledge:hover,
#veggieburger-menu a.selected.pledge,
#veggieburger-menu a.pledge:hover {
  margin-bottom: -2px;
  border-bottom: 2px solid var(--bright-green-color);
}

#header-content a.item.selected.affiliates,
#header-content a.item.affiliates:hover,
#veggieburger-menu a.selected.affiliates,
#veggieburger-menu a.affiliates:hover {
  margin-bottom: -2px;
  border-bottom: 2px solid var(--bright-orange-color);
}

#header-content a.item.selected.resources,
#header-content a.item.resources:hover,
#veggieburger-menu a.selected.resources,
#veggieburger-menu a.resources:hover {
  margin-bottom: -2px;
  border-bottom: 2px solid var(--bright-blue-color);
}

#header-content a.item.selected.stories,
#header-content a.item.stories:hover,
#veggieburger-menu a.selected.stories,
#veggieburger-menu a.stories:hover {
  margin-bottom: -2px;
  border-bottom: 2px solid var(--bright-fuchsia-color);
}

#header-content a.item.donate .heart,
#veggieburger-menu a.donate .heart {
  color: var(--bright-green-color);
  font-family: var(--solid-icon-font);
  font-size: 0.9em;
}

#header-content #header-avatar-container {
  width: 28px;
  height: 28px;
  margin-right: 2em;
}

#header-content #header-avatar-container:hover {
  cursor: pointer;
}

#header-content img.header-avatar {
  min-width: 28px;
  min-height: 28px;
  border-radius: 14px;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
}

#header-content #dropdown-container {
  position: relative;
  top: 0px;
  right: -3px;
}

#header-content #dropdown-container .outer-caret {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 0px;
  height: 0px;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 18px solid var(--black-color);
}

#header-content #dropdown-container .inner-caret {
  position: absolute;
  width: 0px;
  height: 0px;
  top: 4px;
  right: 4px;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 14px solid var(--white-color);
  z-index: 100;
}

#header-content #dropdown-container .dropdown-menu {
  position: relative;
  top: 14px;
  right: -14px;
  background-color: var(--white-color);
  border: 3px solid var(--black-color);
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}

#header-content #dropdown-container .dropdown-menu a.menu-item {
  padding: 1em 1em 1em 1em;
  margin-left: 0em;
  margin-right: 0em;
  font-size: 0.8em;
  font-family: var(--alt-title-font);
  font-weight: 500;
  color: var(--black-color);
  text-decoration: none;
  white-space: nowrap;
}

#header-content #dropdown-container .dropdown-menu a.menu-item:link,
#header-content #dropdown-container .dropdown-menu a.menu-item:visited {
  color: var(--black-color);
}

#header-content #dropdown-container .dropdown-menu a.menu-item:hover {
  background-color: var(--orange-overlay);
  color: var(--white-color);
}

#header-content #dropdown-container .dropdown-menu a.menu-item:active {
  background-color: var(--bright-blue-color);
  color: var(--white-color);
}


/***********************************/
/*         Responsiveness          */
/***********************************/

@media (max-width:54em) {
  #header-content #full-menu {
    display: none;
  }
  
  #header-content #veggieburger {
    display: inherit;
  }
}

@media (min-width:54em) {
  #veggieburger-menu {
    display: none !important;
  }
}
/************************************/
/*        Home Page Header          */
/************************************/

@keyframes anime {
  0%   { opacity: 1; }
  30%  { opacity: 1; }
  33%  { opacity: 0; }
  97%  { opacity: 0; }
  100% { opacity: 1; }
}

#home .page-header .background:nth-of-type(1) {
  background-image: url(/images/home-header-c.jpg);
  animation-delay: 11s;
}
#home .page-header .background:nth-of-type(2) {
  background-image: url(/images/home-header-b.jpg);
  animation-delay: 5.5s;
}
#home .page-header .background:nth-of-type(3) {
  background-image: url(/images/home-header-a.jpg);
  animation-delay: 0s;
}

#home .page-header .background {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  animation: anime 16.5s linear infinite 0s;
  color: transparent;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center center;
}

#home .page-header .title {
  margin-left: 1.4em;
  color: var(--white-color);
  text-shadow: var(--black-color) 0px 0px 30px;
}

#home .page-header .title .line-a {
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 3.5em;
  line-height: 1.1em;
  margin-bottom: 0.1em;
}

#home .page-header .title .line-b {
  font-family: var(--body-font);
  font-weight: 500;
  font-size: 2.4em;
  line-height: 1.4em;
}


/************************************/
/*        Home Page Sections        */
/************************************/

#home .intro-section {
  max-width: 38em;
  width: 100%;
  font-size: 1.1em;
}

#home img.feature-image {
  margin: 1.5em;
  max-width: 408px;
  height: auto;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}

#home #glhf-section {
  width: 100%;
  background: url(/images/home-background-a.jpg) 40% 35% no-repeat;
  background-size: cover;
  margin-top: 5em;
  color: var(--white-color);
}

#home #glhf-section .page-section {
  margin-top: 5em;
  margin-bottom: 5em;
}

#home #glhf-section .text-section {
  font-size: 1.1em;
  font-weight: 500;
  max-width: 34em;
  width: 100%;
  text-shadow: var(--black-color) 0px 0px 20px;
}

#home #glhf-section div.text-section p {
  line-height: 1.6em;
}

#home #glhf-section .button {
  border: 5px solid var(--white-color);
  background-color: var(--bright-green-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.6em;
  padding: .4em .75em .45em .75em;
  margin-top: 1.5em;
  text-transform: uppercase;
  max-width: 13.5em;
  white-space: normal;
  text-align: center;
  line-height: 1.4em;
}

#home #glhf-section .button:hover {
  cursor: pointer;
  background-color: var(--bright-orange-color);
}

#home #glhf-section .button:focus {
  cursor: pointer;
  background-color: var(--bright-blue-color);
  outline: none;
}

#home #glhf-section .button::-moz-focus-inner {
  border: 0 !important;
}

#home #glhf-section .button .detail-text {
  color: var(--dark-green-color);
  font-size: 0.9em;
  text-transform: none;
}

#home #glhf-section .button:hover .detail-text,
#home #glhf-section .button:focus .detail-text {
  color: var(--white-color);
}

#home #inclusion-101-section {
  width: 100%;
  background: url(/images/inclusion-header.jpg) 50% 55% no-repeat;
  background-size: cover;
  margin-top: 5em;
  color: var(--white-color);
}

#home #inclusion-101-section .page-section {
  margin-top: 5em;
  margin-bottom: 5em;
}

#home #inclusion-101-section .text-section {
  font-size: 1.1em;
  font-weight: 500;
  max-width: 34em;
  width: 100%;
  text-shadow: var(--black-color) 0px 0px 20px;
}

#home #inclusion-101-section div.text-section p {
  line-height: 1.6em;
}

#home #inclusion-101-section .button {
  border: 5px solid var(--white-color);
  background-color: var(--bright-blue-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.6em;
  padding: .4em .75em .45em .75em;
  margin-top: 1.5em;
  text-transform: uppercase;
  max-width: 13.5em;
  white-space: normal;
  text-align: center;
  line-height: 1.4em;
}

#home #inclusion-101-section .button:hover {
  cursor: pointer;
  background-color: var(--bright-orange-color);
}

#home #inclusion-101-section .button:focus {
  cursor: pointer;
  background-color: var(--bright-blue-color);
  outline: none;
}

#home #inclusion-101-section .button::-moz-focus-inner {
  border: 0 !important;
}

#home #verification-section {
  width: 100%;
  background: url(/images/verification-header.jpg) 50% 55% no-repeat;
  background-size: cover;
  margin-top: 5em;
  color: var(--white-color);
}

#home #verification-section .page-section {
  margin-top: 5em;
  margin-bottom: 5em;
}

#home #verification-section .text-section {
  font-size: 1.1em;
  font-weight: 500;
  max-width: 34em;
  width: 100%;
  text-shadow: var(--black-color) 0px 0px 20px;
}

#home #verification-section div.text-section p {
  line-height: 1.6em;
}

#home #verification-section .button {
  border: 5px solid var(--white-color);
  background-color: var(--bright-fuchsia-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.6em;
  padding: .4em .75em .45em .75em;
  margin-top: 1.5em;
  text-transform: uppercase;
  max-width: 13.5em;
  white-space: normal;
  text-align: center;
  line-height: 1.4em;
}

#home #verification-section .button:hover {
  cursor: pointer;
  background-color: var(--bright-orange-color);
}

#home #verification-section .button:focus {
  cursor: pointer;
  background-color: var(--bright-blue-color);
  outline: none;
}

#home #verification-section .button::-moz-focus-inner {
  border: 0 !important;
}

#home #keystone-code-section {
  width: 100%;
  background: url(/images/keystone-header.jpg) 50% 60% no-repeat;
  background-size: cover;
  margin-top: 5em;
  color: var(--white-color);
}

#home #keystone-code-section .page-section {
  margin-top: 5em;
  margin-bottom: 5em;
}

#home #keystone-code-section .text-section {
  font-size: 1.1em;
  font-weight: 500;
  max-width: 34em;
  width: 100%;
  text-shadow: var(--black-color) 0px 0px 20px;
}

#home #keystone-code-section div.text-section p {
  line-height: 1.6em;
}

#home #keystone-code-section .button {
  border: 5px solid var(--white-color);
  background-color: var(--bright-blue-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.6em;
  padding: .4em .75em .45em .75em;
  margin-top: 1.5em;
  text-transform: uppercase;
  max-width: 13.5em;
  white-space: normal;
  text-align: center;
  line-height: 1.4em;
}

#home #keystone-code-section .button:hover {
  cursor: pointer;
  background-color: var(--bright-orange-color);
}

#home #keystone-code-section .button:focus {
  cursor: pointer;
  background-color: var(--bright-blue-color);
  outline: none;
}

#home #keystone-code-section .button::-moz-focus-inner {
  border: 0 !important;
}

#home #changemakers-section {
  width: 100%;
  background: url(/images/home-background-b.jpg) 40% 50% no-repeat;
  background-size: cover;
  margin-top: 5em;
  color: var(--white-color);
}

#home #changemakers-section .page-section {
  margin-top: 5em;
  margin-bottom: 5em;
}

#home #changemakers-section .text-section {
  font-size: 1.1em;
  font-weight: 500;
  max-width: 34em;
  width: 100%;
  text-shadow: var(--black-color) 0px 0px 20px;
}

#home #changemakers-section div.text-section p {
  line-height: 1.6em;
}

#home #changemakers-section .button {
  border: 5px solid var(--white-color);
  background-color: var(--bright-orange-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.6em;
  padding: .4em .75em .45em .75em;
  margin-top: 1.5em;
  text-transform: uppercase;
  max-width: 13.5em;
  white-space: normal;
  text-align: center;
  line-height: 1.4em;
}

#home #changemakers-section .button:hover {
  cursor: pointer;
  background-color: var(--bright-fuchsia-color);
}

#home #changemakers-section .button:focus {
  cursor: pointer;
  background-color: var(--bright-blue-color);
  outline: none;
}

#home #changemakers-section .button::-moz-focus-inner {
  border: 0 !important;
}

#home #changemakers-section .button .detail-text {
  color: var(--dark-orange-color);
  font-size: 0.9em;
  text-transform: none;
}

#home #changemakers-section .button:hover .detail-text,
#home #changemakers-section .button:focus .detail-text {
  color: var(--white-color);
}

#home .goal-section {
  max-width: 20em;
  width: 100%;
  margin: 1em;
}

#home .goal-section .subsection-title {
  margin-bottom: 0em;
}

#home .goal-section img {
  width: 52px;
  height: 52px;
  margin-left: -0.4em;
  margin-right: 0.6em;
}

#home #testimonial-section {
  width: 100%;
  background: url(/images/home-background-c.jpg) 60% 50% no-repeat;
  background-size: cover;
  margin-top: 5em;
  color: var(--white-color);
}

#home #testimonial-section .page-section {
  margin-top: 5em;
  margin-bottom: 5em;
}

#home #testimonial-section .quote {
  font-size: 1.5em;
  font-family: var(--alt-title-font);
  font-weight: 500;
  font-style: italic;
  line-height: 1.4em;
  max-width: 22em;
  width: 100%;
  text-shadow: var(--black-color) 0px 0px 20px;
}

#home #testimonial-section .quote.bottom-padded {
  margin-bottom: 1.5em;
}

#home .pillar-section {
  max-width: 22em;
  width: 100%;
  margin: 1em;
}

#home .pillar-section .subsection-title {
  margin-bottom: 0em;
}

#home .pillar-section img {
  max-width: 4em;
  margin-left: -1em;
}

#home #about-section {
  width: 100%;
  background: url(/images/home-background-d.jpg) 40% 50% no-repeat;
  background-size: cover;
  margin-top: 5em;
  color: var(--white-color);
  margin-bottom: -3.6875em;
}

#home #about-section .page-section {
  margin-top: 5em;
  margin-bottom: 5em;
}

#home #about-section .text-section {
  max-width: 30em;
  width: 100%;
  text-shadow: var(--black-color) 0px 0px 20px;
}



/***********************************/
/*         Responsiveness          */
/***********************************/

@media (max-width:60em) {
  #home .intro-section {
    max-width: none;
    min-width: 30em;
  }
}

@media (max-width:48em) {
  #home .page-header .title .line-a {
    font-size: 2.5em;
  }
  #home .page-header .title .line-b {
    font-size: 1.7em;
  }

  #home #about-section {
    margin-bottom: -3.8125em;
  }
}

@media (max-width:34em) {
  #home .page-header .title .line-a {
    font-size: 2em;
  }
  #home .page-header .title .line-b {
    font-size: 1.3em;
  }

  #home .intro-section {
    min-width: 16em;
  }
  
  #home #about-section .text-section {
    max-width: none;
  }
}

@media (max-width:22em) {
  #home .page-header .title .line-a {
    font-size: 1.5em;
  }
  #home .page-header .title .line-b {
    font-size: 0.95em;
  }
}
/************************************/
/*     Inclusion 101 Page Header    */
/************************************/

#inclusion-101 .page-header {
  background: url(/images/inclusion-header.jpg) 50% 55% no-repeat;
  background-size: cover;
  height: 250px;
}

#inclusion-101 .page-header .title {
  margin-left: 1.4em;
  color: var(--white-color);
  text-shadow: var(--black-color) 0px 0px 30px;
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 3em;
}


/************************************/
/*       Inclusion 101 Intro        */
/************************************/

#inclusion-101 .intro-section {
  max-width: 34em;
  width: 100%;
  font-size: 1.2em;
}

#inclusion-101 img.feature-image {
  max-width: 408px;
  height: auto;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}


/************************************/
/*       Inclusion 101 Issues       */
/************************************/

#inclusion-101 #issues-section {
  width: 100%;
  background: var(--alert-red-color);  
  margin-top: 5em;
  color: var(--white-color);
}

#inclusion-101 #issues-section .page-section {
  margin-top: 5em;
  margin-bottom: 5em;
}

#inclusion-101 #issues-section .text-section {
  font-size: 1.1em;
  font-weight: 500;
  max-width: 48em;
  width: 100%;
}

#inclusion-101 #issues-section div.text-section p {
  line-height: 1.6em;
}

#inclusion-101 .issues-subsection {
  max-width: 38em;
  width: 100%;
  margin-top: 3em;
  font-size: 0.9em;
}

#inclusion-101 .issues-subsection .subsection-title {
  margin-bottom: 0em;
}

#inclusion-101 .issues-subsection .number {
  font-size: 1em;
  font-family: var(--title-font);
  color: var(--alert-red-color);
  background: url(/images/flag.svg) no-repeat;
  background-size: 40px 40px;
  background-position: top left 4px;
  min-width: 44px;
  min-height: 40px;
  line-height: 32px;
  text-align: center;
  margin-right: 0.4em;
}


/************************************/
/*        Inclusion 101 Plan        */
/************************************/

#inclusion-101 .plan-section {
  max-width: 34em;
  width: 100%;
  font-size: 1.1em;
  margin-right: 3em;
  margin-bottom: 2em;
}

#inclusion-101 .plan-box {
  max-width: 34em;
  width: 100%;
  border: 8px solid var(--dark-green-color);
  background-color: var(--bright-green-color);
  padding: 3.5em 2.5em 3.5em 2.5em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; 
  margin-bottom: 1em;
}

#inclusion-101 .plan-box .point:not(:first-child) {
  margin-top: 2em;
}

#inclusion-101 .plan-box .number {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  background: var(--dark-green-color);
  font-size: 1.4em;
  font-family: var(--title-font);
  color: var(--bright-green-color);
  text-align: center;
  line-height: 32px;
  margin-right: 0.75em;
}

#inclusion-101 .plan-box .text {
  color: var(--white-color);
  font-family: var(--body-font);
  font-size: 1.3em;
  font-weight: 500;
  line-height: 1.2em;
}


/************************************/
/*     Inclusion 101 Quick Start    */
/************************************/

#inclusion-101 #start-section {
  width: 100%;
  background: linear-gradient(315deg, var(--dark-blue-color) 28%, var(--bright-blue-color) 28%);
  margin-top: 5em;
  color: var(--white-color);
}

#inclusion-101 #start-section .page-section {
  margin-top: 5em;
  margin-bottom: 5em;
}

#inclusion-101 #start-section .section-title {
  font-size: 3.5em;
  margin-bottom: 0.5em;
}

#inclusion-101 #start-section .text-section {
  font-size: 1em;
  font-weight: 400;
  max-width: 42em;
  width: 100%;
  color: var(--white-color);
}

#inclusion-101 .step-section .text-section {
  font-size: 1em;
  max-width: 40em;
  width: 100%;
  color: var(--black-color);
}

#inclusion-101 .section-title .icon {
  position: relative;
  font-family: var(--icon-font);
  font-size: 1.3em;
  margin-right: 0.3em;
}

#inclusion-101 .section-title .letter {  
  position: absolute;
  top: 26px;
  right: 4px;
  transform: skew(0deg, -30deg);
  font-family: var(--title-font);
  font-size: 0.3em;
  color: var(--white-color);
}

#inclusion-101 .resource-section {
  max-width: 26em;
  width: 100%;
}

#inclusion-101 #explore-section {
  width: 100%;
  background: linear-gradient(45deg, var(--dark-blue-color) 72%, var(--bright-blue-color) 72%);
  margin-top: 5em;
  color: var(--white-color);
}

#inclusion-101 #explore-section .page-section {
  margin-top: 5em;
  margin-bottom: 5em;
}

#inclusion-101 #explore-section .section-title {
  font-size: 3.5em;
  margin-bottom: 0.5em;
}

#inclusion-101 #explore-section .text-section {
  font-size: 1em;
  font-weight: 400;
  max-width: 42em;
  width: 100%;
  color: var(--white-color);
}

#inclusion-101 .explore-subsection {
  margin-bottom: 2em;
}

#inclusion-101 .explore-subsection .text-section {
  max-width: 38em;
  width: 100%;
}

#inclusion-101 .explore-subsection .text-section.narrow {
  max-width: 32em;
}

#inclusion-101 a.inline.explore-link {
  font-size: 1.1em;
  font-weight: 600;
  margin-top: 1em;
}

#inclusion-101 img.slide-show {
  max-width: 600px;
  height: auto;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}

#inclusion-101 img.guide-preview {
  max-width: 480px;
  height: auto;
  -moz-box-sizng: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}

#inclusion-101 .coc-previews {
  max-width: 574px;
  width: 100%;
}

#inclusion-101 img.coc-preview {
  -moz-box-sizng: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 90%;
  height: auto;
}

#inclusion-101 #end-section {
  width: 100%;
  background: linear-gradient(315deg, var(--dark-green-color) 34%, var(--bright-green-color) 34%);
  margin-top: 5em;
  color: var(--white-color);
}

#inclusion-101 #end-section .page-section {
  margin-top: 5em;
  margin-bottom: 5em;
}

#inclusion-101 #end-section .section-title {
  font-size: 3.5em;
  margin-bottom: 0.5em;
}

#inclusion-101 #end-section .text-section {
  font-size: 1em;
  font-weight: 400;
  max-width: 42em;
  width: 100%;
  color: var(--white-color);
}


/************************************/
/*     Inclusion 101 Resources      */
/************************************/

#inclusion-101 a.resource {
  max-width: 32em;
  margin-top: 2em;
  margin-right: 1em;
}

#inclusion-101 a.resource .icon {
  font-family: var(--icon-font);
  font-size: 4em;
  color: var(--bright-blue-color);
  min-width: 74px;
  text-align: center;
  margin-right: 0.1em;
}

#inclusion-101 a.resource .description {
  font-weight: 500;
  font-size: 0.8em;
  color: var(--gray-color);
  line-height: 1.4em;
}

#inclusion-101 a.resource .title {
  font-weight: 500;
  line-height: 1.4em;
}

#inclusion-101 a.resource:hover .icon,
#inclusion-101 a.resource:hover .title {
  color: var(--bright-orange-color);
}

#inclusion-101 a.resource:active .icon,
#inclusion-101 a.resource:active .title {
  color: var(--bright-blue-color);
}


/***********************************/
/*         Responsiveness          */
/***********************************/

@media (max-width:72em) {
  #inclusion-101 .explore-subsection {
    margin-top: 1em;
  }
  
  #inclusion-101 .explore-subsection:not(.last) {
    margin-bottom: 4em;
  }
  
  #inclusion-101 .explore-subsection .text-section {
    margin-bottom: 2em;
  }
}

@media (max-width:70em) {
  #inclusion-101 .intro-section {
    margin-bottom: 2em;
  }
}

@media (max-width:48em) {
  #inclusion-101 #start-section .section-title {
    font-size: 2.8em;
  }
  
  #inclusion-101 .section-title .letter {  
    top: 20px;
    right: 3px;
  }
}

@media (max-width:34em) {
  #inclusion-101 .plan-box {
    padding: 2.5em 1.5em 2.5em 1.5em;
  }
  
  #inclusion-101 .plan-box .text {
    font-size: 1.2em;
    line-height: 1.1em;
  }
  
  #inclusion-101 .explore-subsection {
    margin-top: 0em;
  }
  
  #inclusion-101 .explore-subsection:not(.last) {
    margin-bottom: 3em;
  }
}
/************************************/
/*     Keystone Code Page Header    */
/************************************/

#keystone-code .page-header {
  background: url(/images/keystone-header.jpg) 50% 60% no-repeat;
  background-size: cover;
  height: 250px;
}

#keystone-code .page-header .title {
  margin-left: 1.4em;
  color: var(--white-color);
  text-shadow: var(--black-color) 0px 0px 30px;
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 3em;
}


/************************************/
/*     Keystone Code Explanation    */
/************************************/

#keystone-code .intro-section {
  max-width: 34em;
  width: 100%;
  font-size: 1.2em;
}

#keystone-code img.feature-image {
  max-width: 408px;
  height: auto;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}

#keystone-code .values-section {
  max-width: 34em;
  width: 100%;
  font-size: 1.1em;
  margin-left: 3em;
  margin-bottom: 2em;
}

#keystone-code .values-box {
  max-width: 26em;
  width: 100%;
  border: 5px solid var(--dark-green-color);
  background-color: var(--bright-green-color);
  padding: 2.5em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; 
  margin-bottom: 1em;
}

#keystone-code .values-box .heading {
  color: var(--white-color);
  font-weight: 700;
  font-size: 1.4em;
  margin-bottom: 0em;
}

#keystone-code .values-box img {
  width: 32px;
  height: 32px;
  margin-right: 0.4em;
}

#keystone-code .values-box p {
  color: var(--white-color);
  font-size: 1em;
  font-weight: 400;
  margin-top: 0.2em;
}

#keystone-code .values-box p:not(:last-child) {
  margin-bottom: 1.4em;
}

#keystone-code .action-section {
  max-width: 34em;
  width: 100%;
  font-size: 1.1em;
}

#keystone-code img.action-image {
  margin-top: 2em;
}

#keystone-code .value-subsection {
  max-width: 35em;
  width: 100%;
  margin: 2.5em 0.5em 0em 0.5em;
}

#keystone-code .value-subsection .subsection-title {
  margin-bottom: 0em;
}

#keystone-code .value-subsection img {
  width: 52px;
  height: 52px;
  margin-left: -0.4em;
  margin-right: 0.6em;
}

#keystone-code div.value-subsection p {
  font-size: 1em;
}


/************************************/
/*      Keystone Code Download      */
/************************************/

#keystone-code #download-section {
  width: 100%;
  background: linear-gradient(315deg, var(--dark-blue-color) 28%, var(--bright-blue-color) 28%);
  margin-top: 5em;
  color: var(--white-color);
}

#keystone-code #download-section .page-section {
  margin-top: 5em;
  margin-bottom: 5em;
}

#keystone-code #download-section .section-title {
  font-size: 3.5em;
  margin-bottom: 0.5em;
}

#keystone-code #download-section .text-section {
  font-size: 1em;
  font-weight: 400;
  max-width: 42em;
  width: 100%;
  color: var(--white-color);
}

#keystone-code img.download-preview {
  max-width: 300px;
  height: auto;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  margin-right: 2em;
}

#keystone-code .download-subsection {
  font-size: 1em;
  font-weight: 400;
}

#keystone-code .download-subsection .text-section {
  font-size: 0.85em;
  max-width: 43em;
}

#keystone-code #rules-text {
  display: none;
}


/************************************/
/*      Keystone Code Resources     */
/************************************/

#keystone-code a.resource {
  max-width: 32em;
  margin-top: 2em;
  margin-right: 1em;
}

#keystone-code a.resource .icon {
  font-family: var(--icon-font);
  font-size: 4em;
  color: var(--bright-blue-color);
  min-width: 74px;
  text-align: center;
  margin-right: 0.1em;
}

#keystone-code a.resource .description {
  font-weight: 500;
  font-size: 0.8em;
  color: var(--gray-color);
  line-height: 1.4em;
}

#keystone-code a.resource .title {
  font-weight: 500;
  line-height: 1.4em;
}

#keystone-code a.resource:hover .icon,
#keystone-code a.resource:hover .title {
  color: var(--bright-orange-color);
  cursor: pointer;
}

#keystone-code a.resource:active .icon,
#keystone-code a.resource:active .title {
  color: var(--bright-blue-color);
}


/************************************/
/*      Keystone Code Adopters      */
/************************************/

#keystone-code #adopters-section {
  width: 100%;
  background: linear-gradient(315deg, var(--bright-blue-color) 72%, var(--dark-blue-color) 72%);
  margin-top: 5em;
  color: var(--white-color);
}

#keystone-code #adopters-section .page-section {
  margin-top: 5em;
  margin-bottom: 5em;
}

#keystone-code #adopters-section .section-title {
  font-size: 3.5em;
  margin-bottom: 0.5em;
}

#keystone-code #adopters-section .text-section {
  font-size: 1em;
  font-weight: 400;
  max-width: 42em;
  width: 100%;
  color: var(--white-color);
  margin-bottom: 2em;
}

#keystone-code .adopter-logo {
  margin: 2em;
}


/************************************/
/*     Keystone Code Enforcement    */
/************************************/

#keystone-code .enforcement-section {
  max-width: 38em;
  width: 100%;
  margin-right: 4em;
}

#keystone-code .report-button {
  border: 5px solid var(--light-gray-color);
  background-color: var(--dark-fuchsia-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.5em;
  padding: .75em 3em .75em 3em;
  margin-top: 1em;
  text-transform: uppercase;
  text-decoration: none;
}

#keystone-code .report-button:hover {
  cursor: pointer;
  background-color: var(--bright-fuchsia-color);
}

#keystone-code .report-button:focus {
  cursor: pointer;
  background-color: var(--bright-blue-color);  
  outline: none;
}

#keystone-code .report-button::-moz-focus-inner {
  border: 0 !important;
} 

#keystone-code .definitions-section {
  max-width: 30em;
  width: 100%;
  font-size: 0.9em;
}

#keystone-code .page-section .definitions-section p {
  font-size: 1em;
}

#keystone-code .definitions-section ul {
  list-style-position: outside;
  font-size: 0.95em;
  line-height: 1.4em;
  margin-left: 1.2em;
  margin-top: 0.4em;
  margin-bottom: 1em; 
}




/***********************************/
/*         Responsiveness          */
/***********************************/

@media (max-width:70em) {
  #keystone-code .intro-section {
    margin-bottom: 2em;
  }
  
  #keystone-code .values-section {
    margin-left: 0em;
    max-width: none;
  }
}

@media (max-width:60em) {
  #keystone-code .enforcement-section {
    max-width: none;
    min-width: 30em;
    margin-right: 0em;
  }
  
  #keystone-code .definitions-section {
    max-width: none;
    min-width: 30em;
    margin-top: 2em;
  }
  
  #keystone-code img.download-preview {
    margin-top: 1em;
    margin-bottom: 2em;
    margin-right: 0em;
  }
}

@media (max-width:34em) {
  #keystone-code .enforcement-section {
    min-width: 16em;
  }
  
  #keystone-code .definitions-section {
    min-width: 16em;
  }
}

@media (max-width:30em) {
  #keystone-code .report-button {
    font-size: 1.3em;
    padding: .75em 2em .75em 2em;
  }
}

@media (max-width:26em) {
  #keystone-code .report-button {
    font-size: 1.1em;
  }
}
/************************************/
/*       Logo Guide Page Header     */
/************************************/

#logo-guide .page-header {
  background: url(/images/logo-guide-background.jpg) 50% 40% no-repeat;
  background-size: cover;
  height: 250px;
}

#logo-guide .page-header .title {
  margin-left: 1.4em;
  color: var(--white-color);
  text-shadow: var(--black-color) 0px 0px 30px;
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 3em;
}


/************************************/
/*       Logo Guide Page Body       */
/************************************/

#logo-guide .intro-section {
  max-width: 31em;
  width: 100%;
  font-size: 1.1em;
}

#logo-guide .logo-schematic img {
  width: 100%;
  max-width: 525px;
}

#logo-guide .usage-section {
  max-width: 36em;
  width: 100%;
}

#logo-guide .downloadable-logo {
  padding: 1em 1.5em 1em 0.8em;
  margin-left: 1em;
  margin-right: 1em;
}

#logo-guide .downloadable-logo.white-background {
  border: 1px solid var(--light-gray-color);
}

#logo-guide .downloadable-logo.black-background {
  background-color: var(--black-color);
}

#logo-guide .downloadable-logo.green-background {
  background-color: var(--bright-green-color);
}

#logo-guide .downloadable-logo img {
  width: 100%;
  max-width: 360px;
}

#logo-guide .logo-links {
  margin-top: 0.5em;
  margin-bottom: 1.5em;
}

#logo-guide .downloadable-cap {
  margin-left: 4em;
  margin-right: 4em;
}

#logo-guide .downloadable-cap img {
  width: 100%;
  max-width: 86px;
}

#logo-guide .cap-links {
  margin-bottom: 1.8em;
  text-align: center;
  font-size: 0.9em;
}

#logo-guide .colors-section {
  max-width: 28em;
  font-size: 0.9em;
  width: 100%;
  margin-right: 2em;
}

#logo-guide .swatches-section {
  max-width: 50em;
  width: 100%;
}

#logo-guide .swatch {
  width: 190px;
  border: 1px solid var(--light-gray-color);
  margin: 0.25em;
}

#logo-guide .swatch .color-sample {
  height: 45px;
}

#logo-guide .swatch .description {
  padding: 1em;
}

#logo-guide .swatch .color-title {
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 1em;
  margin-bottom: 0.4em;
}

#logo-guide .swatch .color-format {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 0.9em;
  color: var(--gray-color);
  margin-top: .6em;
  width: 4em;
}

#logo-guide .swatch .color-code {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 0.9em;
  color: var(--black-color);
  margin-top: .6em;
}

#logo-guide .swatch .color-sample.bright-green {
  background-color: var(--bright-green-color);
}

#logo-guide .swatch .color-sample.dark-green {
  background-color: var(--dark-green-color);
}

#logo-guide .swatch .color-sample.bright-orange {
  background-color: var(--bright-orange-color);
}

#logo-guide .swatch .color-sample.dark-orange {
  background-color: var(--dark-orange-color);
}

#logo-guide .swatch .color-sample.bright-fuchsia {
  background-color: var(--bright-fuchsia-color);
}

#logo-guide .swatch .color-sample.dark-fuchsia {
  background-color: var(--dark-fuchsia-color);
}

#logo-guide .swatch .color-sample.bright-blue {
  background-color: var(--bright-blue-color);
}

#logo-guide .swatch .color-sample.dark-blue {
  background-color: var(--dark-blue-color);
}

#logo-guide .swatch .color-sample.black {
  background-color: var(--black-color);
}

#logo-guide .swatch .color-sample.light-black {
  background-color: var(--light-black-color);
}

#logo-guide .swatch .color-sample.gray {
  background-color: var(--gray-color);
}

#logo-guide .swatch .color-sample.light-gray {
  background-color: var(--light-gray-color);
}

#logo-guide .typography-section {
  max-width: 36em;
  font-size: 0.9em;
  width: 100%;
}

#logo-guide .font {
  margin: 1em 5em 1em 0em;
}

#logo-guide .font .description {
  font-size: 0.8em;
}

#logo-guide .font .sample.nevis-bold {
  font-family: var(--title-font);
  font-size: 3em;
  font-weight: 600;
}

#logo-guide .font .sample.rubik-medium {
  font-family: var(--alt-title-font);
  font-size: 2.5em;
  font-weight: 500;
}

#logo-guide .font .sample.gotham-book {
  font-family: var(--body-font);
  font-size: 2em;
  font-weight: 400;
}

#logo-guide .font .sample.gotham-medium {
  font-family: var(--body-font);
  font-size: 2em;
  font-weight: 500;
  margin-top: 0.5em;
}

#logo-guide .font .sample.gotham-bold {
  font-family: var(--body-font);
  font-size: 2em;
  font-weight: 700;
  margin-top: 0.5em;
}




/***********************************/
/*         Responsiveness          */
/***********************************/

@media (max-width:80em) {
  #logo-guide .usage-section {
    margin-bottom: 3em;
  }
  
  #logo-guide .colors-section {
    margin-right: 0em;
    margin-bottom: 2em;
    max-width: 54em;
  }
  
  #logo-guide .typography-section {
    margin-bottom: 2em;
    max-width: 54em;
  }
    
  #logo-guide .font {
    margin: 1em 5em 1em 5em;
  }

}
@media (max-width:70em) {
  #logo-guide .intro-section {
    margin-bottom: 2em;
  }
  
  #logo-guide .swatch {
    margin: 1em;
  }
  
  #logo-guide .font {
    margin: 1em 5em 1em 0em;
  }
}

@media (max-width:48em) {
  #logo-guide .font {
    font-size: 0.9em;
  }
}

@media (max-width:34em) {
  #logo-guide .font {
    margin: 1em 1em 1em 0em;
  }
}
/************************************/
/*      Badge Activation Style      */
/************************************/

#backstage-container form#activate_badge_form {
  margin-top: 1em;
}

#backstage-container form#activate_badge_form .flash {
  text-align: center;
  margin-bottom: 0.5em;
  font-size: 0.85em;
  color: var(--alert-red-color);
}

#backstage-container form#activate_badge_form label.text-field {
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 0.8em;
  margin-bottom: 0.5em;
}

#backstage-container form#activate_badge_form input#activate_badge_twitch_username {
  width: 14em;
  color: var(--black-color);
  background: var(--white-color);
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 0.9em;
  border: 3px solid var(--light-black-color);
  outline: none;
  padding: 0.5em 0.8em 0.5em 0.8em;
}

#backstage-container form#activate_badge_form input#activate_badge_twitch_username:hover,
#backstage-container form#activate_badge_form input#activate_badge_twitch_username:focus {
  border: 3px solid var(--bright-blue-color);
}
#backstage-container form#activate_badge_form input#activate_badge_twitch_id {
  display: none;
  margin-left: 0.6em;
  padding: 3px 3px 2px 3px;
  font-family: var(--body-font);
  font-weight: 500;
  font-size: 0.65em;
  color: var(--white-color);
  background: var(--twitch-purple-color);
  border: none;
  outline: none;
  width: 6.5em;
  text-align: center;
}

#backstage-container form#activate_badge_form .status-response {
  font-family: var(--body-font), var(--icon-font);
  font-weight: 500;
  font-size: 0.8em;
  margin-top: 0.6em;
  height: 0.8em;
}

#backstage-container form#activate_badge_form .status-response.searching:before {
  content: "\f002  Searching...";
  color: var(--gray-color);
}

#backstage-container form#activate_badge_form .status-response.invalid:before {
  content: "\f071  Invalid";
  color: var(--bright-orange-color);
}

#backstage-container form#activate_badge_form .status-response.not-found:before {
  content: "\f05e  Not Found";
  color: var(--alert-red-color);
}

#backstage-container form#activate_badge_form .status-response.found:before {
  content: "\f1e8  Found";
  color: var(--bright-green-color);
}

#backstage-container .control-panel .subheading {
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 1em;
  margin-top: 1em;
}

#backstage-container .control-panel .text-section {
  margin-top: 0.5em;
  font-family: var(--body-font);
  font-size: 0.9em;
  width: 100%;
}


/************************************/
/*      Cert Validation Style       */
/************************************/

#backstage-container #cross_check_subheading {
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 1em;
  margin-top: 2em;
}

#backstage-container form#validate_certs_form {
  margin-top: 1em;
}

#backstage-container form input#validate_certs_input_csv {
  margin-right: 1em;
  max-width: 16em;
}

#backstage-container form select#validate_certs_player_id_type {
  max-width: 14em;
  text-overflow: ellipsis;
}

#backstage-container form#validate_certs_form label.text-field.small {
  font-size: 0.8em;
}

#backstage-container #cross_check_instructions {
  margin-top: 0.5em;
  font-family: var(--body-font);
  font-size: 0.9em;
  width: 100%;
  white-space: wrap;
}

#backstage-container #cross_check_results {
  margin-top: 0.5em;
  font-family: var(--code-font);
  width: 100%;
  white-space: preserve nowrap;
  overflow: scroll;
}

#backstage-container .button#reset_validation_button {
  background-color: var(--gray-color);
}


/***********************************/
/*         Responsiveness          */
/***********************************/

@media (max-width:52em) {
  #backstage-container .validation-buttons {
    width: 100%;
  }

  #backstage-container .validation-buttons .button {
    width: 100%;
    margin-left: 0em !important;
    margin-top: 2em;
  }
}
/************************************/
/*         Page Header Style        */
/************************************/

.page-header {
  position: relative;
  margin-top: 5px;
  width: 100%;
  height: 500px;
  transition: height;
  -moz-transition-duration: .5s;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
}

.page-header .inner {
  max-width: 80em; 
  width: 100%;
}

#tapestry {
  position: relative;
  background: var(--bright-green-color);
  display: inline-block;
  height: 380px;
  width: 240px;
  margin-left: 1.5em;
  border-left: 5px solid white;
  border-right: 5px solid white;
  border-bottom: 5px solid white;
  transform-origin: top left;
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  -moz-transition-duration: .5s;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  text-align: center;
}

#tapestry:before {
  position: absolute;
  top: 385px;
  left: -5px;
  border-left: 125px solid transparent;
  border-right: 125px solid transparent;
  border-top: 50.5px solid var(--white-color);
  content: "";
  height: 0;
  width: 0;
}

#tapestry:after {
  position: absolute;
  top: 380px;
  left: 0px;
  border-left: 120px solid transparent;
  border-right: 120px solid transparent;
  border-top: 50px solid var(--bright-green-color);
  content: "";
  height: 0;
  width: 0;
}


/************************************/
/*        Page Section Style        */
/************************************/

.background-overlay {
  background-color: var(--black-overlay);
  width: 100%;
  height: 100%;
}

.background-overlay.light {
  background-color: var(--light-black-overlay);
  width: 100%;
  height: 100%;
}

.page-section {
  max-width: 80em;
  width: 100%;
  margin-top: 4em;
}

.page-section.narrow {
  max-width: 40em;
}

.page-section .inner {
  margin-right: 1.4em;
  margin-left: 1.4em;
}

.page-section .headline {
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 3em;
  text-align: center;
  margin-bottom: 1em;
}

.page-section .section-title {
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 2.5em;
  margin-bottom: 1em;
}

.page-section .section-title.tight-bottom {
  margin-bottom: 0.2em;
}

.page-section .section-title.flush-bottom {
  margin-bottom: 0em;
}

.page-section .section-title.centered {
  text-align: center;
}

.page-section .subsection-title {
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.8em;
  margin-bottom: 0.5em;
}

.page-section div p {
  font-size: 1.2em;
  line-height: 1.4em;
}

.page-section div p:not(:first-child) {
  margin-top: 0.6em;
}

.page-section .framed-element {
  padding: 5px;
  border: 4px solid var(--light-black-color);
}

.page-section .framed-element.white {
  border: 4px solid var(--white-color);
}

.page-section .embed-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  width: 100%;
}

.page-section iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}

hr.spacer {
  background-color: var(--black-color);
  border: none;
  height: 4px;
  width: 100%;
  margin-top: 2em;
  margin-bottom: 2em;
}


/***********************************/
/*         Responsiveness          */
/***********************************/

@media (max-width:48em) {
  #tapestry {
    transform-origin: top left;
    -moz-transform: scale(.6);
    -webkit-transform: scale(.6);
    transform: scale(.6);
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
  }
  
  .page-header {
    height: 350px;
    margin-top: 3px;
    transition: height;
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
  }
  
  .page-section {
    margin-top: 3em;
  }
  
  .page-section .headline {
    font-size: 2.2em;
  }

  .page-section .section-title {
    font-size: 1.9em;
    margin-bottom: .6em;
  }
  
  .page-section .subsection-title {
    font-size: 1.5em;
    margin-bottom: .3em;
  }
  
  .page-section div p {
    font-size: 1em;
  }

}

@media (max-width:34em) {
  #tapestry {
    transform-origin: top left;
    -moz-transform: scale(.45);
    -webkit-transform: scale(.45);
    transform: scale(.45);
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
  }
  
  .page-header {
    height: 260px;
    margin-top: 3px;
    transition: height;
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
  }
  
  .page-section .headline {
    font-size: 2.1em;
  }
  
}


/**********************************************/
/*             Pagination Style               */
/**********************************************/

.pagination {
  margin-top: 3em;
  margin-bottom: 1em;
  color: var(--gray-color);
  font-family: var(--body-font);
  font-weight: 500;
  font-size: 0.9em;
  white-space: nowrap;
}

.pagination .page.active,
.pagination .page.disabled,
.pagination .page a {
  padding: 0.5em 1em 0.5em 1em;
}

.pagination .page.active {
  font-style: normal;
  color: var(--light-black-color);
  font-weight: 600;
}

.pagination .page.disabled {
  font-style: normal;
  color: var(--light-gray-color);
}

.pagination .page a:hover {
  color: var(--bright-orange-color);
  text-decoration: none;
}

.pagination .page a:active {
  color: var(--bright-blue-color);
  text-decoration: none;
}


/***********************************/
/*         Responsiveness          */
/***********************************/

@media (max-width: 44em) {
  .pagination .page.active,
  .pagination .page.disabled,
  .pagination .page a {
    padding: 0.5em;
  }
}
/************************************/
/*        Pledge Form Style         */
/************************************/

#pledge form {
  border: 5px solid var(--white-color);
  background: var(--bright-green-color);
  padding: 3em 3em 3.5em 3em;
}

#pledge form .item {
  margin-bottom: 1.2em;
  overflow: hidden;
}

#pledge form label.text-field {
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 0.8em;
  margin-bottom: 0.3em;
}

#pledge form input.text-field {
  color: var(--black-color);
  background: var(--white-color);
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 1.3em;
  border: 5px solid var(--dark-green-color);
  outline: none;
  padding: 0.8em 1em 0.7em 1em;
  width: 13em;
}

#pledge form input.text-field:hover {
  border: 5px solid var(--bright-orange-color);
}

#pledge form input.text-field:focus {
  border: 5px solid var(--bright-blue-color);
}

#pledge form input[type="text"]::-moz-placeholder,
#pledge form input[type="url"]::-moz-placeholder{
  color: var(--gray-color);
}

#pledge form input[type="text"]::-webkit-input-placeholder,
#pledge form input[type="url"]::-webkit-input-placeholder{
  color: var(--light-gray-color);
}

#pledge form .flash {
  width: 20em;
  text-align: center;
  margin-top: 0.75em;
}

#pledge form .button {
  border: 5px solid var(--white-color);
  background-color: var(--dark-green-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.5em;
  padding: .75em;
  margin-top: 1.5em;
  text-transform: uppercase;
  max-width: 13.5em;
  white-space: normal;
}

#pledge form .button:hover {
  cursor: pointer;
  background-color: var(--bright-orange-color);
}

#pledge form .button:focus {
  cursor: pointer;
  background-color: var(--bright-blue-color);  
  outline: none;
}

#pledge form .button::-moz-focus-inner {
  border: 0 !important;
}


/***********************************/
/*         Responsiveness          */
/***********************************/

@media (max-width:70em) {
  #pledge form {
    margin-top: 2.4em;
  }
}

@media (max-width:30em) {
  #pledge form {
    padding: 2em 2em 2.5em 2em;
  }
  
  #pledge form input.text-field {
    font-size: 1.2em;
  }

  #pledge form .button {
    font-size: 1.3em;
  }
}

@media (max-width:26em) {
  #pledge form input.text-field {
    font-size: 1em;
    width: 11em;
  }

  #pledge form .button {
    font-size: 1.1em;
  }
  
  #pledge form .flash {
    width: 13.7em;
  }
}
/************************************/
/*      Backstage Pledge View       */
/************************************/

#backstage-container .pledge-item {
  margin-top: 1.25em;
  width: 100%;
  overflow-wrap: break-word;
}

#backstage-container .pledge-item.flush-top {
  margin-top: 0em;
}

#backstage-container .pledge-item.half-width {
  max-width: 20em;
}

#backstage-container .pledge-item .item-title {
  font-weight: 600;
  font-size: 0.9em;
  margin-bottom: 0.2em;
}

#backstage-container .pledge-item .item-title.large {
  font-weight: 600;
  font-size: 1.1em;
}

#backstage-container .pledge-item .item-title .icon {
  position: relative;
  font-family: var(--icon-font);
  margin-right: 0.3em;
}

#backstage-container .pledge-item .item-text {
  font-size: 1em;
}

#backstage-container .pledge-item .item-text.empty,
#backstage-container .pledge-item .item-text.activated,
#backstage-container .pledge-item .item-text.revoked {
  font-size: 0.8em;
  font-weight: 700;
  margin-top: 0.3em;
}

#backstage-container .pledge-item .item-text.empty.large {
  font-size: 0.9em;
}

#backstage-container .pledge-item .item-text.empty {
  color: var(--light-gray-color);
}

#backstage-container .pledge-item .item-text.activated {
  color: var(--bright-green-color);
}

#backstage-container .pledge-item .item-text.revoked {
  color: var(--alert-red-color);
}

#backstage-container .pledge-item .item-text img {
  height: 1.2em;
  margin-right: 0.3em;
}

#backstage-container .pledge-item .item-text .inline-icon {
  font-family: var(--solid-icon-font), var(--icon-font);
  margin-right: 0.4em;
}

#backstage-container .pledge-item .item-text a.twitch_id {
  font-size: 0.65em;
  font-weight: 500;
  margin-left: 0.6em;
  padding: 3px 3px 2px 3px;
  color: var(--white-color);
  background: var(--twitch-purple-color);
}

#backstage-container .pledge-item .item-text a.twitch_id:hover {
  background: var(--bright-orange-color);
}

#backstage-container .pledge-item .item-list {
  margin-top: 0.6em;
}


/************************************/
/*     Backstage Pledge Buttons     */
/************************************/

#backstage-container .pledge-buttons {
  margin-top: 2em;
}

#backstage-container .pledge-buttons .button {
  border: 4px solid var(--light-black-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.2em;
  padding: 0.75em 1em 0.75em 1em;
  text-transform: uppercase;
  text-align: center;
  min-width: 4.5em;
  margin-left: 2em;
}

#backstage-container .pledge-buttons .button.mini {
  border: 3px solid var(--light-black-color);
  font-weight: 400;
  font-size: 0.9em;
  padding: 0.5em 0.75em 0.5em 0.75em;
  min-width: none;
}

#backstage-container .pledge-buttons .button.back-button {
  background-color: var(--light-black-color);
}

#backstage-container .pledge-buttons .button:hover {
  cursor: pointer;
  background-color: var(--bright-blue-color);
}

#backstage-container .pledge-buttons .button:focus {
  cursor: pointer;
  background-color: var(--bright-blue-color);  
  outline: none;
}

#backstage-container .pledge-buttons .button::-moz-focus-inner {
  border: 0 !important;
}


/***********************************/
/*         Responsiveness          */
/***********************************/

@media (max-width:46em) {
  #backstage-container .pledge-buttons .button {
    width: 100%;
    margin-left: 0em;
    margin-top: 2em;
  }
}
/************************************/
/*        Pledge Page Header        */
/************************************/

#pledge .page-header {
  background: url(/images/pledge-header.jpg) 80% center no-repeat;
  background-size: cover;
}

#pledge #tapestry {
  background: var(--bright-green-color);
}

#pledge #tapestry:after {
  border-top: 50px solid var(--bright-green-color);
}

#pledge #tapestry .title-line-a {
  font-family: var(--title-font);
  color: var(--dark-green-color);
  font-size: 7em;
  margin-top: .85em;
}

#pledge #tapestry .title-line-b {
  font-family: var(--title-font);
  color: var(--white-color);
  font-size: 2.7em;
  margin-top: .2em;
  margin-bottom: 2.6em;
}

#pledge #tapestry .pledge-button {
  position: relative;
  display: inline-block;
  top: 45px;
  border: 5px solid var(--bright-green-color);
  background-color: var(--dark-green-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.2em;
  padding: .3em .98em .5em .98em;
  margin-top: 1em;
  text-transform: uppercase;
  text-decoration: none;
}

#pledge #tapestry .pledge-button:hover {
  cursor: pointer;
  border: 5px solid var(--dark-white-color);
  background-color: var(--bright-green-color);
}

#pledge #tapestry .pledge-button:focus {
  cursor: pointer;
  border: 5px solid var(--dark-white-color);
  background-color: var(--bright-blue-color);
  outline: none;
}

#pledge #tapestry .pledge-button::-moz-focus-inner {
  border: 0 !important;
} 

#pledge #tapestry .pledge-button .detail-text {
  color: var(--bright-green-color);
  font-size: 0.8em;
  line-height: 1.5em;
  text-transform: none;  
}

#pledge #tapestry .pledge-button:hover .detail-text,
#pledge #tapestry .pledge-button:focus .detail-text {
  color: var(--white-color);
}


/************************************/
/*       Pledge Page Sections       */
/************************************/

#pledge .intro-section {
  max-width: 38em;
  width: 100%;
}

#pledge img.intro-image {
  max-width: 28em;
  width: 95%;
  margin-left: 2em;
}

#pledge .trailer-video {
  max-width: 32em;
  width: 100%;
  margin-left: 2em;
}

#pledge #quest-section {
  width: 100%;
  background: url(/images/pledge-background-a.jpg) 40% center no-repeat;
  background-size: cover;
  margin-top: 5em;
  color: var(--white-color);
}

#pledge #quest-section .page-section {
  margin-top: 5em;
  margin-bottom: 5em;
}

#pledge #quest-section .section-title {
  text-shadow: var(--black-color) 0px 0px 20px;
}

#pledge .leaderboard {
  border: 5px solid var(--white-color);
  background: var(--bright-orange-color);
  padding: 2.5em 2.5em 3em 2.5em;
}

#pledge .leaderboard .subsection-title-a {
  color: var(--dark-orange-color);
  font-family: var(--title-font);
  font-size: 2em;
}

#pledge .leaderboard .subsection-title-b {
  font-family: var(--title-font);
  font-size: 1.825em;
  text-transform: uppercase;
  margin-top: 0.1em;
  margin-bottom: 1em;
}

#pledge .leaderboard .row {
  margin-top: 1em;
  line-height: 1.1em;
}

#pledge .leaderboard .title {
  margin-right: 1em;
}

#pledge .leaderboard .detail {
  font-size: 0.8em;
}

#pledge .challenge-section {
  margin-left: 8em;
  width: 100%;
  max-width: 28em;  
  text-shadow: var(--black-color) 0px 0px 20px;
}

#pledge .twitch-section {
  max-width: 52em;
  width: 100%;
}

#pledge .twitch-badge {
  margin-right: 2em;
  margin-bottom: 1em;
  width: 220px;
  height: 220px;
}

#pledge .twitch-badge img {
  width: 100%;
  height: auto;
}

#pledge #glhf-section {
  width: 100%;
  background: url(/images/pledge-background-b.jpg) 40% center no-repeat;
  background-size: cover;
  margin-top: 5em;
  color: var(--white-color);
}

#pledge #glhf-section .page-section {
  margin-top: 5em;
  margin-bottom: 5em;
}

#pledge .promise-section {
  max-width: 38em;
  width: 100%;
  margin-right: 2em;
}

#pledge #glhf-section .section-title {
  text-shadow: var(--black-color) 0px 0px 20px;
}

#pledge .promise-list .promise:not(:first-child) {
  margin-top: 2em;
}

#pledge .promise-list .number {
  width: 29px;
  height: 29px;
  min-width: 29px;
  min-height: 29px;
  border-radius: 50%;
  background: var(--bright-green-color);
  border: 3px solid var(--white-color);
  font-size: 1.3em;
  font-family: var(--title-font);
  color: var(--dark-green-color);
  text-align: center;
  line-height: 32px;
  margin-right: 0.5em;
}

#pledge .promise-list .text {
  font-family: var(--body-font);
  font-weight: 500;
  font-size: 1.29em;
  line-height: 1.3em;
  text-shadow: var(--black-color) 0px 0px 20px;
}

#pledge .reporting-section {
  max-width: 38em;
  width: 100%;
  margin-right: 4em;
}

#pledge .report-button {
  border: 5px solid var(--light-gray-color);
  background-color: var(--dark-fuchsia-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.5em;
  padding: .75em 3em .75em 3em;
  margin-top: 1em;
  text-transform: uppercase;
  text-decoration: none;
}

#pledge .report-button:hover {
  cursor: pointer;
  background-color: var(--bright-fuchsia-color);
}

#pledge .report-button:focus {
  cursor: pointer;
  background-color: var(--bright-blue-color);  
  outline: none;
}

#pledge .report-button::-moz-focus-inner {
  border: 0 !important;
} 

#pledge .rules-section {
  max-width: 30em;
  width: 100%;
  font-size: 0.9em;
}

#pledge .page-section .rules-section p {
  font-size: 1em;
}

#pledge .rules-section ul {
  list-style-position: outside;
  font-size: 0.95em;
  line-height: 1.4em;
  margin-left: 1.2em;
  margin-top: 0.4em;
  margin-bottom: 1em; 
}

#pledge #twitter-section {
  width: 100%;
  background: url(/images/pledge-background-c.jpg) 50% center no-repeat;
  background-size: cover;
  margin-top: 5em;
  color: var(--white-color);
}

#pledge #twitter-section .page-section {
  margin-top: 5em;
  margin-bottom: 5em;
}

#pledge #twitter-section .section-title {
  text-shadow: var(--black-color) 0px 0px 20px;
  text-align: center;
}

#pledge #twitter-section .tweets {
  width: 100%;
}

#pledge #twitter-section twitter-widget.twitter-tweet {
  margin-top: 1em !important;
  margin-bottom: 1em !important;
  margin-left: 0.5em;
  margin-right: 0.5em;  
}

#pledge .about-section {
  max-width: 40em;
  width: 100%;
  margin-right: 2em;
}

#pledge img.about-image {
  margin-top: 2em;
  margin-bottom: 1em;
  max-width: 408px;
  max-height: 248px;
  width: 95%;
  height: auto;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; 
}

#pledge .locales-section {
  background: var(--black-color);
  color: var(--white-color);
  font-family: var(--body-font), var(--alt-title-font);
  padding: 0.4em 1.4em 1.1em 1.4em;
  font-weight: 500;
}

#pledge .locales-section a {
  margin-top: 0.8em;
  margin-right: 0.4em;
  margin-left: 0.4em;
}


/************************************/
/*     Pledge Resource Download     */
/************************************/

#pledge #download-section {
  width: 100%;
  background: linear-gradient(315deg, var(--dark-green-color) 28%, var(--bright-green-color) 28%);
  margin-top: 5em;
  color: var(--white-color);
}

#pledge #download-section .page-section {
  margin-top: 5em;
  margin-bottom: 5em;
}

#pledge #download-section .section-title {
  font-size: 3.5em;
  margin-bottom: 0.5em;
}

#pledge #download-section .text-section {
  font-size: 1em;
  font-weight: 400;
  max-width: 42em;
  width: 100%;
  color: var(--white-color);
}

#pledge img.download-preview {
  max-width: 300px;
  height: auto;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  margin-right: 2em;
}

#pledge .download-subsection {
  font-size: 1em;
  font-weight: 400;
}

#pledge .download-subsection .text-section {
  font-size: 0.85em;
  max-width: 43em;
}

#pledge #rules-text {
  display: none;
}

#pledge a.resource {
  max-width: 32em;
  margin-top: 2em;
  margin-right: 1em;
}

#pledge a.resource .icon {
  font-family: var(--icon-font);
  font-size: 4em;
  color: var(--bright-green-color);
  min-width: 74px;
  text-align: center;
  margin-right: 0.1em;
}

#pledge a.resource .description {
  font-weight: 500;
  font-size: 0.8em;
  color: var(--gray-color);
  line-height: 1.4em;
}

#pledge a.resource .title {
  font-weight: 500;
  line-height: 1.4em;
}

#pledge a.resource:hover .icon,
#pledge a.resource:hover .title {
  color: var(--bright-orange-color);
  cursor: pointer;
}

#pledge a.resource:active .icon,
#pledge a.resource:active .title {
  color: var(--bright-green-color);
}


/************************************/
/*        Pledge Show Style         */
/************************************/

#pledge .button-wrap {
  width: 100%;
}

#pledge .twitch-button {
  border: 5px solid var(--dark-green-color);
  background-color: var(--bright-green-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.5em;
  padding: .75em 1.5em .75em 1.5em;
  margin-top: 2em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
}

#pledge .twitch-button:hover {
  cursor: pointer;
  background-color: var(--bright-orange-color);
  border: 5px solid var(--dark-orange-color);
}

#pledge .twitch-button:focus {
  cursor: pointer;
  background-color: var(--bright-blue-color);
  border: 5px solid var(--dark-blue-color);
  outline: none;
}

#pledge .twitch-button::-moz-focus-inner {
  border: 0 !important;
} 

#pledge .social-share {
  margin-bottom: 2em;
}

#pledge .social-button {
  border: 5px solid var(--dark-blue-color);
  background-color: var(--bright-blue-color);
  color: var(--white-color);
  font-family: var(--title-font), var(--icon-font);
  font-weight: 500;
  font-size: 1.2em;
  padding: .75em 1.5em .75em 1.5em;
  margin-top: 2em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  min-width: 6em;
}

#pledge .social-button:hover {
  cursor: pointer;
  background-color: var(--bright-orange-color);
  border: 5px solid var(--dark-orange-color);
}

#pledge .social-button:focus {
  cursor: pointer;
  background-color: var(--bright-blue-color);
  border: 5px solid var(--dark-blue-color);
  outline: none;
}

#pledge .social-button::-moz-focus-inner {
  border: 0 !important;
} 

#pledge .twitch-instructions {
  margin-top: 2em;
}

#pledge .twitch-instructions ol {
  list-style-position: outside;
  font-size: 0.95em;
  line-height: 1.4em;
  margin-left: 1em;
  margin-top: 0.4em;
}

#pledge .twitch-instructions img {
  margin-top: 2em;
}

#pledge .referral-link {
  margin-top: 4em;
}


/************************************/
/*    Referral Lookup Page Style    */
/************************************/

#referral-lookup .session-box {
  width: 24em;
  background: var(--dark-white-color);
  padding: 2em 3em 2em 3em;
  border: solid 5px var(--black-color);
}

#referral-lookup form .title {
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 2.2em;
  margin-bottom: 1em;
}

#referral-lookup form .item {
  margin-bottom: 1.2em;
  width: 100%;
}

#referral-lookup form .last-item {
  margin-top: 1em;
}

#referral-lookup form label.text-field {
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 1em;
  margin-top: 0.5em;
}

#referral-lookup form input.text-field {
  color: var(--black-color);
  background: var(--white-color);
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 1.1em;
  border: none;
  border: 4px solid var(--black-color);
  outline: none;
  padding: 0.8em 1em 0.7em 1em;
}

#referral-lookup form input.text-field:hover {
  border: 4px solid var(--bright-orange-color);
}

#referral-lookup form input.text-field:focus {
  border: 4px solid var(--bright-blue-color);
}

#referral-lookup form .flash {
  text-align: center;
  margin-bottom: 2em;
  font-size: 0.85em;
  color: var(--alert-red-color);
}

#referral-lookup form .button {
  border: 4px solid var(--light-black-color);
  background-color: var(--bright-green-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.2em;
  padding: 0.75em 1em 0.75em 1em;
  text-transform: uppercase;
}

#referral-lookup form .button:hover {
  cursor: pointer;
  background-color: var(--bright-orange-color);
}

#referral-lookup form .button:focus {
  cursor: pointer;
  background-color: var(--bright-blue-color);  
  outline: none;
}

#referral-lookup form .button::-moz-focus-inner {
  border: 0 !important;
}


/***********************************/
/*         Responsiveness          */
/***********************************/

@media (max-width:60em) {
  #pledge .intro-section {
    max-width: none;
    min-width: 30em;
  }

  #pledge img.intro-image {
    margin-bottom: 3em;
    margin-left: 0em;
  }
  
  #pledge .trailer-video {
    margin-bottom: 3em;
    margin-left: 0em;
    min-width: 30em;
  }
  
  #pledge .challenge-section {
    max-width: none;
    min-width: 16em;
    margin-left: 0em;
    margin-bottom: 3em;
  }
  
  #pledge .twitch-section {
    max-width: none;
    min-width: 16em;
  }
  
  #pledge .twitch-badge {
    width: 160px;
    height: 160px;
  }
  
  #pledge .promise-section {
    max-width: none;
    min-width: 30em;
  }
    
  #pledge .reporting-section {
    max-width: none;
    min-width: 30em;
    margin-right: 0em;
  }
  
  #pledge .rules-section {
    max-width: none;
    min-width: 30em;
    margin-top: 2em;
  }
  
  #pledge .about-section {
    max-width: none;
    min-width: 30em;
    margin-right: 0em;
  }
  
  #pledge img.download-preview {
    margin-top: 1em;
    margin-bottom: 2em;
    margin-right: 0em;
  }
}

@media (max-width:48em) {
  #pledge #quest-section {
    margin-top: 3em;
  }

  #pledge #quest-section .page-section {
    margin-top: 3em;
    margin-bottom: 3em;
  }

  #pledge #glhf-section {
    margin-top: 3em;
  }

  #pledge #glhf-section .page-section {
    margin-top: 3em;
    margin-bottom: 3em;
  }
  
  #pledge #twitter-section {
    margin-top: 3em;
  }
  
  #pledge #twitter-section .page-section {
    margin-top: 3em;
    margin-bottom: 3em;
  }
}

@media (max-width:38em) {
  #pledge .social-button {
    width: 100%;
  }
}

@media (max-width:34em) {
  #pledge .intro-section {
    min-width: 16em;
  }
  
  #pledge .trailer-video {
    min-width: 16em;
  }
  
  #pledge .leaderboard .subsection-title-a {
    font-size: 1.5em;
  }

  #pledge .leaderboard .subsection-title-b {
    font-size: 1.4em;
  }
  
  #pledge .promise-section {
    min-width: 16em;
  }
  
  #pledge .reporting-section {
    min-width: 16em;
  }
  
  #pledge .rules-section {
    min-width: 16em;
  }
    
  #pledge #twitter-section twitter-widget.twitter-tweet {
    width: 340px !important;
  }
  
  #pledge .about-section {
    min-width: 16em;
  }
  
  #pledge .twitch-instructions img {
    max-width: 18em;
  }
  
  #referral-lookup .session-box {
    width: auto;
    padding: 2em 2em 2em 2em;
  }
}

@media (max-width:30em) {
  #pledge .promise-list .text {
    font-size: 1.1em;
  }
  
  #pledge .report-button {
    font-size: 1.3em;
    padding: .75em 2em .75em 2em;
  }
  
  #pledge .twitch-button {
    font-size: 1.3em;
  }
}

@media (max-width:26em) {
  #pledge .report-button {
    font-size: 1.1em;
  }
  
  #pledge #twitter-section twitter-widget.twitter-tweet {
    width: 300px !important;
  }
  
  #pledge .twitch-button {
    font-size: 1.1em;
    padding: 1em .75em 1em .75em;
  }
}
/************************************/
/*        Report Form Style         */
/************************************/

#report form {
  border: 5px solid var(--dark-fuchsia-color);
  background: var(--faint-darkfuch-overlay);
  padding: 2em 2em 2.5em 2em;
}

#report form .title {
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 2.5em;
  margin-bottom: 1em;
}

#report form .intro {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 1em;
  line-height: 1.4em;
  margin-bottom: 2.5em;
}

#report form .item {
  margin-bottom: 1.2em;
  width: 100%;
}

#report form .item.half-width {
  max-width: 17em;
}  

#report form label.text-field {
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 0.8em;
  margin-bottom: 0.3em;
}

#report form #incident-descripton-counter,
#report form #recommended-response-counter {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 0.8em;
  color: var(--black-color);
}

#report form .description {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 0.8em;
  margin-bottom: 0.3em;
}

#report form input.text-field {
  color: var(--black-color);
  background: var(--white-color);
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 1.1em;
  border: 4px solid var(--dark-fuchsia-color);
  outline: none;
  padding: 0.8em 1em 0.7em 1em;
}

#report form input.text-field.small-font {
  font-size: 0.9em;
  padding: 1em 1em 0.9em 1em;
}

#report form input.text-field:hover {
  border: 4px solid var(--bright-orange-color);
}

#report form input.text-field:focus {
  border: 4px solid var(--bright-blue-color);
}

#report form input[type="text"]::-moz-placeholder,
#report form input[type="url"]::-moz-placeholder{
  color: var(--gray-color);
}

#report form input[type="text"]::-webkit-input-placeholder,
#report form input[type="url"]::-webkit-input-placeholder{
  color: var(--light-gray-color);
}

#report form textarea {
  color: var(--black-color);
  background: var(--white-color);
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 0.9em;
  line-height: 1.2em;
  border: 4px solid var(--dark-fuchsia-color);
  outline: none;
  padding: 0.7em 0.6em 0.7em 0.6em;
  height: 6em;
  resize: none;
}

#report form textarea:hover {
  border: 4px solid var(--bright-orange-color);
}

#report form textarea:focus {
  border: 4px solid var(--bright-blue-color);
}

#report form .status-response {
  font-family: var(--body-font), var(--icon-font);
  font-weight: 500;
  font-size: 0.8em;
  margin-top: 0.4em;
  height: 0.8em;
}

#report form .status-response.searching:before {
  content: "\f002  Searching...";
  color: var(--gray-color);
}

#report form .status-response.invalid:before {
  content: "\f071  Invalid";
  color: var(--bright-orange-color);
}

#report form .status-response.not-found:before {
  content: "\f05e  Not Found";
  color: var(--alert-red-color);
}

#report form .status-response.found:before {
  content: "\f1e8  Found";
  color: var(--bright-green-color);  
}

#report form .flash {
  text-align: center;
  margin-bottom: 2.5em;
  font-size: 0.85em;
  color: var(--alert-red-color);
}

#report form .button {
  border: 5px solid var(--light-gray-color);
  background-color: var(--dark-fuchsia-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.5em;
  padding: .75em;
  margin-top: 1.5em;
  text-transform: uppercase;
}

#report form .button:hover {
  cursor: pointer;
  background-color: var(--bright-fuchsia-color);
}

#report form .button:focus {
  cursor: pointer;
  background-color: var(--bright-blue-color);  
  outline: none;
}

#report form .button::-moz-focus-inner {
  border: 0 !important;
}


/***********************************/
/*         Responsiveness          */
/***********************************/

@media (max-width:42em) {
  #report form .item.half-width {
    max-width: none;
  }
}
/************************************/
/*       Report Page Sections       */
/************************************/

#report .page-section {
  max-width: 43em;
}


/************************************/
/*     Backstage Report Review      */
/************************************/

#backstage-container .report-item {
  margin-top: 1.25em;
  width: 100%;
  overflow-wrap: break-word;
}

#backstage-container .report-item.flush-top {
  margin-top: 0em;
}

#backstage-container .report-item.half-width {
  max-width: 20em;
}

#backstage-container .report-item .item-title {
  font-weight: 600;
  font-size: 0.9em;
  margin-bottom: 0.2em;
}

#backstage-container .report-item .item-title.large {
  font-weight: 600;
  font-size: 1.1em;
}

#backstage-container .report-item .item-title .icon {
  position: relative;
  font-family: var(--solid-icon-font);
  margin-right: 0.3em;
}

#backstage-container .report-item .item-title img {
  height: 1.4em;
  margin-right: 0.2em;
}

#backstage-container .report-item .item-text {
  font-size: 1em;
}

#backstage-container .report-item .item-text.empty.large {
  font-size: 0.9em;
}

#backstage-container .report-item .item-text.empty {
  font-size: 0.8em;
  font-weight: 700;
  margin-top: 0.3em;
  color: var(--light-gray-color);
}

#backstage-container .report-item .item-text.small {
  font-size: 0.9em;
  white-space: preserve;
}

#backstage-container .report-item .item-text.stacking {
  margin-bottom: 0.5em;
}

#backstage-container .report-item .item-text.stacking:not(:last-child) {
  margin-right: 1em;
}

#backstage-container .report-item .item-text img {
  height: 1.2em;
  margin-right: 0.3em;
}

#backstage-container .report-item .item-text .inline-icon {
  font-family: var(--solid-icon-font), var(--icon-font);
  margin-right: 0.4em;
}

#backstage-container .report-item .item-text a.twitch_id {
  font-size: 0.65em;
  font-weight: 500;
  margin-left: 0.6em;
  padding: 3px 3px 2px 3px;
  color: var(--white-color);
  background: var(--twitch-purple-color);
}

#backstage-container .report-item .item-text a.twitch_id:hover {
  background: var(--bright-orange-color);
}

#backstage-container .report-item .item-list {
  margin-top: 0.6em;
  margin-bottom: 0.6em;
}

/************************************/
/*    Report Screenshot Overlay     */
/************************************/

#report-screenshot {
  position: relative;
}

#report-screenshot #screenshot-overlay {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--black-overlay);
  color: var(--white-color);
  cursor: pointer;
}

#report-screenshot #screenshot-overlay .action {
  background-color: var(--white-overlay);
  font-family: var(--alt-title-font);
  font-weight: 400;
  font-size: 0.7em;
  text-align: center;
  color: var(--white-color);
  padding: 0.8em 1em 0.8em 1em;
}


/************************************/
/*     Backstage Report Buttons     */
/************************************/

#backstage-container .report-buttons {
  margin-top: 2em;
}

#backstage-container .report-buttons .button {
  border: 4px solid var(--light-black-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.2em;
  padding: 0.75em 1em 0.75em 1em;
  text-transform: uppercase;
  text-align: center;
  min-width: 4.5em;
  margin-left: 2em;
}

#backstage-container .report-buttons .button.mini {
  border: 3px solid var(--light-black-color);
  font-weight: 400;
  font-size: 0.9em;
  padding: 0.5em 0.75em 0.5em 0.75em;
  min-width: none;
}

#backstage-container .report-buttons .button.back-button {
  background-color: var(--light-black-color);
}

#backstage-container .report-buttons .button.dismiss-button {
  background-color: var(--gray-color);
}

#backstage-container .report-buttons .button.undismiss-button {
  background-color: var(--bright-green-color);
}

#backstage-container .report-buttons .button.warn-button {
  background-color: var(--bright-orange-color);
}

#backstage-container .report-buttons .button.revoke-button {
  background-color: var(--alert-red-color);
}

#backstage-container .report-buttons .button.warned-button,
#backstage-container .report-buttons .button.warned-button:hover,
#backstage-container .report-buttons .button.warned-button:focus {
  cursor: default;
  background-color: var(--light-orange-overlay);
  border: 4px solid var(--bright-orange-color);
  color: var(--bright-orange-color);
}

#backstage-container .report-buttons .button.revoked-button,
#backstage-container .report-buttons .button.revoked-button:hover,
#backstage-container .report-buttons .button.revoked-button:focus {
  cursor: default;
  background-color: var(--light-red-overlay);
  border: 4px solid var(--alert-red-color);
  color: var(--alert-red-color);
}

#backstage-container .report-buttons .button:hover {
  cursor: pointer;
  background-color: var(--bright-blue-color);
}

#backstage-container .report-buttons .button:focus {
  cursor: pointer;
  background-color: var(--bright-blue-color);  
  outline: none;
}

#backstage-container .report-buttons .button::-moz-focus-inner {
  border: 0 !important;
}


/***********************************/
/*         Responsiveness          */
/***********************************/

@media (max-width:46em) {
  #backstage-container .report-buttons .button {
    width: 100%;
    margin-left: 0em;
    margin-top: 2em;
  }
  
  #backstage-container .report-buttons a.stealth {
    margin-left: auto;
    margin-right: auto;
    border-bottom: 2px solid var(--bright-green-color);
    margin-bottom: -2px;
  }
}
/************************************/
/*      Resources Page Header       */
/************************************/

#resources .page-header {
  background: url(/images/resources-header.jpg) 80% center no-repeat;
  background-size: cover;
}

#resources #tapestry {
  background: var(--bright-blue-color);
}

#resources #tapestry:after {
  border-top: 50px solid var(--bright-blue-color);
}

#resources #tapestry .title-line-a {
  font-family: var(--title-font);
  color: var(--dark-blue-color);
  font-size: 3em;
  margin-top: 2.9em;
}

#resources #tapestry .title-line-b {
  font-family: var(--title-font);
  color: var(--white-color);
  font-size: 2.7em;
  margin-top: .2em;
  margin-bottom: 2.95em;
}


/************************************/
/*       Resources Page Intro       */
/************************************/

#resources .intro-section {
  max-width: 34em;
  width: 100%;
  font-size: 1.2em;
}

#resources img.feature-image {
  max-width: 408px;
  height: auto;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}


/************************************/
/*      Resources Page Sections     */
/************************************/

#resources #keystone-code-section {
  width: 100%;
  background: url(/images/keystone-header.jpg) 50% 60% no-repeat;
  background-size: cover;
  margin-top: 5em;
  color: var(--white-color);
}

#resources #keystone-code-section .page-section {
  margin-top: 5em;
  margin-bottom: 5em;
}

#resources #keystone-code-section .text-section {
  font-size: 1.1em;
  font-weight: 500;
  max-width: 34em;
  width: 100%;
  text-shadow: var(--black-color) 0px 0px 20px;
}

#resources #keystone-code-section div.text-section p {
  line-height: 1.6em;
}

#resources #keystone-code-section .button {
  border: 5px solid var(--white-color);
  background-color: var(--bright-blue-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.6em;
  padding: .4em .75em .45em .75em;
  margin-top: 1.5em;
  text-transform: uppercase;
  max-width: 13.5em;
  white-space: normal;
  text-align: center;
  line-height: 1.4em;
}

#resources #keystone-code-section .button:hover {
  cursor: pointer;
  background-color: var(--bright-orange-color);
}

#resources #keystone-code-section .button:focus {
  cursor: pointer;
  background-color: var(--bright-blue-color);  
  outline: none;
}

#resources #keystone-code-section .button::-moz-focus-inner {
  border: 0 !important;
}

#resources #inclusion-101-section {
  width: 100%;
  background: url(/images/inclusion-header.jpg) 50% 55% no-repeat;
  background-size: cover;
  margin-top: 5em;
  color: var(--white-color);
}

#resources #inclusion-101-section .page-section {
  margin-top: 5em;
  margin-bottom: 5em;
}

#resources #inclusion-101-section .text-section {
  font-size: 1.1em;
  font-weight: 500;
  max-width: 34em;
  width: 100%;
  text-shadow: var(--black-color) 0px 0px 20px;
}

#resources #inclusion-101-section div.text-section p {
  line-height: 1.6em;
}

#resources #inclusion-101-section .button {
  border: 5px solid var(--white-color);
  background-color: var(--bright-blue-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.6em;
  padding: .4em .75em .45em .75em;
  margin-top: 1.5em;
  text-transform: uppercase;
  max-width: 13.5em;
  white-space: normal;
  text-align: center;
  line-height: 1.4em;
}

#resources #inclusion-101-section .button:hover {
  cursor: pointer;
  background-color: var(--bright-orange-color);
}

#resources #inclusion-101-section .button:focus {
  cursor: pointer;
  background-color: var(--bright-blue-color);  
  outline: none;
}

#resources #inclusion-101-section .button::-moz-focus-inner {
  border: 0 !important;
}

#resources a.publication {
  max-width: 32em;
  margin-top: 2em;
  margin-right: 1em;
}

#resources a.publication .icon {
  font-family: var(--icon-font);
  font-size: 4em;
  color: var(--bright-blue-color);
}

#resources a.publication .date {
  font-weight: 500;
  font-size: 0.8em;
  color: var(--gray-color);
  line-height: 1.4em;
  margin-left: 1.2em;
}

#resources a.publication .title {
  font-weight: 500;
  line-height: 1.4em;
  margin-left: 1em;
}

#resources a.publication:hover .icon,
#resources a.publication:hover .title {
  color: var(--bright-orange-color);
}

#resources a.publication:active .icon,
#resources a.publication:active .title {
  color: var(--bright-blue-color);
}

/***********************************/
/*         Responsiveness          */
/***********************************/

@media (max-width:70em) {
  #resources .intro-section {
    margin-bottom: 2em;
  }
}

@media (max-width:66em) {
  #resources a.publication {
    margin-right: 0em;
  }
}
/************************************/
/*        Stories Page Header       */
/************************************/

#stories .page-header {
  background: url(/images/stories-header.jpg) 80% center no-repeat;
  background-size: cover;
}

#stories #tapestry {
  background: var(--bright-fuchsia-color);
}

#stories #tapestry:after {
  border-top: 50px solid var(--bright-fuchsia-color);
}

#stories #tapestry .title-line-a {
  font-family: var(--title-font);
  color: var(--dark-fuchsia-color);
  font-size: 3.8em;
  margin-top: 2.2em;
}

#stories #tapestry .title-line-b {
  font-family: var(--title-font);
  color: var(--white-color);
  font-size: 3.5em;
  margin-top: .1em;
  margin-bottom: 1.9em;
}


/************************************/
/*        Stories Page Intro        */
/************************************/

#stories .page-section .headline {
  margin-bottom: 0em;
}


/************************************/
/*        Stories Page Cards        */
/************************************/

#stories .card {
  margin-bottom: 1em;
}

#stories .card-image {
  overflow: hidden;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#stories .card-image img {
  max-width: 30em;
  height: auto;
  width: 100%;
  margin: 0px;
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  -moz-transition-duration: .5s;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
}

#stories .card-image img:hover {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  -moz-transition-duration: .5s;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
}

#stories .card-body {
  margin-left: 2em;
}

#stories a.card-headline {
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 1.4em;
  margin-top: 0.75em;
  margin-bottom: 1.5em;
}

#stories a.card-headline:hover {
  color: var(--bright-orange-color);
}

#stories a.card-headline:active {
  color: var(--bright-blue-color);
}

#stories .card-text {
  color: var(--gray-color);
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 0.9em;
  line-height: 1.4;
}

#stories .card-descriptor {
  color: var(--dark-fuchsia-color);
  font-size: 0.7em;
  margin-top: 2em;
}



/***********************************/
/*         Responsiveness          */
/***********************************/

@media (max-width:60em) {
  #stories .card-body {
    min-width: 30em;
    margin-left: 0em;
    padding: 0.5em;
    margin-bottom: 2em;
  }
  
  #stories .card-headline {
    margin-bottom: .75em;
  }
  
  #stories .card-descriptor {
    margin-top: 1em;
  }
  
}

@media (max-width:34em) {
  #stories .card-body {
    min-width: 16em;
  }
}





/************************************/
/*       Concern Page Sections      */
/************************************/

#user .page-section {
  max-width: 43em;
}


/************************************/
/*      Backstage User Profile      */
/************************************/

#backstage-container .user-item {
  margin-top: 1.25em;
  width: 100%;
  overflow-wrap: break-word;
}

#backstage-container .user-item.flush-top {
  margin-top: 0em;
}

#backstage-container .user-item.half-width {
  max-width: 22em;
}

#backstage-container .user-item.third-width {
  max-width: 12em;
}

#backstage-container .user-item .user-avatar {
  width: 100px;
  height: 100px;
  padding: 4px;
  border: 3px solid var(--light-black-color);
  border-radius: 100px;
}

#backstage-container .user-item .item-title {
  font-weight: 600;
  font-size: 0.9em;
  margin-bottom: 0.2em;
}

#backstage-container .user-item .item-title.large {
  font-weight: 600;
  font-size: 1.1em;
}

#backstage-container .user-item .item-title .icon {
  position: relative;
  font-family: var(--solid-icon-font);
  margin-right: 0.3em;
}

#backstage-container .user-item .item-text {
  font-size: 1em;
}

#backstage-container .user-item .item-text.empty {
  font-size: 0.8em;
  font-weight: 700;
  margin-top: 0.3em;
  color: var(--light-gray-color);
}

#backstage-container .user-item .item-text.empty.large {
  font-size: 0.9em;
}

#backstage-container .user-item .item-text img {
  height: 1.2em;
  margin-right: 0.3em;
}

#backstage-container .user-item .item-list {
  margin-top: 0.6em;
}


/************************************/
/*      Backstage User Buttons      */
/************************************/

#backstage-container .user-buttons {
  margin-top: 2em;
}

#backstage-container .user-buttons .button {
  border: 4px solid var(--light-black-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.2em;
  padding: 0.75em 1em 0.75em 1em;
  text-transform: uppercase;
  text-align: center;
  min-width: 4.5em;
  margin-left: 2em;
}

#backstage-container .user-buttons .button.mini {
  border: 3px solid var(--light-black-color);
  font-weight: 400;
  font-size: 0.9em;
  padding: 0.5em 0.75em 0.5em 0.75em;
  min-width: none;
}

#backstage-container .user-buttons .button.back-button {
  background-color: var(--light-black-color);
}

#backstage-container .user-buttons .button:hover {
  cursor: pointer;
  background-color: var(--bright-blue-color);
}

#backstage-container .user-buttons .button:focus {
  cursor: pointer;
  background-color: var(--bright-blue-color);
  outline: none;
}

#backstage-container .user-buttons .button::-moz-focus-inner {
  border: 0 !important;
}


/***********************************/
/*         Responsiveness          */
/***********************************/

@media (max-width:46em) {
  #backstage-container .user-buttons .button {
    width: 100%;
    margin-left: 0em;
    margin-top: 2em;
  }
}
:root {
  --title-font:             'Nevis', 'Rubik';
  --alt-title-font:         'Rubik';
  --body-font:              'Gotham', 'Rubik';
  --code-font:              'Inconsolata';
  --icon-font:              'FontAwesomeBrands', 'FontAwesome', 'FontAwesomeSolid';
  --solid-icon-font:        'FontAwesomeSolid';
                            
  --black-color:            #160919;
  --light-black-color:      #2E2230;
  --gray-color:             #84848C;
  --light-gray-color:       #D0CED1;
  --dark-white-color:       #F3F2F3;
  --medium-white-color:     #FDFCFD;
  --white-color:            #FFFFFF;
                            
  --bright-green-color:     #2FC872;
  --dark-green-color:       #005E4A;
  --bright-orange-color:    #F5902C;
  --dark-orange-color:      #D1461C;
  --bright-blue-color:      #3887F9;
  --dark-blue-color:        #2026CC;
  --bright-fuchsia-color:   #B11478;
  --dark-fuchsia-color:     #57145B;
  
  --alert-red-color:        #DD1444;
  
  --twitch-purple-color:    #9146FF;
                            
  --black-overlay:          rgba(22,9,25,0.6);
  --white-overlay:          rgba(255,255,255,0.6);
  --orange-overlay:         rgba(245,144,44,0.6);
  --blue-overlay:           rgba(56,135,249,0.6);

  --medium-orange-overlay:  rgba(245,144,44,0.4);
  --medium-blue-overlay:    rgba(56,135,249,0.4);

  --light-black-overlay:    rgba(22,9,25,0.4);
  --light-green-overlay:    rgba(47,200,114,0.2);
  --light-orange-overlay:   rgba(245,144,44,0.2);
  --light-blue-overlay:     rgba(56,135,249,0.2);
  --light-fuchsia-overlay:  rgba(177,20,120,0.2);
  --light-red-overlay:      rgba(221,20,68,0.2);

  --faint-blue-overlay:     rgba(56,135,249,0.05);
  --faint-fuchsia-overlay:  rgba(177,20,120,0.05);
  --faint-darkfuch-overlay: rgba(87,20,91,0.05);
}
/************************************/
/*      Verification Form Style     */
/************************************/

#verification form {
  border: 5px solid var(--bright-fuchsia-color);
  background: var(--faint-fuchsia-overlay);
  padding: 2em 2em 2.5em 2em;
  margin-bottom: 3em;
}

#verification form .title {
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 2.5em;
  margin-bottom: 1em;
}

#verification form .intro {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 1em;
  line-height: 1.4em;
  margin-bottom: 2.5em;
}

#verification form .subtitle {
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.5em;
  margin-top: 1em;
  margin-bottom: 1em;
}

#verification form .midway {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 0.9em;
  line-height: 1.4em;
  margin-bottom: 2.5em;
}

#verification form .item {
  margin-bottom: 1.2em;
  width: 100%;
}

#verification form .item.half-width {
  max-width: 17em;
}  

#verification form label.text-field {
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 0.8em;
  margin-bottom: 0.3em;
}

#verification form #additional-notes-counter {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 0.8em;
  color: var(--black-color);
}

#verification form .description {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 0.8em;
  margin-bottom: 0.3em;
  max-width: 40em;
}

#verification form .description.smaller {
  font-size: 0.78em;
}

#verification form input.text-field {
  color: var(--black-color);
  background: var(--white-color);
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 1.1em;
  border: 4px solid var(--bright-fuchsia-color);
  outline: none;
  padding: 0.8em 1em 0.7em 1em;
}

#verification form select {
  color: var(--black-color);
  background: var(--white-color);
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 1.1em;
  border: 4px solid var(--bright-fuchsia-color);
  outline: none;
  padding: 0.9em 1em 0.8em 1em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  
  /** Use Bootstrap's hack for adjusting the dropdown indicator so it respects padding **/
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1em;
}

#verification form textarea {
  color: var(--black-color);
  background: var(--white-color);
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 0.9em;
  line-height: 1.2em;
  border: 4px solid var(--bright-fuchsia-color);
  outline: none;
  padding: 0.7em 0.6em 0.7em 0.6em;
  height: 6em;
  resize: none;
}

#verification form input.text-field:hover,
#verification form select:hover,
#verification form textarea:hover {
  border: 4px solid var(--bright-orange-color);
}

#verification form input.text-field:focus,
#verification form select:focus,
#verification form textarea:focus {
  border: 4px solid var(--bright-blue-color);
}

#verification form .flash {
  text-align: center;
  margin-bottom: 2.5em;
  font-size: 0.85em;
  color: var(--alert-red-color);
}

#verification form .button {
  border: 5px solid var(--light-gray-color);
  background-color: var(--bright-fuchsia-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.5em;
  padding: .75em;
  margin-top: 1.5em;
  text-transform: uppercase;
}

#verification form .button:hover {
  cursor: pointer;
  background-color: var(--dark-fuchsia-color);
}

#verification form .button:focus {
  cursor: pointer;
  background-color: var(--bright-blue-color);  
  outline: none;
}

#verification form .button::-moz-focus-inner {
  border: 0 !important;
}


/***********************************/
/*         Responsiveness          */
/***********************************/

@media (max-width:42em) {
  #verification form .item.half-width {
    max-width: none;
  }
}
/************************************/
/*     Verification Page Header     */
/************************************/

#verification .page-header {
  background: url(/images/verification-header.jpg) 50% 55% no-repeat;
  background-size: cover;
  height: 250px;
}

#verification .page-header .title {
  margin-left: 1.4em;
  color: var(--white-color);
  text-shadow: var(--black-color) 0px 0px 30px;
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 3em;
}


/************************************/
/*    Verification Page Sections    */
/************************************/

#verification .intro-section {
  max-width: 36em;
  width: 100%;
  font-size: 1.1em;
}

#verification img.feature-image {
  max-width: 408px;
  height: auto;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}

#verification form#new_verification {
  max-width: 36em;
}

#verification .faq-section {
  max-width: 32em;
  width: 100%;
  margin-bottom: 3em;
  margin-left: 4em; /* Remove responsively */
}

#verification .faq-header {
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.5em;
  line-height: 1.5em;
  padding: 0.85em 1em 0.85em 1em;
  background: var(--blue-overlay);
  color: var(--dark-blue-color);
  border-bottom: 5px solid var(--dark-blue-color);
}

#verification .faq-item {
  padding: 1em 1em 1em 1em;
  font-size: 0.9em;
  line-height: 1.5em;
}

#verification .faq-item.even {
  background: var(--light-orange-overlay);
}

#verification .faq-item.odd {
  background: var(--medium-orange-overlay);
}

#verification .faq-item:hover {
  cursor: pointer;
  background: var(--blue-overlay);
}

#verification .faq-item:active {
  cursor: pointer;
  background: var(--blue-overlay); 
}

#verification .faq-item .question {
  font-weight: 500;
}

#verification .faq-item .answer {
  display: none;
  margin-top: 1em;
}

#verification #concern-section {
  width: 100%;
  background: linear-gradient(315deg, var(--blue-overlay) 46%, var(--bright-blue-color) 46%);
  margin-top: 0.5em;
  color: var(--white-color);
}

#verification #concern-section .page-section {
  margin-top: 5em;
  margin-bottom: 5em;
}

#verification #concern-section .section-title {
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 2.5em;
  margin-bottom: 0.3em;
}

#verification #concern-section .text-section {
  font-size: 1em;
  font-weight: 500;
  max-width: 34em;
  width: 100%;
}

#verification #concern-section div.text-section p {
  line-height: 1.6em;
}

#verification #concern-section .button {
  border: 5px solid var(--light-gray-color);
  background-color: var(--dark-blue-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.6em;
  padding: .4em .75em .45em .75em;
  margin-top: 1em;
  text-transform: uppercase;
  max-width: 13.5em;
  white-space: normal;
  text-align: center;
  line-height: 1.4em;
}

#verification #concern-section .button:hover {
  cursor: pointer;
  background-color: var(--bright-blue-color);
}

#verification #concern-section .button:active {
  cursor: pointer;
  background-color: var(--bright-blue-color);
  outline: none;
}

#verification #concern-section .button::-moz-focus-inner {
  border: 0 !important;
}


/************************************/
/*  Backstage Verification Review   */
/************************************/

#backstage-container .verification-item {
  margin-top: 1.25em;
  width: 100%;
  overflow-wrap: break-word;
}

#backstage-container .verification-item.flush-top {
  margin-top: 0em;
}

#backstage-container .verification-item.half-width {
  max-width: 20em;
}

#backstage-container .verification-item .item-title {
  font-weight: 600;
  font-size: 0.9em;
  margin-bottom: 0.2em;
}

#backstage-container .verification-item .item-title.large {
  font-weight: 600;
  font-size: 1.1em;
}

#backstage-container .verification-item .item-title .icon {
  position: relative;
  font-family: var(--solid-icon-font);
  margin-right: 0.3em;
}

#backstage-container .verification-item .item-text {
  font-size: 1em;
}

#backstage-container .verification-item .item-text.empty,
#backstage-container .verification-item .item-text.submitted,
#backstage-container .verification-item .item-text.eligible,
#backstage-container .verification-item .item-text.denied,
#backstage-container .verification-item .item-text.withdrawn,
#backstage-container .verification-item .item-text.ignored,
#backstage-container .verification-item .item-text.pending {
  font-size: 0.8em;
  font-weight: 700;
  margin-top: 0.3em;
}

#backstage-container .verification-item .item-text.empty.large {
  font-size: 0.9em;
}

#backstage-container .verification-item .item-text.empty {
  color: var(--light-gray-color);
}

#backstage-container .verification-item .item-text.submitted {
  color: var(--bright-orange-color);
}

#backstage-container .verification-item .item-text.eligible {
  color: var(--bright-green-color);
}

#backstage-container .verification-item .item-text.denied,
#backstage-container .verification-item .item-text.withdrawn {
  color: var(--alert-red-color);
}

#backstage-container .verification-item .item-text.ignored {
  color: var(--bright-orange-color);
}

#backstage-container .verification-item .item-text.pending {
  color: var(--bright-blue-color);
}

#backstage-container .verification-item .item-text.small {
  font-size: 0.9em;
  white-space: preserve;
}

#backstage-container .verification-item .item-text img {
  height: 1em;
  margin-right: 0.4em;
}

#backstage-container .verification-item .item-text .inline-icon {
  font-family: var(--solid-icon-font), var(--icon-font);
  margin-right: 0.4em;
}

#backstage-container .verification-item .item-text.empty .inline-icon {
  margin-bottom: 0.2em;
}

#backstage-container .verification-item.stamp {
  margin-top: 0em;
}


/************************************/
/*  Backstage Verification Overlays */
/************************************/

#verification-photo-id,
#verification-doctors-note {
  position: relative;
}

#verification-photo-id #photo-id-overlay,
#verification-doctors-note #doctors-note-overlay  {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--black-overlay);
  color: var(--white-color);
  cursor: pointer;
}

#verification-photo-id #photo-id-overlay .action,
#verification-doctors-note #doctors-note-overlay .action {
  background-color: var(--white-overlay);
  font-family: var(--alt-title-font);
  font-weight: 400;
  font-size: 0.7em;
  text-align: center;
  color: var(--white-color);
  padding: 0.8em 1em 0.8em 1em;
}


/************************************/
/*  Backstage Verification Buttons  */
/************************************/

#backstage-container .verification-buttons {
  margin-top: 2em;
}

#backstage-container .verification-buttons.eligible {
  margin-top: 4em;
}

#backstage-container .verification-buttons .button {
  border: 4px solid var(--light-black-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.2em;
  padding: 0.75em 1em 0.75em 1em;
  text-transform: uppercase;
  text-align: center;
  min-width: 4.5em;
  margin-left: 2em;
}

#backstage-container .verification-buttons .button.mini {
  border: 3px solid var(--light-black-color);
  font-weight: 400;
  font-size: 0.9em;
  padding: 0.5em 0.75em 0.5em 0.75em;
  min-width: none;
}

#backstage-container .verification-buttons .button.back-button {
  background-color: var(--light-black-color);
}

#backstage-container .verification-buttons .button.ignore-button {
  background-color: var(--bright-orange-color);
}

#backstage-container .verification-buttons .button.deny-button,
#backstage-container .verification-buttons .button.withdrawal-button {
  background-color: var(--alert-red-color);
}

#backstage-container .verification-buttons .button.verify-button,
#backstage-container .verification-buttons .button.voucher-button,
#backstage-container .verification-buttons .button.resend-button {
  background-color: var(--bright-green-color);
}

#backstage-container .verification-buttons .button:hover {
  cursor: pointer;
  background-color: var(--bright-blue-color);
}

#backstage-container .verification-buttons .button:focus {
  cursor: pointer;
  background-color: var(--bright-blue-color);  
  outline: none;
}

#backstage-container .verification-buttons .button::-moz-focus-inner {
  border: 0 !important;
}


/***********************************/
/*         Responsiveness          */
/***********************************/

@media (max-width:80em) {
  #verification .faq-section {
    margin-left: 0em;
  }
}

@media (max-width:68em) {
  #verification .intro-section {
    margin-top: 2em;
  }
}

@media (max-width:46em) {
  #backstage-container .verification-item.stamp {
    margin-top: 1.25em;
  }
  
  #backstage-container .verification-buttons.eligible {
    margin-top: 2em;
  }
  
  #backstage-container .verification-buttons .button {
    width: 100%;
    margin-left: 0em;
    margin-top: 2em;
  }
}
/************************************/
/*     Work With Us Page Header     */
/************************************/

#work-with-us .page-header {
  background: url(/images/work-with-us-background.jpg) 50% 45% no-repeat;
  background-size: cover;
  height: 250px;
}

#work-with-us .page-header .title {
  margin-left: 1.4em;
  color: var(--white-color);
  text-shadow: var(--black-color) 0px 0px 30px;
  font-family: var(--title-font);
  font-weight: 600;
  font-size: 3em;
}


/************************************/
/*        Work With Us Page         */
/************************************/

#work-with-us .intro-section {
  max-width: 34em;
  width: 100%;
  font-size: 1.2em;
}

#work-with-us .feature-image {
  max-width: 408px;
  height: auto;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}

#work-with-us .involvement-section {
  margin: 1em 1em 4em 1em;
  max-width: 30em;
  width: 100%;
}

#work-with-us .involvement-icon {
  font-family: var(--solid-icon-font), var(--icon-font);
  font-size: 5em;
  margin-right: 0.2em;
}

#work-with-us .involvement-icon.green {
  color: var(--bright-green-color);
}

#work-with-us .involvement-icon.blue {
  color: var(--bright-blue-color);
}

#work-with-us .involvement-icon.fuchsia {
  color: var(--bright-fuchsia-color);
}

#work-with-us .involvement-icon.orange {
  color: var(--bright-orange-color);
}

#work-with-us .involvement-title {
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 1.5em;
  margin-top: 0.75em;
  margin-bottom: 0.4em;
}

#work-with-us .involvement-text {
  margin-top: 1em;
}

#work-with-us .involvement-text p {
  font-weight: 400;
  font-size: 1.1em;
  line-height: 1.4em;
}

#work-with-us #contact-section {
  width: 100%;
  background: linear-gradient(315deg, var(--dark-orange-color) 28%, var(--bright-orange-color) 28%);
  margin-top: 5em;
  color: var(--white-color);
}

#work-with-us #contact-section .page-section {
  margin-top: 5em;
  margin-bottom: 5em;
}

#work-with-us #contact-section .section-title {
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 3em;
  margin-bottom: 0.3em;
}

#work-with-us #contact-section .text-section {
  font-size: 1.1em;
  font-weight: 500;
  max-width: 34em;
  width: 100%;
}

#work-with-us #contact-section div.text-section p {
  line-height: 1.6em;
}

#work-with-us #contact-section .button {
  border: 5px solid var(--white-color);
  background-color: var(--bright-fuchsia-color);
  color: var(--white-color);
  font-family: var(--title-font);
  font-weight: 500;
  font-size: 1.6em;
  padding: .4em .75em .45em .75em;
  margin-top: 1.5em;
  text-transform: uppercase;
  max-width: 13.5em;
  white-space: normal;
  text-align: center;
  line-height: 1.4em;
}

#work-with-us #contact-section .button:hover {
  cursor: pointer;
  background-color: var(--dark-fuchsia-color);
}

#work-with-us #contact-section .button:active {
  cursor: pointer;
  background-color: var(--bright-blue-color);  
  outline: none;
}

#work-with-us #contact-section .button::-moz-focus-inner {
  border: 0 !important;
}


/***********************************/
/*         Responsiveness          */
/***********************************/

@media (max-width:70em) {
  #work-with-us .intro-section {
    margin-bottom: 2em;
  }
  
  #work-with-us .involvement-icon {
    font-size: 4em;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */