/************************************************

 >>   Coded By:   Karen McCullough - NSF International
 >>   Website:    www.scrubclub.org



 TABLE OF CONTENTS
*************************************************/
/*
	1: Base Styles - include base reset of elements and single element selectors along with typograhpy, links, buttons, forms and lists.
	2: Modules - reusable parts of the design, including the header and footer, cards, callouts, etc.
	3: Pages - some specific page adjustments - try to avoid styling for a specific page unless absolutely necessary
	4: State Rules - mostly css animations and css rules for javascript and states such as hidden, visible, expanded, etc.
	5: Media Queries
	6: Print Styles
	
*/


/*==============================================/
	
	1: Base Styles
	
==============================================*/


/* NOTE
html is set to 62.5% so that all the REM measurements throughout 
are based on 10px sizing. So basically 1.5rem = 15px :) */


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

html {
  font-size: 62.5%;
}

body {
  font: 400 1.8em/1.5 "Archivo Narrow", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #fff;
  color: #4c4c4e;
}

header {
  background: #fff;
  position: relative;
  z-index: 20;
}

main {
  background: #fff;
  margin: 0;
  overflow: auto;
}

figcaption {
  color: #888;
  font-size: 1.4rem;
  margin-top: 1rem;
  width: 100%;
}


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

/* archivo-narrow-regular - latin */
@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/archivo-narrow-v9-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Archivo Narrow Regular'), local('ArchivoNarrow-Regular'),
  url('../fonts/archivo-narrow-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/archivo-narrow-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/archivo-narrow-v9-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/archivo-narrow-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/archivo-narrow-v9-latin-regular.svg#ArchivoNarrow') format('svg'); /* Legacy iOS */
  font-display: swap;
}

/* archivo-narrow-italic - latin */
@font-face {
  font-family: 'Archivo Narrow';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/archivo-narrow-v9-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Archivo Narrow Italic'), local('ArchivoNarrow-Italic'),
  url('../fonts/archivo-narrow-v9-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/archivo-narrow-v9-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/archivo-narrow-v9-latin-italic.woff') format('woff'), /* Modern Browsers */ url('../fonts/archivo-narrow-v9-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/archivo-narrow-v9-latin-italic.svg#ArchivoNarrow') format('svg'); /* Legacy iOS */
  font-display: swap;
}

/* archivo-narrow-700 - latin */
@font-face {
  font-family: 'Archivo Narrow';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/archivo-narrow-v9-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Archivo Narrow Bold'), local('ArchivoNarrow-Bold'),
  url('../fonts/archivo-narrow-v9-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/archivo-narrow-v9-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/archivo-narrow-v9-latin-700.woff') format('woff'), /* Modern Browsers */ url('../fonts/archivo-narrow-v9-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/archivo-narrow-v9-latin-700.svg#ArchivoNarrow') format('svg'); /* Legacy iOS */
  font-display: swap;
}

/* boogaloo-regular - latin */
@font-face {
  font-family: 'Boogaloo';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/boogaloo-v11-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Boogaloo Regular'), local('Boogaloo-Regular'),
  url('../fonts/boogaloo-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/boogaloo-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/boogaloo-v11-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/boogaloo-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/boogaloo-v11-latin-regular.svg#Boogaloo') format('svg'); /* Legacy iOS */
  font-display: swap;
}


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
table {
  margin-bottom: 4rem;
}

tr {
  border-bottom: 1px solid #d8dcdb;
  vertical-align: top;
}

tr:nth-child(odd) {
  background: #ebedec;
}

th,
td {
  color: #888;
  padding: 1rem;
}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Boogaloo', Arial, Helvetica, sans-serif;
  font-weight: 400;
}

h1 {
  font-size: 1.8rem;
  line-height: 1;
}

h2 {
  font-size: 3.6rem;
  line-height: 1.1;
}

h3 {
  font-size: 3.0rem;
  line-height: 1.3;
}

h4 {
  font-size: 1.8rem;
  line-height: 1.35;
}

h5 {
  font-size: 1.8rem;
  line-height: 1.5;
}

h6 {
  font-size: 1.5rem;
  line-height: 1.6;
}

strong {
  font-weight: 700;
}

h1 sup,
h2 sup,
h3 sup {
  top: -.5rem;
}

.pipe {
  margin: 0 .5rem;
}


/* Links and Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #0b6fb1;
  text-decoration: none;
}

a, button {
  transition: all .6s;
}

a:hover,
a:focus {
  color: #059bdd;
}


a[rel="external"]:after,
.icon {
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  margin: 0 .25rem 0 .75rem;
}

a[rel="external"]:after {
  content: '\f35d'; /* external link icon */
  font-size: 1.2rem;
}

.icon--fb {
  align-self: center;
}

.icon--social:before {
  font-family: 'Font Awesome 5 Brands';
  font-size: 3rem;
}

.icon--fb:before {
  content: '\f082';
}

.icon--ig:before {
  content: '\f16d'; /* instagram */
}

.icon--pin:before {
  content: '\f0d3';
}

.icon--tw:before {
  content: '\f081';
}

a.icon--no-external:after {
  content: '';
}


/* Navigation
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#pull {
  color: #333;
  display: block;
  font-family: 'Boogaloo', Arial, Helvetica, sans-serif;
  font-size: 1.8rem;
  height: 44px;
  line-height: 44px;
  text-align: center;
}

#pull:before {
  content: 'Open ';
}

#pull:after {
  content: '\f0c9';
  font-family: 'Font Awesome 5 Pro';
  margin: 0 1rem;
}

#pull.js-open:before {
  content: 'Close ';
}

#pull.js-open:after {
  content: '\f00d';
}

.menu__main-container {
  display: none;
  height: auto;
  padding: 1rem;
  transition: top 0.5s ease-in-out . s;
}

.menu__link-item {
  border: 3px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: flex-end;
  transition: all .3s;
  text-align: center;
}

.menu__link-main {
  background-size: cover;
  color: #fff;
  display: block;
  font: 13.5px/1 'Boogaloo', Arial, Helvetica, sans-serif;
  height: 100%;
  line-height: 1;
  margin: 0 auto;
  padding: 4.5rem 1rem 1.25rem 1rem;
  text-shadow: 1px 1px 1px #444;
  vertical-align: middle;
}

.menu__link-main:hover:not(.current),
.menu__link-main:focus:not(.current) {
  color: #fff;
}

.menu__link-item.current__item {
  border: 10px;
}

.menu__link-main.current {
  color: #fff;
}

.menu__link-main.current:after {
  content: '';
  border-bottom: 2px dashed #fff;
  display: block;
  height: 5px;
  margin: 0 auto;
  width: 50%;
}

.menu__link-secondary.current,
.menu__link-secondary.js-clickable {
  font-weight: bold;
}


.nav__local li {
  list-style: none;
}

.nav__local ul {
  margin: 0;
}

#meet-link-item {
  background: #059bdd url('/images/meet-scrub-club_button.svg') no-repeat;
}

#villain-link-item {
  background: #62a744 url('/images/villains_button.svg') no-repeat;
}

#hero-link-item {
  background: #fbb316 url('/images/hero_button.svg') no-repeat;
}

#activities-link-item {
  background: #6b3f71 url('/images/activities_button.svg') no-repeat;
}

#resources-link-item {
  background: #6b3f71 url('/images/resources_button.svg') no-repeat;
}

#about-link-item {
  background: #fbb316 url('/images/about-us_button.svg') no-repeat;
}

#parent-link {
  background: #ed7b23;
  border-radius: 5px;
  color: #fff;
  display: block;
  line-height: 40px;
  margin-left: 1rem;
  padding: 0 1rem;
}

#parent-link:hover,
#parent-link:focus,
#parent-link.js-clickable:hover,
#parent-link.js-clickable:focus {
  background: #d97021;
}

#parent-link.current,
#parent-link.js-clickable {
  background: #ccc;
  border-bottom: none;
  color: #333;
  padding: 0 1rem .5rem 1rem;
  position: relative;
}

#parent-link.current:after,
#parent-link.js-clickable:after {
  content: ' ';
  display: block;
  border-bottom: 1px dashed #333;
  position: absolute;
  bottom: 14px;
  width: 90%;
}

#parent-link.js-clickable:hover,
#parent-link.js-clickable:focus {
  border: none;
  color: #fff;
  padding: 0 1rem;
}

#parent-link.js-clickable:hover:after,
#parent-link.js-clickable:focus:after {
  border-bottom: none;
}

/*** Link Classes ***/
.play--cta {
  display: block;
}

.play:after {
  font-size: 2rem;
  font-family: 'Font Awesome 5 Pro';
  display: inline-block;
  margin: .5rem 0 .5rem 1rem;;
}

.play:after {
  content: '\f144';
}

.pause:before {
  content: '\f28b';
}


.link--download {
  background: #1d79be;
  color: #fff;
  display: inline-block;
  margin: 2rem auto 0 auto;
  padding: 1rem;
  text-align: center;
  width: auto;
}

.link--download:after,
.link--txt-download:after {
  content: '\f0ab';
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  margin-left: 1rem;
}

.link--download:hover,
.link--download:focus {
  background: #005596;
  color: #fff;
}

.link--large-txt {
  font-size: 2rem;
}

.link--fun-txt {
  font-family: 'Boogaloo', Arial, Helvetica, sans-serif;
}

.button--sbs:first-of-type {
  margin-right: 4rem;
}


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */

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

select {
  padding: 0 0 0 10px;
}

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

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

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

input[type="submit"] {
  min-width: 150px;
  width: auto;
}

option {
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
}

label,
legend {
  color: #666;
  display: block;
  font-weight: 400;
  margin-bottom: .5rem;
  text-align: left;
}

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

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

input[placeholder],
select[title] {
  color: #888;
  font-size: 1.5rem;
}


.error,
.asterisk {
  color: #f57b07;
}

.error:not(label) {
  background: #fde5cd;
  border: 1px solid #f57b07;
}

.error + .error {
  margin-top: .5rem;
}


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */

ul {
  list-style: circle outside;
}

ol {
  list-style: decimal outside;
}

ol, ul {
  margin-top: 0;
  padding-left: 0;
}

ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
}


.list--no-bullet,
.list--no-numbers {
  list-style: none;
}

.list--numbered,
.list--bullet {
  margin-left: 2rem;
}

.list__related-item,
.list--numbered li,
.list--no-numbers li {
  margin: 2rem 0;
}

.list--alpha {
  list-style: lower-alpha;
}

.list--alpha li {
  margin: 1rem 0;
}


/* Utilities and Helper Classes
–––––––––––––––––––––––––––––––––––––––––––––––––– */

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

.note {
  font-size: 1.4rem;
}

.img--float-right {
  display: block;
  margin: 0 auto;
  text-align: center;
}

.u-push-top {
  margin-top: 4rem;
}

.u-push-bottom {
  margin-bottom: 4rem;
}

.u-push-left {
  margin-left: 1rem;
}

.border--bottom-light {
  border-bottom: 1px solid #ccc;
  padding-bottom: 2rem;
}

.border--top-light {
  border-top: 1px solid #ccc;
  padding-top: 2rem;
}

.display--inline-block {
  display: inline-block;
}
.full-width { width: 100%;}


/*==============================================/
	
	3: Modules
	
============================================= */


/* Header
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.logo__link {
  display: block;
  overflow: auto;
}

.logo {
  width: 150px;
  height: 135px;
}

.header__mobile-container {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  min-height: calc(70px + 1rem);
  padding: 1rem 1rem 1rem 0;
}


/* Cards
---------------------------------------------
NOTE: Default card border/date color (#25bbe8 - aqua blue) is for articles since it will likely be the most common. Video and event cards styles
override default color at bottom of this section using .card__video and .card__event classes respectively.
*/

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin-top: 6rem;
}

.card {
  border-radius: 2px;
  margin: 0 .5rem 4rem .5rem;

  max-width: 330px;
  position: relative;
  text-align: left;
}

.card__number {
  background: url('/images/card-bubbles.svg') top left no-repeat;
  color: #444;
  font-family: 'Boogaloo', Arial, Helvetica, sans-serif;
  font-size: 4.5rem;
  min-width: 85px;
  margin: 0;
  position: absolute;
  left: 10px;
  top: -30px;
}

.card__step-number {
  padding-left: 2rem;
}

.card__image-container {
  background: #fff;
  border-radius: 10px 10px 0 0;
  margin: 0;
  width: 100%;
  overflow: hidden;
}

.card__image {
  display: block;
  height: auto;
  max-width: 330px;
  transition: opacity .6s;
  width: 100%;
}

.card__image:hover,
.card__image:focus {
  opacity: .8;
}

.card__text {
  font-size: 1.8rem;
  line-height: 1.2;
  padding: 1rem;
}

.card__title {
  color: #fff;
  font-size: 3.1rem;
  line-height: 1.2;
  margin: 0;
}

.card__germ-type {
  margin-top: 0;
}

.card__step .card__image {
  min-height: 240px;
}

.card__step {
  background: #038ad6;
  border-radius: 10px;
  color: #fff;
}

.card__download {
  color: #fff;
}

.card__download:hover,
.card__download:focus {
  color: #fff;
}

.card__download .card__text {
  border: 1px solid #fff;
  border-radius: 0 0 10px 10px;
  margin: 1rem;
  text-align: center;
  transition: all .6s;
}

.card__download .card__text:hover,
.card__download .card__text:focus {
  background: #ff8b33;
}

#step-download {
  background: #ed7b23;
  transition: background-color .6s;
}


.card__villain {
  color: #fff;
}

.villain__text {
  background: #62A744;
  border-radius: 0 0 10px 10px;
  min-height: 310px;
}

.card__villain .card__image {
  max-height: 287px;
  min-height: 287px;
}

.villain__fact-link,
.plus .villain__fact-link:after,
.minus .villain__fact-link:after {
  color: #fff;
}

.villain__fact-link:hover,
.villain__fact-link:focus,
.plus .villain__fact-link:hover:after,
.plus .villain__fact-link:focus:after,
.minus .villain__fact-link:hover:after,
.minus .villain__fact-link:focus:after {
  color: #f4ef55;
}

#cora .link__expand {
  margin-top: 6rem;
}


/*  Footer
--------------------------------------------- */
footer {
  background: #fff;
}

.footer__menu {
  display: flex;
  list-style: none;
}

.footer__menu-link {
  color: #333;
  min-height: 44px;
}

.footer__logo-item {
  display: inline-block;
  padding: 1rem;
}

.footer__text {
  font-size: 1.4rem;
  padding: 0 2rem 1rem 2rem;
}

.social {
  text-align: center;
}

#social-wrap {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
}

/*  Fix Google Classroom Button Styling Issues
--------------------------------------------- */
.icon--social {
  vertical-align: super; /* fixes weird alignment issue with Google Classroom button */
}

/* Have to force margin styles to get Google Classroom Button to line up with social icons */
#___sharetoclassroom_0 {
  margin: 0 .25rem 0 .75rem !important;
}


/*  Videos
--------------------------------------------- */

.video__wrapper {
  margin: 4rem 0;
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.video__wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


/*==============================================/
	
	4: Pages
	
============================================= */


/*  Home Page
--------------------------------------------- */

#homepage {
  background: #1d79be;

}


.link--cta-mobile {
  background: #038ad6;
  color: #fff;
  display: block;
  font: 29px/1.5 'Boogaloo', Arial, Helvetica, sans-serif;
  padding: .5rem 0;
  text-align: center;
  width: 100%;
}

.link--double-arrow:after {
  content: '\f101'; /* double arrow */
  font-family: 'Font Awesome 5 Pro';
  margin-left: .5rem;
}

.link--cta-mobile:hover,
.link--cta-mobile:focus {
  background: #059bdd;
  color: #fff;
}

.image__container {
  padding-top: 2rem;
  text-align: center;
}

#scrub-club-heroes {
  max-width: 100%;
}

.image__container {
  position: relative;
}

.homepage__intro {
  color: #fff;
  width: 90%;
  max-width: 750px;
  margin: 10px auto 40px;
  font-size: 2.3rem;
}

.homepage__video--section {
  width: 100%;
  background-color: #fff;
  padding: 40px 0;
}

.homepage__video--section h2 {
  text-align: center;
  margin-top: 0;
}

.homepage__video--wrapper {
  width: 90%;
  max-width: 700px;
  margin: 0 auto 40px;
}

.homepage__video {
  position: relative;
  padding-bottom: 56.25%;
}

.homepage__video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.homepage__featured-resources {
  margin-bottom: 100px;
}

.homepage__featured-resources h2 {
  color: #fff;
  text-align: center;
}

.homepage__featured-resources .card__text {
  background: #fff;
  min-height: 100px;
  border-radius: 0 0 10px 10px;
}

.press-release-card {
  background-color: #eee;
  border-radius: 10px;
  overflow: hidden;
  height: auto;
  margin-bottom: 30px;
}

.press-release-card .press-release-card__image {
  width: 100%;
  position: relative;
  padding-top: 56.25%;

}

.press-release-card .press-release-card__image img {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  top: 0;
  left: 0;
}

.press-release-card p {
  text-align: center;
  font-size: 2rem;
  padding: 0 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;

}

.links__secondary-hp {
  border-top-right-radius: 15%;
  border-top-left-radius: 15%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  margin-top: -5rem;
  padding: 5.5rem 1rem 3rem 1rem;
}

.link__secondary-hp {
  border: 2px solid #fff;
  color: #fff;
  display: block;
  font: 16px/1 'Boogaloo', Arial, Helvetica, sans-serif;
  margin: .5rem;
  padding: 1rem .75rem;
  text-align: center;
  width: 230px;
}

.link__secondary-hp:hover,
.link__secondary-hp:focus {
  background: #1969a6;
  color: #fff;
}

.link__video {
  font-size: 2rem;
}


/*  Subpages
--------------------------------------------- */

.subpage {
  background: #eee;
  padding-bottom: 4rem;
}

.page__title {
  font-size: 4.8rem;
}

.subpage__container {
  margin: 0 auto;
  max-width: 1024px;
}
.subpage__container.u-push-top {
  margin-top: 4rem;
}

.intro,
.characters__intro,
.page__text {
  background: #fff;
}

.intro,
.page__text {
  margin-top: -1rem;
  padding: 1rem 4rem 2rem 4rem;
}

.intro {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}

.intro > * {
  flex: 0 1 50%;
}

.intro__image img {
  max-width: 100%;
}

.page__text {
  padding: 4rem;
  width: 100%;
}

/** Meet the Scrub Club **/

.characters {
  background: #b9e1f8;
  padding-bottom: 2rem;
}

.characters__intro {
  padding: 2rem 0;
  text-align: center;
}

.characters__intro-header,
.characters__intro-blurb {
  margin: 0;
}

.characters__intro-blurb {
  font-size: 2.2rem;
  line-height: 1.2;
  padding: 0 1rem;
}

#meet-page,
#contact-page {
  background: #e5f6ff;
  padding-bottom: 4rem;
}

#meet-page .page__title {
  color: #038ad6;
}

#meet-page .characters__intro figure {
  margin: 0;
}

#contact-page {
  background: #1d79be;
}

.txt--hero,
.txt--villain {
  font-family: 'Boogaloo', Arial, Helvetica, sans-serif;
  font-size: 2.3rem;
}

.character__area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.character {
  text-align: center;
}

.character__image-container {
  background: #fff;
  border-radius: 50%;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
  height: 133px;
  margin: 3rem auto 1rem auto;
  position: relative;
  width: 133px;
}

.character__image {
  position: absolute;
}

.character__image:hover,
.character__image:focus {
  cursor: pointer;
  opacity: .8;
}

.character__name {
  font: 28px/1 'Boogaloo', Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0 0 2rem 0;
}

.character__name-link {
  color: #444;
  display: inline-block;
  margin: 0;
}

.plus .character__name-link:after,
.minus .character__name-link:after {
  color: #005596;
}

.character__name-link:hover:after,
.character__name-link:focus:after {
  color: #059bdd;
}

.character__text {
  background: #fff;
  margin-top: -10rem;
  padding: 10rem 2rem 2rem 2rem;
  text-align: left;
}

#carry .character__image {
  left: 15px;
  top: 7px;
}

#slick .character__image {
  left: 11px;
  top: 12px;
}

#patience .character__image {
  left: 12px;
  top: 10px;
}

#buff .character__image {
  left: 12px;
  top: -20px;
}

#maskwell .character__image {
  left: 0;
  top: 20px;
}

/** Villains Gallery **/


#villain-page {
  background: #f0f7eb;
}

#villain-page .page__title {
  color: #62A744;
}

#bac-image {
  max-width: 225px;
  vertical-align: middle;
}

#villain-page .intro__image {
  flex: 0 1 50%;
}

#meet-page .intro__image figure,
#villain-page .intro__image figure {
  margin: 2rem 0 0 2rem;
}

/** Join Scrub Club *

#hero-page {
  background: #faf2e1;
  padding-bottom: 4rem;
}

#hero-page .page__title {
  color: #6a3f71;
}

#hero-page figure {
  margin: 0;
}

#hero-page .u-margin-top-none {
  margin-top: 0;
}

#hero-page .u-pad-bottom {
  padding-bottom: 4rem;
}

#hero-page .u-align-flex-start {
  align-self: flex-start;
} */

/** About Section **/

.about-section {
  background: #faf2e1;
  padding-bottom: 4rem;
}

.about-section .page__title {
  color: #6a3f71;
}


/** Resources **/

.resources-section {
  background: #decfe2;
  padding-bottom: 4rem;
}

.resources-section .page__title {
  color: #804f89;
}


/** News **/

.news__title {
  font-size: 4rem;
  line-height: 1.1;
}

.news__title,
.news__subhead {
  color: #43434e;
  font-family: "Archivo Narrow", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
}
.news__subhead {
  font-size: 2.8rem;
  font-weight: normal;
  line-height: 1.2;
}


/*==============================================/
	
	5: State Rules
	
============================================= */


/*=========== EXPANDABLE (SHOW/HIDE) CONTENT =========== */

.content__show-hide {
  display: none;
}

.container--expandable .plus,
.container--expandable .minus {
  position: relative;
}

.plus a:after,
.minus a:after {
  content: '\f055';
  font-family: 'Font Awesome 5 Pro';
  font-size: 1.8rem;
  font-weight: 900;
  margin-left: 1rem;
}

.minus a:after {
  content: '\f056';
}

.link__expand {
  margin: 0;
}

.page__expandable .plus a:after,
.page__expandable .minus a:after {
  content: '';
}

.download__category {
  break-inside: avoid;
  margin-bottom: 4rem;
}


/*==============================================/
	
	6: Media Queries
	
============================================= */


/**** Larger Than ****/


@media only screen and (min-width: 450px) {

  .img--float-right {
    float: right;
    margin: 0 2rem 2rem 4rem;
  }

  .homepage__featured-resources__card {
    height: 370px;
  }

}

@media only screen and (min-width: 768px) {


  /* Sticky Footer
--------------------------------------------- */
  html, body {
    width: 100%;
    height: 100%;
  }

  .wrapper {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  footer {
    flex-grow: 1;
  }

  header, main, footer {
    flex-shrink: 0;
  }

  main {
    padding-top: 50px;
  }


  /* Header Adjustments
--------------------------------------------- */
  header,
  .menu__main-container,
  .menu__main,
  .menu {
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  header {
    height: 60px;
  }

  .menu__main-container {
    display: block;
    position: static;
  }

  .logo {
    height: 112px;
    width: 125px;
  }

  .menu__link-secondary {
    color: #333;
    font-size: 1.2rem;
    line-height: 25px;
    padding-right: 1rem;
  }

  .menu__link-secondary.current,
  .menu__link-secondary.current,
  .menu__link-secondary.js-clickable,
  .menu__link-secondary.js-clickable {
    border-bottom: 1px dashed #333;
    line-height: 35px;
  }

  .menu__link-secondary:hover,
  .menu__link-secondary:focus {
    color: #059bdd;
  }

  .menu__link-secondary.current:hover,
  .menu__link-secondary.current:focus {
    color: #333;
    cursor: text;
  }


  /* Navigation Adjustments
--------------------------------------------- */
  #pull,
  #pull-local {
    display: none;
  }

  .menu__link-item {
    transition: transform 0.6s ease;
  }

  .logo__link:hover,
  .logo__link:focus,
  .menu__link-item:hover:not(.current__item),
  .menu__link-item:focus:not(.current__item) {
    transform: rotate(-15deg);
  }

  .menu__link-item {
    height: 105px;
    margin: 0 .5rem;
    width: 105px;
  }

  .menu__link-main {
    font-size: 1.6rem;
    padding-top: 5rem;
  }

  .menu__main-container {
    padding: 1rem 0;
  }

  /* Footer Adjustments
--------------------------------------------- */
  footer {
    padding: 3rem;
  }

  .footer__top-container {
    display: flex;
    justify-content: space-between;
  }

  .footer__menu {
    justify-content: flex-start;
  }

  .footer__menu-item-main {
    margin-right: 2rem;
  }

  .footer__menu-link:hover,
  .footer__menu-link:focus {
    color: #059bdd;
  }

  .footer__logos {
    display: flex;
    justify-content: flex-end;
  }

  .footer__logo-item {
    padding-top: 0;
  }

  .footer__text {
    display: flex;
    justify-content: space-between;
    padding: 0;
  }

  .copyright {
    max-width: 60%;
  }

  .copyright p:first-of-type {
    margin-top: 0;
  }

  .footer__menu-secondary {
    list-style: none;
  }

  .social {
    text-align: left;
  }


  /** Pages with subnavigation **/
  .page--simple-flex {
    background: #fff;
    display: flex;
  }

  .nav__local-container {
    font-size: 1.8rem;
    margin-top: 7.25rem;
    padding-left: 4rem;
  }

  .nav__local {
    width: 170px;
  }

  .nav__local ul {
    font-size: 1.7rem;
    margin: 1rem 0 0 1rem;
  }

  .nav__local ul li {
    padding-bottom: 1rem;
  }

  .nav__local .current {
    color: #444;
    font-weight: bold;
  }

  .nav__local .active {
    font-weight: bold;
  }

  .nav__local .current:hover,
  .nav__local .current:focus {
    cursor: text;
  }

  /* Homepage Adjustments
--------------------------------------------- */
  .link--cta-mobile {
    display: none;
  }

  .links__secondary-hp {
    margin-top: -6.5rem;
    padding: 6.5rem 1rem 3rem 1rem;
  }

  .link__secondary-hp:before {
    margin: 0 .5rem 0 0;
  }

  .link__secondary-hp:after {
    margin: 0 0 0 .75rem;
  }

  .link__audio {
    flex: 0 0 auto;
  }

  .link__audio:first-of-type {
    margin-left: 8rem;
  }

  #gelmo-link {
    border: none;
    margin: 0 0 0 2rem;
    transition: all .6s;
  }

  #gelmo-link:after {
    display: inline-block;
    margin-right: 3rem;
  }

  #gelmo-link:hover,
  #gelmo-link:focus {
    background: transparent;
    text-decoration: underline;
  }

  .music__notes {
    display: flex;
    margin: 0 1rem;
  }

  .image__container {
    margin: 2rem auto 0 auto;
  }


  /* Villains Gallery Adjustments
--------------------------------------------- */
  .cards__villains {
    justify-content: center;
  }


  /* Hero Page Adjustments
--------------------------------------------- */
  .intro__image--hero {
    text-align: center;
  }

  /* Downloads Kids Adjustments
--------------------------------------------- */
  .page__expandable .plus a:after,
  .page__expandable .minus a:after {
    content: '';
  }

}

@media only screen and (min-width: 903px) {

  /* Meet the SC Adjustments
--------------------------------------------- */
  .character {
    width: 200px;
  }

}


@media only screen and (min-width: 1025px) {
  .page__expandable .content__show-hide--show-large-always {
    display: block !important;
  }
}


@media only screen and (min-width: 1024px) {

  /* Header Adjustments
--------------------------------------------- */
  header {
    height: 100px;
    padding-top: 2rem;
  }

  .logo {
    height: auto;
    width: 150px;
  }


  /* Navigation Adjustments
--------------------------------------------- */
  .menu__link-item {
    height: 139px;
    margin: 0 1rem;
    width: 139px;
  }

  .menu__link-main {
    font-size: 2.1rem;
    max-width: 139px;
    padding: 7.25rem 2rem 1rem 2rem;
  }

  .menu__link-secondary {
    font-size: 1.6rem;
    line-height: 75px;
    margin-left: 3rem;
  }


  /* Footer Adjustments
--------------------------------------------- */
  .footer__top-container,
  .footer__text {
    margin: 0 auto;
    max-width: 1024px;
  }

  .copyright {
    max-width: 40%;
  }

  /* Homepage Adjustments
--------------------------------------------- */
  .links__secondary-hp {
    padding-bottom: 10rem;
  }

  #gelmo-text {
    font-size: 1.8rem;
    right: -35px;
    width: auto;
  }

  .links__secondary-hp {
    padding-top: 6rem;
  }

  .link__secondary-hp {
    padding: 1rem;
  }

  .link__audio:first-of-type {
    margin-left: 20rem;
  }

  /* Downloads Kids Adjustments
--------------------------------------------- */
  .page__expandable .columns-2 {
    column-count: 2;
    column-width: 50%;
  }

  .page__expandable .content__show-hide {
    display: block;
  }

  .page__expandable h2 {
    margin: 0 0 2rem 0;
  }

  .page__expandable .expandable--link-mobile {
    color: #444;
    cursor: text;
  }

  .page__expandable .intro__text {
    width: 100%;
  }

  .page__expandable .intro > * {
    flex: none;
  }


}

@media only screen and (max-width: 600px) {
  .character {
    width: 100%;
  }

}

@media only screen and (min-width: 601px) and (max-width: 905px) {
  .character {
    width: 33%;
  }

}


/**** Smaller Than ****/

@media only screen and (max-width: 767px) {

  /* Navigation Adjustments
--------------------------------------------- */
  .logo__container {
    margin-left: 4rem;
  }

  .menu__main-container {
    background: #fff;
    display: none;
    height: auto;
    padding: 1rem;
    position: absolute;
    top: 156px;
    transition: top 0.5s ease-in-out . s;
    width: 100%;
    z-index: 20;
  }

  .menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    text-align: center;
  }

  .menu__link-main {
    font-size: 1.8rem;
    min-width: 125px;
    max-width: 125px;
    padding-top: 6.5rem;
  }

  .menu__link-item {
    border-radius: 50%;
    display: flex;
    align-items: flex-end;
    height: 125px;
    min-width: 125px;
    transition: all .3s;
    width: 125px;
  }

  #parent-link {
    background: #ed7b23;
    color: #fff;
    display: block;
    margin: 0 auto 1rem auto;
    padding: 1rem;
    text-align: center;
    width: 50%;
  }

  #parent-link:hover,
  #parent-link:focus {
    background: #d97021;
  }


  /* Link Adjustments
--------------------------------------------- */
  .link__container {
    text-align: center;
  }


  /* Footer/local nav Adjustments
--------------------------------------------- */
  .footer__menu,
  .nav__local {
    background: #fff;
    flex-direction: column;
  }

  .footer__menu-item,
  .footer__menu-link,
  .nav__local li,
  .nav__local a {
    width: 100%;
  }

  .footer__menu-link,
  .nav__local a {
    background: #dcddde;
    display: block;
    margin-top: 2px;
    padding: 1rem;
  }

  .footer__menu-link:hover,
  .footer__menu-link:focus,
  .nav__local a:hover,
  .nav__local a:focus {
    background: #ccc;
    color: #333;
  }

  .footer__logos {
    margin-bottom: 0;
    text-align: center;
  }

  .footer__logo-item {
    vertical-align: top;
  }

  .nav__local a {
    font-size: 1.8rem;
  }

  .nav__local {
    display: none;
  }

  .nav__local li {
    text-align: center;
  }

  .nav__local .current {
    background: #888;
    color: #fff;
    font-weight: bold;
  }

  #pull-local {
    background: #0072ce;
    color: #fff;
    display: block;
    font-size: 1.8rem;
    height: 66px;
    line-height: 50px;
    margin: 0;
    padding: .5rem 1rem;
    text-align: center;
    width: 100%;
  }

  #pull-local::after {
    content: "\f107";
    font-family: 'Font Awesome 5 Pro';
    margin-left: 1rem;
  }

  #pull-local.js-open::after {
    content: "\f106";
  }


  /* Homepage Adjustments
--------------------------------------------- */
  .link--double-arrow::after {
    content: '';
  }

  #gelmo-text {
    bottom: 42%;
    width: 50px;
  }

  .music__notes {
    display: none;
  }


  /* Subpage Adjustments
--------------------------------------------- */
  .intro {
    display: block;
  }

  .intro__image:not(.intro__image--hero) {
    text-align: center;
  }

  .page__title {
    font-size: 4rem;
  }


}

@media only screen and (max-width: 1024px) {

  .page__expandable .intro {
    display: block;
  }

  .page__expandable h2 {
    background: #804f89;
    padding: 1rem 2rem;
    text-align: center;
  }

  .page__expandable .content__show-hide {
    display: none;
  }

  .page__expandable .plus a:after,
  .page__expandable .minus a:after {
    content: '\f055';
    font-family: 'Font Awesome 5 Pro';
    font-size: 1.8rem;
    font-weight: 900;
    margin-left: 1rem;
  }

  .page__expandable .minus a:after {
    content: '\f056';
  }

  .page__expandable .link__expand {
    font-size: 3rem;
  }

  .page__expandable .content__show-hide {
    display: none;
  }

  .page__expandable .container--expandable .plus,
  .page__expandable .container--expandable .minus {
    position: relative;
  }

  .page__expandable .plus a:after,
  .page__expandable .minus a:after {
    content: '\f055';
    font-family: 'Font Awesome 5 Pro';
    font-size: 1.8rem;
    font-weight: 900;
    margin-left: 1rem;
  }

  .page__expandable .minus a:after {
    content: '\f056';
  }

  .page__expandable .plus a:after,
  .page__expandable .minus a:after,
  .page__expandable .expandable--link-mobile {
    color: #fff;
  }

  .page__expandable li {
    background: #decfe2;
    border-top: 2px solid #fff;
    text-align: center;
  }

  .page__expandable a {
    color: #804f89;
    display: block;
    line-height: 50px;
  }

  .page__expandable li a:hover,
  .page__expandable li a:focus {
    background: #804f89;
    color: #fff;
  }
}


/*==============================================/
	
	7: Print Styles
	
============================================= */


@media print {


  body {
    background: #fff !important;
    color: #000;
    font: 13pt Georgia, "Times New Roman", Times, serif;
    letter-spacing: normal;
    line-height: 1.3;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
  }

  h2, h3, h4 {
    color: #000;
    font-size: 14pt;
    margin: 25px 0;
  }


  ul li {
    margin: 0;
  }

  * {
    float: none;
    font-size: 10pt;
    letter-spacing: normal;
    line-height: 20pt;
  }


  img {
    max-width: 100% !important;
  }


  /*** font sizes ***/
  h1 {
    font-size: 16pt;
  }

  h3 {
    font-size: 13pt;
  }

  h4 {
    font-size: 12pt;
  }


  /* Displaying link color and link behavior */
  a:link, a:visited, a,
  .button {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #0b6fb1;
    text-align: left;
    font-weight: bold;
  }

  h1 a:link {
    text-decoration: none;
  }

  a[href^="http"]:after,
  a.button:after {
    content: " (" attr(href) ") ";
    font-size: 90%;
  }

  a[href^="#"]:after {
    content: "";
  }

  /* Defining all page breaks */
  a, img, blockquote,
  h1, h2, h3, h4, h5, h6,
  form {
    page-break-inside: avoid;
  }

  h1, h2, h3, h4, h5, h6,
  img {
    page-break-after: avoid;
  }

  a, .button {
    page-break-inside: avoid
  }

  table, pre {
    page-break-inside: avoid
  }

  ul, ol, dl {
    page-break-before: avoid
  }


  /*** hiding unecessary elements for print ***/
  footer {
    display: none;
  }


  /*** form print styles ***/
  input[type="email"],
  input[type="number"],
  input[type="search"],
  input[type="text"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  textarea,
  select {
    border-bottom: 1px solid #d1d1d1;
    border-top: none;
    border-left: none;
    border-right: none;
    color: #000;
    height: auto;
    padding: 0;
    width: 90%;
  }


  /** Setting margins */
  @page {
    margin: 2cm
  }


}