.container.promo-wrapper {
  width: 1360px !important;
  margin-top: 60px;
  margin-bottom: 60px;
}

#june-banner {
  width: 100%;
  background-image: url(../images/banner/back.jpg);
  background-image: -webkit-image-set(url("../images/banner/back.jpg") 1x,
      url("../images/banner/back@2x.jpg") 2x);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: visible;
  -webkit-box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.25);
}

#june-banner .banner-inner {
  height: auto;
  width: 100%;
  position: relative;
  gap: 4em;
}

#june-banner .main {
  top: -4px;
}

#june-banner .banner-cta {
  margin-top: -17px;
  margin-bottom: 24px;
}

#june-banner .banner-main {
  margin-top: 27px;
  margin-bottom: 21px;
}

#june-banner .button {
  margin-top: 14px;
  font-size: 1.2em;
  width: 10.5em;
  height: 2em;
  border-radius: 1em;
  z-index: 1;
  line-height: 1;
  margin-bottom: 0;
}

#june-banner .button {
  text-decoration: none;
  color: white;
}

#june-banner .button:hover,
#june-banner.button:visited,
#june-banner .button:active {
  text-decoration: none;
  color: white;
}

#june-banner p {
  line-height: 1;
}

#june-banner .text-top {
  font-size: 93px;
  letter-spacing: -4px;
  color: #d11241;
  text-align: center;
  filter: drop-shadow(2.086px 4.019px 0px rgba(60, 60, 60, 0.53));
  -webkit-text-stroke: 2px #ffffff;
  margin-bottom: -10px;
  font-family: 'Soup of Justice';
  left: -5px;
  position: relative;
  margin-top: 22px;
}

#june-banner .text-mid {
  font-size: 31px;
  letter-spacing: 4px;
  color: #d11241;
  text-align: center;
  filter: drop-shadow(1.632px 3.128px 0px rgba(60, 60, 60, 0.53));
  -webkit-text-stroke: 0.5px #ffffff;
  margin-bottom: 20px;
  font-family: 'Soup of Justice';
}

#june-banner .text-bottom {
  font-size: 24px;
  text-align: center;
  margin-bottom: 0;
}

#june-banner .image {
  bottom: -52px;
  left: -203px;
}

#popup-june .frogger-game {
  padding: 3em;
  background-image: url(../images/banner/back.jpg);
  background-image: -webkit-image-set(url("../images/banner/back.jpg") 1x,
      url("../images/banner/back@2x.jpg") 2x);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#june-banner .popup-close {
  padding: 15px;
}

.keys {
  bottom: -14px;
}

.frogger-game {
  gap: 3em;
}

@supports (background: -webkit-named-image(i)) {
  #june-banner .button {
    padding-top: 0;
  }
}

@media screen and (max-width: 1500px) {
  .container.promo-wrapper {
    width: 1260px !important;
  }

  #june-banner .image {
    bottom: -52px;
    left: -150px;
  }
}

@media screen and (max-width: 1390px) {
  .container.promo-wrapper {
    width: 1060px !important;
  }

  #june-banner .main {
    width: 33em;
  }

  #june-banner .banner-inner {
    gap: 2em;
  }

  #june-banner .image {
    left: -119px;
  }
}

@media screen and (max-width: 1200px) {
  #june-banner .text-top {
    font-size: 92px;
  }

  #june-banner .text-mid {
    font-size: 27px;
  }

  #june-banner .text-bottom {
    font-size: 20px;
  }

  #june-banner .banner-inner {
    gap: 1em;
  }

  #june-banner .main {
    width: 30em;
  }

  #june-banner .image {
    display: none;
  }

}

@media screen and (max-width: 991px) {
  #june-banner .banner-inner {
    padding: 0 15px;
  }

  #june-banner .main {
    top: unset;
  }

  #june-banner .banner-main {
    margin-left: 0;
  }

  #june-banner .banner-inner {
    flex-direction: column;
    gap: 0;
    padding: 0;
    margin: 5% 0;
  }

  #june-banner-game {
    height: 49em;
  }

}

@media screen and (max-width: 767px) {
  #june-banner .button {
    font-size: 1.3em;
    width: 10em;
  }

  .banner-inner .banner-main {
    width: 100%;
  }

  .banner-inner .banner-cta {
    margin-left: 0em;
    margin-right: 0em;
    width: 100%;
  }

  .container.promo-wrapper {
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 567px) {
  #june-banner {
    background-image: url(../images/banner/back-m.jpg);
    background-image: -webkit-image-set(url("../images/banner/back-m.jpg") 1x,
        url("../images/banner/back-m@2x.jpg") 2x);
  }


  #june-banner .main {
    width: 394px;
  }

  #june-banner .banner-main {
    margin: 0;
    margin-top: 27px;

  }

  #june-banner .banner-inner {
    margin-bottom: 74px;
    margin-top: 0;
  }

  #june-banner .text-top {
    margin-bottom: -7px;
    font-size: 66px;
    letter-spacing: -3px;
    filter: drop-shadow(1.178px 2.237px 0px rgba(60, 60, 60, 0.53));
    -webkit-text-stroke: 1px #ffffff;
  }

  #june-banner .text-mid {
    font-size: 24px;
    letter-spacing: 2px;
    filter: drop-shadow(1.178px 2.237px 0px rgba(60, 60, 60, 0.53));
    -webkit-text-stroke: 0.5px #ffffff;
    margin-bottom: 9px;
  }

  #june-banner .text-bottom {
    font-weight: 800;
    margin-top: 10px;
    font-size: 17px;
  }

  #june-banner .button {
    font-size: 1.2em;
    width: 9em;
  }

  #june-banner .image {
    bottom: -82px;
    left: -8px;
    width: 280px;
    z-index: 1;
  }

  .frogger-game.active-mobile {
    position: relative;
    margin-bottom: 0;
  }

  .keys {
    bottom: -36.4em;
    width: 22em;
  }

  .frogger-keys {
    height: 5em;
    top: unset;
    bottom: -7em;
    width: 23em;
    left: -1em;
  }

  .frogger-keys button {
    color: transparent;
    background-color: transparent;
    width: 100%;
    height: 100%;
    border: none;
  }

  #popup-june .frogger-game {
    padding: 0;
  }

  #june-banner .text-top span {
    font-size: 33px;
    top: 17px;
    left: -23px;
  }

  #popup-june img {
    max-width: unset !important;
  }

  .game-text {
    width: 13em;
    margin-bottom: -3em;
    margin-top: -5em;
    z-index: 1;
  }

  .keys {
    bottom: -37em;
    width: 22em;
  }
}