@keyframes buttonCtaBounce {
  0% {
    transform: scale(1); }
  25% {
    transform: scaleX(1.2) scaleY(0.8); }
  50% {
    transform: scaleX(0.8) scaleY(1.2); }
  75% {
    transform: scaleX(1.1) scaleY(1.1); } }

@keyframes carouselButtonBounce {
  0% {
    transform: scale(1) translateY(-50%); }
  25% {
    transform: scaleX(1.2) scaleY(0.8) translateY(-50%); }
  50% {
    transform: scaleX(0.8) scaleY(1.2) translateY(-50%); }
  75% {
    transform: scaleX(1.1) scaleY(1.1) translateY(-50%); } }

@keyframes playButtonBounce {
  0% {
    transform: scale(1) translate(-50%, -50%); }
  25% {
    transform: scaleX(1.2) scaleY(0.8) translate(-50%, -50%); }
  50% {
    transform: scaleX(0.8) scaleY(1.2) translate(-50%, -50%); }
  75% {
    transform: scaleX(1.1) scaleY(1.1) translate(-50%, -50%); } }

.wrapper-donald--hub {
  background-color: #faf5ed; }
  .wrapper-donald--hub .container {
    max-width: 72.0833333333vw;
    margin-left: auto;
    margin-right: auto;
    width: 100%; }
    @media (max-width: 991px) {
      .wrapper-donald--hub .container {
        max-width: 100%;
        padding-left: 38px;
        padding-right: 38px; } }
    @media (max-width: 767px) {
      .wrapper-donald--hub .container {
        padding-bottom: 20px; } }
  .wrapper-donald--hub .copy {
    position: fixed;
    right: 0;
    top: 10.4166666667vw;
    z-index: 999999999;
    width: 1.5104166667vw;
    height: auto; }
    @media (max-width: 767px) {
      .wrapper-donald--hub .copy {
        top: 80px;
        width: 15px; } }

.hub-intro {
  background-image: url("../images/bkg-hub.svg");
  background-repeat: no-repeat;
  background-position: center 6.7708333333vw;
  background-size: auto 100%;
  padding-bottom: 10.4166666667vw; }
  @media (max-width: 767px) {
    .hub-intro {
      background-image: url("../images/bkg-hub-mobile.svg");
      background-position: center 260px;
      padding-bottom: 50px; } }

.cta a, .cta span {
  position: relative;
  font-size: 1.25vw;
  font-family: "Chronic", sans-serif;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  padding: 0.5729166667vw 1.5625vw;
  border-radius: 3em;
  color: #FFF;
  background-color: #f3410e;
  line-height: 1.2em;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
  box-shadow: 4px 5px 0px rgba(0, 0, 0, 0.16);
  cursor: pointer; }
  @media (max-width: 767px) {
    .cta a, .cta span {
      font-size: 24px; } }
  .cta a:hover, .cta span:hover {
    animation: buttonCtaBounce .5s;
    text-decoration: none; }

.visual {
  position: relative;
  padding: 1.71875vw 0 3.6458333333vw; }
  @media (max-width: 767px) {
    .visual {
      padding-bottom: 120px; } }
  .visual-content-text {
    background-image: url("../images/baloon-visual-hub.svg");
    filter: drop-shadow(10px 10px 0px #47aadc);
    background-size: 100%;
    background-repeat: no-repeat;
    text-align: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    max-width: 45.78125vw;
    margin: auto;
    padding: 1.3020833333vw 1.1979166667vw 4.1666666667vw 0;
    position: relative;
    z-index: 2; }
    @media (max-width: 767px) {
      .visual-content-text {
        max-width: 313px;
        margin: auto;
        height: 249px;
        background-size: 100% 100%;
        padding: 0 25px;
        margin-top: 10px; } }
    .visual-content-text .content {
      max-width: 31.25vw; }
      @media (max-width: 767px) {
        .visual-content-text .content {
          max-width: none; } }
    .visual-content-text .title {
      color: #424242;
      font-size: 5.1041666667vw;
      line-height: 4.6875vw;
      font-family: "Chronic", sans-serif; }
      @media (max-width: 767px) {
        .visual-content-text .title {
          font-size: 36px;
          line-height: 30px; } }
    .visual-content-text .text {
      color: #424242;
      font-size: 1.25vw;
      line-height: 1.875vw; }
      @media (max-width: 767px) {
        .visual-content-text .text {
          font-size: 16px;
          line-height: 24px; } }
  .visual-image {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1; }
    @media (max-width: 767px) {
      .visual-image {
        display: none; } }
    .visual-image.mobile {
      display: none; }
      @media (max-width: 767px) {
        .visual-image.mobile {
          display: block;
          width: 100%;
          margin: auto;
          left: 50%;
          -ms-transform: translateX(-50%);
              transform: translateX(-50%);
          z-index: 11;
          bottom: -85px; } }

.hub-content-game {
  --gap: 2.6041666667vw;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: calc(100% + var(--gap));
  -ms-flex-align: center;
      align-items: center;
  margin-top: 1.3020833333vw; }
  @media (max-width: 767px) {
    .hub-content-game {
      width: 100%;
      margin-top: 50px; } }
  .hub-content-game .item {
    --gap: 2.6041666667vw;
    width: calc(33.33% - var(--gap));
    margin: 0 var(--gap) var(--gap) 0;
    text-align: center;
    position: relative;
    border-radius: 23px 0;
    overflow: hidden;
    filter: drop-shadow(6px 6px 0px rgba(0, 0, 0, 0.16));
    backdrop-filter: blur(0);
    transform: translateZ(0); }
    @media (max-width: 767px) {
      .hub-content-game .item {
        width: 100%;
        margin: 0 auto 30px;
        filter: drop-shadow(10px 10px 0px rgba(0, 0, 0, 0.3)); } }
    .hub-content-game .item .copy-cards {
      position: absolute;
      bottom: 0.7291666667vw;
      left: 50%;
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
      max-width: 11.3541666667vw;
      z-index: 1; }
      @media (max-width: 767px) {
        .hub-content-game .item .copy-cards {
          max-width: 218px;
          bottom: 20px; } }
    .hub-content-game .item .disabled:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1; }
    .hub-content-game .item .cta {
      position: absolute;
      left: 50%;
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
      bottom: 2.8125vw;
      z-index: 2;
      width: 100%; }
      @media (max-width: 767px) {
        .hub-content-game .item .cta {
          bottom: 61px; } }
      .hub-content-game .item .cta a {
        background-color: #009fe5; }
        @media (max-width: 767px) {
          .hub-content-game .item .cta a {
            padding: 10px 30px;
            font-size: 20px; } }
      .hub-content-game .item .cta img {
        width: 0.8333333333vw;
        margin-right: 0.5208333333vw; }
        @media (max-width: 767px) {
          .hub-content-game .item .cta img {
            width: 15px;
            height: 19px;
            margin-right: 10px; } }
      .hub-content-game .item .cta.play a {
        background-color: #FFF;
        color: #F3410E; }
    .hub-content-game .item .image:after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 4.3229166667vw;
      background: linear-gradient(rgba(0, 0, 0, 0) 0%, #000 100%);
      opacity: 0.8;
      z-index: 1; }
      @media (max-width: 767px) {
        .hub-content-game .item .image:after {
          height: 83px; } }

.halloween {
  padding: 8.3333333333vw 0 4.0625vw; }
  @media (max-width: 767px) {
    .halloween {
      padding-top: 90px; } }