/**
 * Variables
 */
/**
 * Functions
 */
/**
 * Mixins
 */
html.isfullscreen #video-player {
  width: auto !important;
  height: auto !important;
  position: static !important;
}
html.isfullscreen .pbskids-onhover-overlay {
  position: static;
}
#activities {
  overflow: hidden;
  /**
   * MEDIUM LARGE
   */
  /**
   * SMALL
   */
}
#activities .activities ul {
  font-size: 0;
}
#activities .prev, #activities .next {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
@media (min-width: 641px) {
  #activities .content {
    position: absolute;
    z-index: 1;
    width: 100%;
    top: 45%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 0;
    -ms-transition: opacity 300ms ease-out;
    -webkit-transition: opacity 300ms ease-out;
    transition: opacity 300ms ease-out;
    overflow: hidden;
  }
  #activities .character {
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    opacity: 0;
    -ms-transition: opacity 300ms ease-out;
    -webkit-transition: opacity 300ms ease-out;
    transition: opacity 300ms ease-out;
  }
  #activities .character:before {
    display: block;
    content: "";
  }
  #activities .hero-gush {
    width: 28.25%;
    max-width: 452px;
    -ms-transform: translateX(-80%);
    -webkit-transform: translateX(-80%);
    transform: translateX(-80%);
    left: 50%;
    top: 0;
    cursor: pointer;
  }
  #activities .hero-gush:before {
    padding-top: 89.3805309735%;
    -ms-animation: floatBasicUp 9.7s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-animation: floatBasicUp 9.7s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation: floatBasicUp 9.7s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
    background-size: contain;
    background-image: url(../static/activities/character-gush.png);
    background-repeat: no-repeat;
  }
  #activities .hero-maury {
    width: 100%;
    position: absolute;
    right: 0;
    -ms-transform: translate(50%, 26%);
    -webkit-transform: translate(50%, 26%);
    transform: translate(50%, 26%);
    max-width: 645px;
    cursor: pointer;
  }
  #activities .hero-maury:before {
    background-image: url(../static/activities/character-maury.png);
    background-size: contain;
    padding-top: 55.6589147287%;
    position: relative;
    -ms-animation: floatBasicUpI 11.2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-animation: floatBasicUpI 11.2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation: floatBasicUpI 11.2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }
  #activities .activities {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  #activities .activities ul {
    position: relative;
    height: 366px;
    margin: 0 auto;
  }
  #activities .activities li {
    width: 300px;
    height: 326px;
    position: relative;
    top: 20px;
  }
  .no-touchevents #activities .activities li.animate {
    -ms-animation: floatHover 1200ms cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-animation: floatHover 1200ms cubic-bezier(0.215, 0.61, 0.355, 1);
    animation: floatHover 1200ms cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  #activities .activities li:first-child {
    width: 400px;
  }
  #activities .activities li:first-child a {
    width: 300px;
    position: absolute;
    height: 326px;
    right: 0;
  }
  #activities .activities li:nth-child(4n+1) a:before {
    background-image: url(../static/activities/frame-a.png);
  }
  #activities .activities li:nth-child(4n+2) a:before {
    background-image: url(../static/activities/frame-b.png);
  }
  #activities .activities li:nth-child(4n+3) a:before {
    background-image: url(../static/activities/frame-c.png);
  }
  #activities .activities li:nth-child(4n+4) a:before {
    background-image: url(../static/activities/frame-d.png);
  }
  #activities .activities img {
    height: 300px;
    width: 233px;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  #activities .activities a:before {
    content: "";
    display: block;
    width: 262px;
    height: 327px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    top: 50%;
    left: 50%;
    z-index: 1;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  #activities .no-scroll .activities li:first-child {
    width: 300px;
  }
}
@media (min-width: 641px) and (max-width: 1350px) {
  #activities .hero-gush {
    -ms-transform: translateX(-66%);
    -webkit-transform: translateX(-66%);
    transform: translateX(-66%);
  }
}
@media (min-width: 641px) and (max-width: 1200px) {
  #activities .hero-gush {
    -ms-transform: translateX(-55%);
    -webkit-transform: translateX(-55%);
    transform: translateX(-55%);
  }
}
@media (min-width: 641px) and (max-width: 1100px) {
  #activities .hero-gush {
    -ms-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    right: 21%;
    left: auto;
  }
}
@media (min-width: 641px) and (max-width: 690px) {
  #activities .hero-gush {
    display: none;
  }
}
@media (max-width: 640px) {
  #activities .content {
    margin: 0 60px;
  }
  #activities .activities {
    margin-bottom: 20px;
  }
  #activities .activities ul {
    width: 100% !important;
  }
  #activities .activities li {
    position: relative;
    width: 45%;
    margin: 20px 0;
  }
  #activities .activities li:nth-child(odd) {
    margin-right: 5%;
  }
  #activities .activities li:nth-child(even) {
    margin-left: 5%;
  }
  #activities .activities a {
    display: block;
    padding-top: 128.7553648069%;
    position: relative;
  }
  #activities .activities a:before {
    content: "";
    display: block;
    width: 112.44%;
    height: 108.66%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 10;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  #activities .activities img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
  }
  #activities .activities li:nth-child(4n+1) a:before {
    background-image: url(../static/activities/frame-a.png);
  }
  #activities .activities li:nth-child(4n+2) a:before {
    background-image: url(../static/activities/frame-b.png);
  }
  #activities .activities li:nth-child(4n+3) a:before {
    background-image: url(../static/activities/frame-c.png);
  }
  #activities .activities li:nth-child(4n+4) a:before {
    background-image: url(../static/activities/frame-d.png);
  }
}
@media (max-width: 640px) and (max-width: 480px) {
  #activities .content {
    margin: 0 40px;
  }
}
/**
 * Background
 */
@media (max-width: 640px) {
  main {
    background-image: url(../static/activities/mobile-background.jpg);
  }
}
@media (min-width: 641px) {
  #activities {
    background-image: url(../static/activities/background.jpg);
  }
}