/* MOB starting size: 1000px screen */
@media screen and (max-width: 1000px) {
  .mob-butterflies {
    display: none;
    position: absolute; 
    left: 0; 
    right: 0; 
    text-align: center;  
  }
  
  .hd-stars-wrap .hd-star {
    width: 30px;
    height: 30px;
  }

  .hd-stars-wrap .hd-star-on {
    background-size: 50px;
  }

  .hd-butterflies-wrap {
    position: absolute;
    z-index: 0;
  }

  .hd-masthead-wrap {
    top: 20px;
    z-index: 11;
  }

  h1.hd-masthead-ttl {
    font-size: 1.525em;
    margin-top: 1.575em;
    margin-bottom: 0.3em;
  }

  h1.hd-masthead-ttl .winner-ttl {
    margin-top: -0.4em;
  }

  h2.hd-masthead-teaser {
    font-size: 1.15em;
  }

  .hd-masthead-img {
    padding: 0 22.5%;
  }

  .hd-masthead-cnt {
    top: -20px;
  }

  .hd-easter-foo-logo {
    display: flex;
    width: 33%;
    justify-content: space-around;
    align-items: center;
  }

/* CHARS */
/* CHANGE TO 0 ONCE DONE */
  .chars-wrap {
    position: absolute;
    bottom: 55px;
  }

/* 1 = Polly */
  .char-1, .char-1-cta {
    left: 20%;
    top: 50px;
    width: 70px;
  }

  .chars-wrap .char-off.char-1 {
    z-index: -1;
  }

  .char-1-cta {
    height: 85px;
  }

/* 2 = Ollie */
  .char-2, .char-2-cta {
    left: 35vw;
    top: 60px;
    width: 100px;
  }

  .char-2-cta {
    height: 70px;
    width: 78px;
  }

/* Albert */
  .char-3, .char-3-cta {
    left: 25vw;
    bottom: 150px;
    width: 80px;
  }

  .char-3-cta {
    height: 70px;
  }

  .char-albert img.char-3 {
    bottom: 220px;
  }

/* 4 = Alphaboat */
  .char-4, .char-4-cta {
    bottom: -45px;
    right: 0;
    width: 80px;
  }

  .char-4-cta {
    height: 45px;
    bottom: -52px;
  }

  .char-off-5 {
    margin-bottom: 0;
    margin-left: auto;
    width: 160px;
    left: auto;
    right: 0;
    top: 100px;
  }

  .char-5, .char-5-cta {
    left: auto;
    bottom: 250px;
    right: 0;
    width: 180px;
  }

  .char-5-cta {
    width: 50px;
    height: 50px;
    right: 60px;
  }

  .char-off-6 {
    left: auto;
    top: 110px;
    right: 60px;
    margin: auto 0 0 auto;
    width: 100px;
  }

  .char-6, .char-6-cta {
    right: 0;
    bottom: 90px;
    width: 150px;
  }

  .char-6-cta {
    width: 60px;
    height: 60px;
    bottom: 140px;
  }

/* Popup Modal */
  .modal-body h4 {
    font-size: 25px;
    margin-top: 40px;
  }

  .modal-body h5 {
    font-size: 25px;
  }

/* Foo logos */
  .hd-easter-foo-logos-wrap .hd-easter-foo-logo img {
    width: 105px;
    max-width: 80%;    
  }

/**********/
/* Winner */
/**********/
  #hd-game-wrap.winner .hd-masthead-wrap {
    height: 95vh;
  }

  .winner-teaser img {
    width: 100px;
  }

  #hd-game-wrap.winner .hd-easter-foo {
    position: fixed;
    bottom: 0;
  }
}

@media screen and (max-width: 768px) {
  .mob-butterflies {
    display: block;
  }
}

@media screen and (max-width: 560px) {
  
  .hd-stars-wrap .hd-star {
    width: 25px;
    height: 25px;
  }

  .mob-butterflies {
    display: block;
  }

  .char-1, .char-1-cta {
    left: 15%;
    top: 10px;
  }

  .char-2, .char-2-cta {
    left: auto;
    right: 10vw;
    top: 50px;
    width: 75px;
  }

  .char-3, .char-3-cta {
    bottom: 90px;
    width: 45px;
  }

  .char-3-cta {
    width: 60px;
    height: 55px;
    bottom: 58px;
  }

 .char-5, .char-5-cta {
    bottom: 120px;
    width: 100px;
  }

  .char-5-cta {
    right: 24px;
    width: 50px;
  }

  .char-6, .char-6-cta {
    bottom: 25px;
    width: 100px;
  }

  .char-6-cta {
    width: 50px;
    height: 50px;
    bottom: 50px;
  }

  .hd-easter-foo-logos-wraper {
    margin-top: -10px;
    margin-bottom: 5px;
  }
}