/*
 * Breakpoint any
 * @param {List} ids - List of breakpoints
 * @content - Styles will be applied to breakpoint
 */
/*
 * Breakpoint all
 * @param {List} ids - List of breakpoints
 * @content - Styles will be applied to breakpoint
 */
/**
 * _Breakpoint
 * @param {List} ids - List of breakpoints
 * @param {String} glue - Glue to join together multiple breakpoints
 * @param {Boolean} stripAppendedMediaTypes - Remove media types from all but first breakpoint
 * @content - Styles will be applied to breakpoint
 */
body, html {
  margin: 0;
  padding: 0; }

@font-face {
  font-family: 'billy-regular';
  src: url("../static/fonts/billy-regular-webfont.woff2") format("woff2"), url("../static/fonts/billy-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'billy-bold';
  src: url("../static/fonts/billy-bold-webfont.woff2") format("woff2"), url("../static/fonts/billy-bold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

.headband-offset {
  height: 40px; }
  .has-headband .headband-offset {
    display: none; }

#site {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'billy-regular', sans-serif;
  background-color: #d1e6e7; }
  #site *,
  #site *::before,
  #site *::after {
    -webkit-box-sizing: inherit;
            box-sizing: inherit; }
  #site canvas::selection {
    background-color: transparent; }

#viewport main > .available {
  padding-top: 1px;
  padding-bottom: 1px; }

@media only screen and (min-width: 641px) and (max-width: 1024px), only screen and (min-width: 1025px) {
  #viewport {
    height: calc(100vh - 30px);
    position: relative;
    min-height: 620px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-height: 852px; }
    #viewport #header {
      -webkit-box-flex: 0;
          -ms-flex-positive: 0;
              flex-grow: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0; }
    #viewport main {
      -webkit-box-flex: 1;
          -ms-flex-positive: 1;
              flex-grow: 1;
      -ms-flex-negative: 1;
          flex-shrink: 1; }
      #viewport main > .available {
        position: relative; } }

@media only screen and (max-width: 640px) {
  #viewport main > .available {
    top: 0 !important;
    height: auto !important; } }

/*
 * Breakpoint any
 * @param {List} ids - List of breakpoints
 * @content - Styles will be applied to breakpoint
 */
/*
 * Breakpoint all
 * @param {List} ids - List of breakpoints
 * @content - Styles will be applied to breakpoint
 */
/**
 * _Breakpoint
 * @param {List} ids - List of breakpoints
 * @param {String} glue - Glue to join together multiple breakpoints
 * @param {Boolean} stripAppendedMediaTypes - Remove media types from all but first breakpoint
 * @content - Styles will be applied to breakpoint
 */
#footer {
  background-color: #FFF;
  position: relative;
  padding: 1px 20px;
  /**
	 * Nav
	 */
  /**
	 * Credits
	 */
  /**
	 * Legal
	 */ }
  #footer::before {
    content: "";
    display: block;
    height: 10px;
    width: 100%;
    position: absolute;
    top: -9px;
    left: 0;
    background: url(../static/global/footer/border.png) repeat-x top center;
    background-size: auto 100%;
    pointer-events: none; }
  #footer a:hover {
    text-decoration: none; }
  #footer nav {
    font-family: 'billy-bold', sans-serif; }
    #footer nav, #footer nav a {
      color: #0068a7; }
    #footer nav ul, #footer nav li {
      list-style: none;
      margin: 0;
      padding: 0; }
    #footer nav ul {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; }
    @media only screen and (min-width: 641px) and (max-width: 1024px), only screen and (min-width: 1025px) {
      #footer nav {
        font-size: 28px; }
        #footer nav ul {
          margin: 30px -20px; }
        #footer nav li {
          margin: 5px 20px; } }
    @media only screen and (max-width: 640px) {
      #footer nav {
        font-size: 5vw; }
        #footer nav ul {
          margin: 4.6875vw -3.125vw;
          margin-bottom: 3.125vw; }
        #footer nav li {
          margin: 1.5625vw 3.125vw; } }
  #footer .credits {
    text-align: center; }
    #footer .credits ul, #footer .credits li {
      list-style: none;
      margin: 0;
      padding: 0; }
    #footer .credits ul {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; }
    #footer .credits img {
      display: block; }
    #footer .credits .scholastic img {
      min-width: 160px; }
    @media only screen and (min-width: 641px) and (max-width: 1024px), only screen and (min-width: 1025px) {
      #footer .credits {
        font-size: 24px; }
        #footer .credits ul {
          margin-top: 5px;
          margin-bottom: 30px; }
        #footer .credits li {
          margin: 5px 20px; }
        #footer .credits .scholastic img {
          width: 180px; } }
    @media only screen and (max-width: 640px) {
      #footer .credits {
        font-size: 4.375vw; }
        #footer .credits ul {
          margin-bottom: 4.6875vw; }
        #footer .credits li {
          margin: 0.78125vw 2.34375vw; }
        #footer .credits .scholastic img {
          width: 37.5vw; } }
  #footer .legal {
    display: block;
    text-align: center; }
    #footer .legal, #footer .legal a {
      color: #0068a7; }
    #footer .legal a {
      font-family: 'billy-bold', sans-serif; }
    @media only screen and (min-width: 641px) and (max-width: 1024px), only screen and (min-width: 1025px) {
      #footer .legal {
        font-size: 16px;
        margin: 40px auto;
        max-width: 960px; } }
    @media only screen and (max-width: 640px) {
      #footer .legal {
        font-size: 3.125vw;
        margin: 4.6875vw 0; }
        #footer .legal a {
          display: block; } }

/*
 * Breakpoint any
 * @param {List} ids - List of breakpoints
 * @content - Styles will be applied to breakpoint
 */
/*
 * Breakpoint all
 * @param {List} ids - List of breakpoints
 * @content - Styles will be applied to breakpoint
 */
/**
 * _Breakpoint
 * @param {List} ids - List of breakpoints
 * @param {String} glue - Glue to join together multiple breakpoints
 * @param {Boolean} stripAppendedMediaTypes - Remove media types from all but first breakpoint
 * @content - Styles will be applied to breakpoint
 */
#header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  pointer-events: none; }
  #header > * {
    pointer-events: all; }
  #header h1, #header h2 {
    margin: 0;
    padding: 0; }
  @media only screen and (min-width: 641px) and (max-width: 1024px), only screen and (min-width: 1025px) {
    #header {
      padding-top: 20px;
      z-index: 98;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 150px; }
      #header.condensed {
        height: 120px; } }
  @media only screen and (max-width: 640px) {
    #header {
      padding-top: 3.125%;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; } }
  #header .pbs-kids {
    display: block; }
    #header .pbs-kids img {
      display: block; }
    @media only screen and (min-width: 641px) and (max-width: 1024px), only screen and (min-width: 1025px) {
      #header .pbs-kids {
        margin-left: 40px; }
        #header .pbs-kids img {
          width: 64px; } }
    @media only screen and (max-width: 640px) {
      #header .pbs-kids {
        position: absolute;
        left: 20px; }
        #header .pbs-kids img {
          width: 10.9375vw;
          min-width: 40px; } }
  @media only screen and (min-width: 641px) and (max-width: 1024px), only screen and (min-width: 1025px) {
    #header.condensed .pbs-kids img {
      width: 49px; } }
  #header .logo {
    display: block; }
    #header .logo img {
      display: block; }
    @media only screen and (min-width: 641px) and (max-width: 1024px), only screen and (min-width: 1025px) {
      #header .logo img {
        width: 283px;
        margin-left: 20px; } }
    @media only screen and (max-width: 640px) {
      #header .logo img {
        width: 40.625vw;
        min-width: 180px; } }
  @media only screen and (min-width: 641px) and (max-width: 1024px), only screen and (min-width: 1025px) {
    #header.condensed .logo img {
      width: 218px; } }

/*
 * Breakpoint any
 * @param {List} ids - List of breakpoints
 * @content - Styles will be applied to breakpoint
 */
/*
 * Breakpoint all
 * @param {List} ids - List of breakpoints
 * @content - Styles will be applied to breakpoint
 */
/**
 * _Breakpoint
 * @param {List} ids - List of breakpoints
 * @param {String} glue - Glue to join together multiple breakpoints
 * @param {Boolean} stripAppendedMediaTypes - Remove media types from all but first breakpoint
 * @content - Styles will be applied to breakpoint
 */
#nav {
  z-index: 99;
  position: relative; }
  #nav ul, #nav li {
    margin: 0;
    padding: 0;
    list-style: none; }
  #nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
  #nav li {
    background-size: 200% auto;
    background-repeat: no-repeat;
    position: relative;
    width: 8.06667em;
    height: 4.8em;
    margin-top: 0.43333em; }
    #nav li::before, #nav li::after {
      display: block;
      content: "";
      opacity: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: 200% auto;
      background-repeat: no-repeat; }
    #nav li::before {
      background-position: top right;
      -webkit-transition: opacity 200ms ease-out;
      transition: opacity 200ms ease-out; }
    #nav li::after {
      background-position: bottom left; }
    #nav li:hover::before {
      opacity: 1; }
    #nav li[data-active="true"]::after {
      opacity: 1; }
    #nav li a {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      display: block;
      z-index: 5;
      color: #FFF;
      font-family: 'billy-bold', sans-serif; }
      #nav li a .title {
        display: block;
        position: absolute;
        width: 100%;
        top: 50%;
        -webkit-transform: translate(0, -50%);
                transform: translate(0, -50%);
        text-align: center; }
      #nav li a .icon {
        display: block;
        left: 50%;
        position: absolute;
        -webkit-transition: -webkit-transform 450ms cubic-bezier(0.19, 1, 0.22, 1);
        transition: -webkit-transform 450ms cubic-bezier(0.19, 1, 0.22, 1);
        transition: transform 450ms cubic-bezier(0.19, 1, 0.22, 1);
        transition: transform 450ms cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 450ms cubic-bezier(0.19, 1, 0.22, 1);
        z-index: 2; }
        #nav li a .icon::before {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%; }
    #nav li[data-id="games"], #nav li[data-id="games"]::before, #nav li[data-id="games"]::after {
      background-image: url(../static/global/nav/games-button.png); }
    #nav li[data-id="games"] .icon::before {
      background: url(../static/global/nav/games-icon.png) center center no-repeat;
      background-size: contain;
      -webkit-backface-visibility: hidden; }
    #nav li[data-id="videos"], #nav li[data-id="videos"]::before, #nav li[data-id="videos"]::after {
      background-image: url(../static/global/nav/videos-button.png); }
    #nav li[data-id="videos"] .icon::before {
      background: url(../static/global/nav/videos-icon.png) center center no-repeat;
      background-size: contain;
      -webkit-backface-visibility: hidden; }
    #nav li[data-id="activities"], #nav li[data-id="activities"]::before, #nav li[data-id="activities"]::after {
      background-image: url(../static/global/nav/activities-button.png); }
    #nav li[data-id="activities"] .icon::before {
      background: url(../static/global/nav/activities-icon.png) center center no-repeat;
      background-size: contain;
      -webkit-backface-visibility: hidden; }
  @media only screen and (min-width: 641px) and (max-width: 1024px), only screen and (min-width: 1025px) {
    #nav {
      position: absolute;
      height: 5.16667em;
      width: 100%;
      bottom: 0;
      margin-bottom: 0.8em;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      font-size: 30px;
      pointer-events: none; }
      #nav ul {
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center; }
      #nav li {
        pointer-events: auto; }
      #nav li[data-id="games"] {
        margin-right: 0.4em; }
        #nav li[data-id="games"] .icon {
          -webkit-transform: translate(-55%, -10%);
                  transform: translate(-55%, -10%);
          width: 2.8em;
          height: 2.13333em; }
        #nav li[data-id="games"]:hover .icon {
          -webkit-transform: translate(-55%, -10%) rotate(5deg) scale(1.1);
                  transform: translate(-55%, -10%) rotate(5deg) scale(1.1); }
      #nav li[data-id="videos"] {
        margin-right: 0.4em; }
        #nav li[data-id="videos"] .icon {
          -webkit-transform: translate(-50%, -20%);
                  transform: translate(-50%, -20%);
          width: 2.2em;
          height: 2.16667em; }
        #nav li[data-id="videos"]:hover .icon {
          -webkit-transform: translate(-50%, -20%) rotate(5deg) scale(1.1);
                  transform: translate(-50%, -20%) rotate(5deg) scale(1.1); }
      #nav li[data-id="activities"] .icon {
        -webkit-transform: translate(-58%, -20%);
                transform: translate(-58%, -20%);
        width: 2.86667em;
        height: 2.16667em; }
      #nav li[data-id="activities"]:hover .icon {
        -webkit-transform: translate(-58%, -20%) rotate(5deg) scale(1.1);
                transform: translate(-58%, -20%) rotate(5deg) scale(1.1); } }
  @media only screen and (max-width: 640px) {
    #nav {
      font-size: 3.4375vw;
      height: 6.6087em;
      margin-top: 0.43478em;
      margin-bottom: 0.86957em;
      /* Stick */ }
      #nav ul {
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        padding: 0 20px 0 20px;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start; }
      #nav li {
        margin-top: 0.95652em; }
        #nav li a .title {
          -webkit-transform: translate(0, -45%);
                  transform: translate(0, -45%); }
      #nav li[data-id="games"] {
        margin-top: 1.08696em; }
        #nav li[data-id="games"] .icon {
          width: 3.52174em;
          height: 2.69565em;
          -webkit-transform: translate(-55%, -33%);
                  transform: translate(-55%, -33%); }
        #nav li[data-id="games"]:hover .icon {
          -webkit-transform: translate(-55%, -33%) rotate(5deg) scale(1.1);
                  transform: translate(-55%, -33%) rotate(5deg) scale(1.1); }
      #nav li[data-id="videos"] .icon {
        width: 2.86957em;
        height: 2.82609em;
        -webkit-transform: translate(-50%, -33%);
                transform: translate(-50%, -33%); }
      #nav li[data-id="videos"]:hover .icon {
        -webkit-transform: translate(-50%, -33%) rotate(5deg) scale(1.1);
                transform: translate(-50%, -33%) rotate(5deg) scale(1.1); }
      #nav li[data-id="activities"] .icon {
        width: 3.21739em;
        height: 2.43478em;
        -webkit-transform: translate(-58%, -30%);
                transform: translate(-58%, -30%); }
      #nav li[data-id="activities"]:hover .icon {
        -webkit-transform: translate(-58%, -30%) rotate(5deg) scale(1.1);
                transform: translate(-58%, -30%) rotate(5deg) scale(1.1); }
      #nav .container {
        padding-top: 3.125%; } }
  @media only screen and (max-width: 640px) and (min-height: 500px) {
    #nav.sticky .container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #FFF;
      padding-bottom: 3.125%; }
      #nav.sticky .container::before {
        content: "";
        display: block;
        height: 10px;
        position: absolute;
        width: 100%;
        bottom: -9px;
        background: url(../static/global/nav/border.png) repeat-x center top;
        background-size: auto 100%; }
    #nav.sticky::before {
      content: "";
      display: block;
      padding-top: 23.75%; } }
  #nav[data-animation="games"] [data-id="games"] .icon::before {
    -webkit-animation: icon-dance 1200ms 200ms;
            animation: icon-dance 1200ms 200ms; }
  #nav[data-animation="videos"] [data-id="videos"] .icon::before {
    -webkit-animation: icon-dance 1200ms 200ms;
            animation: icon-dance 1200ms 200ms; }
  #nav[data-animation="activities"] [data-id="activities"] .icon::before {
    -webkit-animation: icon-dance 1200ms 200ms;
            animation: icon-dance 1200ms 200ms; }

@-webkit-keyframes icon-dance {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes icon-dance {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }
  @media only screen and (min-width: 641px) and (max-width: 820px), (min-width: 641px) and (max-height: 800px) {
    #nav {
      font-size: 28px; } }
  @media only screen and (min-width: 641px) and (max-width: 760px), (min-width: 641px) and (max-height: 770px) {
    #nav {
      font-size: 26px; } }
  @media only screen and (min-width: 641px) and (max-width: 720px), (min-width: 641px) and (max-height: 750px) {
    #nav {
      font-size: 24px; } }
  @media only screen and (min-width: 641px) and (max-width: 660px), (min-width: 641px) and (max-height: 730px) {
    #nav {
      font-size: 23px; } }
  @media only screen and (min-width: 641px) and (max-height: 720px) {
    #nav {
      font-size: 22px; } }
  @media only screen and (min-width: 641px) and (max-height: 710px) {
    #nav {
      font-size: 21px; } }
  @media only screen and (min-width: 641px) and (max-height: 700px) {
    #nav {
      font-size: 20px; } }
  @media only screen and (min-width: 641px) and (max-height: 680px) {
    #nav {
      font-size: 19px; } }
  @media only screen and (min-width: 641px) and (max-height: 660px) {
    #nav {
      font-size: 18px; } }

/*
 * Breakpoint any
 * @param {List} ids - List of breakpoints
 * @content - Styles will be applied to breakpoint
 */
/*
 * Breakpoint all
 * @param {List} ids - List of breakpoints
 * @content - Styles will be applied to breakpoint
 */
/**
 * _Breakpoint
 * @param {List} ids - List of breakpoints
 * @param {String} glue - Glue to join together multiple breakpoints
 * @param {Boolean} stripAppendedMediaTypes - Remove media types from all but first breakpoint
 * @content - Styles will be applied to breakpoint
 */
.c-thumbnail {
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  display: block;
  max-width: 576px; }
  @media only screen and (min-width: 641px) and (max-width: 1024px), only screen and (min-width: 1025px) {
    .c-thumbnail {
      -webkit-transition: -webkit-transform 450ms cubic-bezier(0.19, 1, 0.22, 1);
      transition: -webkit-transform 450ms cubic-bezier(0.19, 1, 0.22, 1);
      transition: transform 450ms cubic-bezier(0.19, 1, 0.22, 1);
      transition: transform 450ms cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 450ms cubic-bezier(0.19, 1, 0.22, 1); }
      .c-thumbnail:hover {
        -webkit-transform: rotate(1.5deg) scale(1.05);
                transform: rotate(1.5deg) scale(1.05); } }
  .c-thumbnail::before {
    content: "";
    display: block;
    padding-top: 61.45833%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    z-index: 2;
    position: relative; }
  .c-thumbnail img {
    display: block;
    position: absolute;
    top: 7.9096%;
    left: 4.86111%;
    width: 88.88889%;
    height: auto; }
  .c-thumbnail[data-type='game']::before {
    background-image: url(../static/global/thumbnails/game-a.png); }
  .c-thumbnail[data-type='video']::before {
    background-image: url(../static/global/thumbnails/video-a.png); }
  .c-thumbnail[data-type='activity']::before {
    background-image: url(../static/global/thumbnails/activity-a.png); }