/****************************************
    BOX WRAPPER
        - BACKGROUND
*****************************************/

.ima-jd-banner_box__wrapper {
    height: 285px;
    width: 100%;
    background-image: url('https://jdsports-client-resources.co.uk/jdsports-client-resources/images/13.07.2017/home/nmd-page/ima-jd-banner_adidas-nmd__image--background.jpg');
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

@media only screen and (min-width: 1024px) {
    .ima-jd-banner_box__wrapper {
        width: 100%;
        height: 350px;
        max-width: 1200px;
    }
}

/****************************************
    FRAME ONE
        - NMD LOGO
        - TEXT
*****************************************/

/****************************************
    FRAME ONE - LOGO
*****************************************/

.ima-jd-banner_box__frame-one--logo img {
    position: absolute;
    bottom: -51px;
    left: 19px;
    width: 132px;
    opacity: 0;
    animation-name: bottomFadeOutLogo;
    animation-duration: 3s;
}

    @keyframes bottomFadeOutLogo {
        0% {
            opacity: 0;
            bottom: -51px;
        }
        
        70% {
            opacity: 1;
            bottom: 15px;
        }
        
        100% {
            opacity: 0;
            bottom: 15px;
        }
    }

    @media only screen and (min-width: 1024px) {
        .ima-jd-banner_box__frame-one--logo img {
            bottom: -77px;
            left: 40px;
            width: 200px;
        }

        @keyframes bottomFadeOutLogo {
            0% {
                opacity: 0;
                bottom: -77px;
            }
            
            70% {
                opacity: 1;
                bottom: 21px;
            }
            
            100% {
                opacity: 0;
                bottom: 21px;
            }
        }
    }

/****************************************
    FRAME ONE - TEXT
*****************************************/

    .ima-jd-banner_box__frame-one--text img {
        position: absolute;
        opacity: 0;
        top: 0px;
        right: 140px;
        width: 268px;
        animation-name: topFadeInText;
        animation-duration: 2.5s;
        animation-fill-mode: forwards;
        animation-delay: 0.5s;
    }
    
        @keyframes topFadeInText {
            0% {
                position: absolute;
                opacity: 0;
            }
            
            85% {
                position: absolute;
                opacity: 1;
                transition: opacity .25s ease-in-out;
                animation-fill-mode: forwards;
            }
            
            100% {
                position: absolute;
                opacity: 1;
                transition: opacity .25s ease-in-out;
                animation-fill-mode: forwards;
            }
        }
    
        @media only screen and (min-width: 1024px) {
            .ima-jd-banner_box__frame-one--text img {
                left: 450px;
                width: 325px;
            }
        }

/****************************************
    FRAME TWO
        - TRAINER SIDE IMAGE
        - FILM STRIP IMAGE
        - HEADPHONES FRONT IMAGE
        - TRAINER BACK IMAGE
*****************************************/

/****************************************
    FRAME TWO - TRAINER SIDE
*****************************************/

.ima-jd-banner_box__frame-two--trainer-side img {
    position: absolute;
    top: -248px;
    left: 37px;
    width: 190px;
    animation-name: topFadeInTrainerSide;
    animation-duration: 3.5s;
    animation-fill-mode: forwards;
    animation-delay: 3s;
    animation-timing-function: ease-out;
}

    @keyframes topFadeInTrainerSide {
      0% {
        top: -248px;
      }

      25% {
          top: 17px;
      }

      75% {
         top: 17px;
      }

      100% {
          top: -248px;
      }
    }

    @media only screen and (min-width: 1024px) {
        .ima-jd-banner_box__frame-two--trainer-side img {
            top: -312px;
            left: 75px;
            width: 238px;
        }

        @keyframes topFadeInTrainerSide {
          0% {
            top: -312px;
          }

          25% {
              top: 20px;
          }

          75% {
              top: 20px;
          }

          100% {
              top: -312px;
          }
        }
    }

/****************************************
    FRAME TWO - FILM STRIP
*****************************************/

.ima-jd-banner_box__frame-two--film-strip img {
    position: absolute;
    top: -162px;
    left: 294px;
    width: 69px;
    animation-name: topFadeInSecondaryFilm;
    animation-duration: 3.5s;
    animation-fill-mode: forwards;
    animation-delay: 3s;
}

    @keyframes topFadeInSecondaryFilm {
        0% {
            top: -162px;
        }
        
        25% {
              top: 0px;
        }
        
        75% {
              top: 0px;
        }
        
        100% {
              top: -162px;
        }
    }

    @media only screen and (min-width: 1024px) {
        .ima-jd-banner_box__frame-two--film-strip img {
            top: -242px;
            left: 444px;
            width: 103px;
        }

        @keyframes topFadeInSecondaryFilm {
            0% {
                top: -242px;
            }
            
            25% {
                top: 0px;
            }
            
            75% {
                top: 0px;
            }
            
            100% {
                top: -242px;
            }
        }
    }

/****************************************
    FRAME TWO - HEADPHONES FRONT
*****************************************/

.ima-jd-banner_box__frame-two--headphones-front img {
    width: 132px;
    position: absolute;
    bottom: -154px;
    left: 391px;
    animation-name: bottomFadeInHeadphonesFront;
    animation-duration: 3.5s;
    animation-fill-mode: forwards;
    animation-delay: 3s;
}
    
    @keyframes bottomFadeInHeadphonesFront {
        0% {
            bottom: -154px;
        }
        
        25% {
            bottom: 0;
        }
        
        75% {
            bottom: 0;
        }
        
        100% {
            bottom: -154px;
        }
    }

    @media only screen and (min-width: 1024px) {
        .ima-jd-banner_box__frame-two--headphones-front img {
            width: 200px;
            bottom: -233px;
            left: 590px;
        }

        @keyframes bottomFadeInHeadphonesFront {
            0% {
                bottom: -233px;
            }
            
            25% {
                bottom: 0;
            }
            
            75% {
                bottom: 0;
            }
            
            100% {
                bottom: -233px;
            }
        }
    }

/****************************************
    FRAME TWO - TRAINER BACK
*****************************************/


.ima-jd-banner_box__frame-two--trainer-back img {
    width: 217px;
    position: absolute;
    right: -217px;
    top: 36px;
    animation-name: bottomFadeInTrainerBack;
    animation-duration: 3.5s;
    animation-fill-mode: forwards;
    animation-delay: 3s;
}

    @keyframes bottomFadeInTrainerBack {
        0% {
            right: -217px;
        }
        
        25% {
            right: 0px;
        }
        
        75% {
            right: 0px;
        }
        
        100% {
            right: -217px;
        }
    }

    @media only screen and (min-width: 1024px) {
        .ima-jd-banner_box__frame-two--trainer-back img {
            width: 296px;
            right: -297px;
            top: 45px;
        }

        @keyframes bottomFadeInTrainerBack {
          0% {
            right: -297px;
          }

          25% {
              right: 0px;
          }

          75% {
             right: 0px;
          }

          100% {
             right: -297px;
          }
        }
    }

/****************************************
    FRAME THREE
        - SHOE
        - POLAROID IMAGE
        - HEADPHONES IMAGE
        - LOGO IMAGE
*****************************************/

/****************************************
    FRAME THREE - SHOE
*****************************************/

.ima-jd-banner_box__frame-three--shoe img {
    width: 256px;
    position: absolute;
    top: -211px;
    left: 34px;
    animation-name: topFadeInSecondaryShoe;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-delay: 6.5s;
}

    @keyframes topFadeInSecondaryShoe {
      0% {
        top: -211px;
      }

      100% {
         top: 12px;
      }
    }

    @media only screen and (min-width: 1024px) {
        .ima-jd-banner_box__frame-three--shoe img {
            width: 315px;
            top: -279px;
            left: 37px;
        }

        @keyframes topFadeInSecondaryShoe {
            0% {
                top: -279px;
            }
            
            100% {
                top: 21px;
            }
        }
    }

/****************************************
    FRAME THREE - POLAROID
*****************************************/

.ima-jd-banner_box__frame-three--polaroid img {
    width: 131px;
    position: absolute;
    bottom: -99px;
    right: 241px;
    animation-name: bottomFadeInSecondaryPolaroid;
    animation-duration: 3.5s;
    animation-fill-mode: forwards;
    animation-delay: 6.5s;
}
    
    @keyframes bottomFadeInSecondaryPolaroid {
        0% {
            bottom: -99px;
        }
        
        25% {
            bottom: 0;
        }
        
        75% {
            bottom: 0;
        }
        
        100% {
            bottom: -99px;
        }
    }

    @media only screen and (min-width: 1024px) {
        .ima-jd-banner_box__frame-three--polaroid img {
            width: 200px;
            bottom: -151px;
            right: 361px;
        }

        @keyframes bottomFadeInSecondaryPolaroid {
            0% {
                bottom: -151px;
            }
            
            25% {
                bottom: 0;
            }
            
            75% {
                bottom: 0;
            }
            
            100% {
                bottom: -151px
            }
        }
    }

/****************************************
    FRAME THREE - HEADPHONES
*****************************************/

.ima-jd-banner_box__frame-three--headphones-side img {
    width: 158px;
    position: absolute;
    right: -159px;
    top: 114px;
    animation-name: RightFadeInSecondaryHeadphonesSide;
    animation-duration: 3.5s;
    animation-fill-mode: forwards;
    animation-delay: 6.5s;
}

    @keyframes RightFadeInSecondaryHeadphonesSide {
        0% {
            right: -159px;
        }
        
        25% {
            right: 0px;
        }
        
        75% {
            right: 0px;
        }
        
        100% {
            right: -159px;
        }
    }

    @media only screen and (min-width: 1024px) {
        .ima-jd-banner_box__frame-three--headphones-side img {
            width: 239px;
            right: -240px;
            top: 112px;
        }

        @keyframes RightFadeInSecondaryHeadphonesSide {
            0% {
                right: -240px;
            }
            
            25% {
                right:  0px;
            }
            
            75% {
                right:  0px;
            }
            
            100% {
                right: -240px;
            }
        }
    }

/****************************************
    FRAME THREE - NMD LOGO
*****************************************/

.ima-jd-banner_box__frame-three--logo img {
    width: 120px;
    position: absolute;
    top: 30px;
    right: 20px;
    opacity: 0;
    animation-name: FadeInSecondaryLogo2;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-delay: 6.5s;
}

    @keyframes FadeInSecondaryLogo2 {
      0% {
        opacity: 0;
      }

      20% {
          opacity: 1;
      }

      80% {
          opacity: 1;
      }

      100% {
         opacity: 0;
      }
    }

    @media only screen and (min-width: 1024px) {
        .ima-jd-banner_box__frame-three--logo img {
            top: 40px;
        }

        @keyframes FadeInSecondaryLogo2 {
          0% {
            opacity: 0;
          }

          20% {
              opacity: 1;
          }

          80% {
              opacity: 1;
          }

          100% {
             opacity: 0;
          }
        }
    }

/****************************************
    FRAME FOUR
        - ORIGINALS LOGO
        - NMD LOGO
        - CTA
*****************************************/

/****************************************
    FRAME FOUR - ORIGINALS LOGO
*****************************************/


.ima-jd-banner_box__frame-four--logo-original img {
    width: 80px;
    position: absolute;
    top: 20px;
    right: 30px;
    opacity: 0;
    animation-name: FadeInSecondaryLogo3;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-delay: 10s;
}

    @keyframes FadeInSecondaryLogo3 {
      0% {
        opacity: 0;
      }

      100% {
          opacity: 1;
      }
    }

    @media only screen and (min-width: 1024px) {
        .ima-jd-banner_box__frame-four--logo-original img {
            top: 10px;
            right: 30px;
        }

        @keyframes FadeInSecondaryLogo3 {
          0% {
            opacity: 0;
          }

          100% {
              opacity: 1;
          }
        }
    }

/****************************************
    FRAME FOUR - NMD LOGO
*****************************************/

.ima-jd-banner_box__frame-four--logo-nmd img {
    position: absolute;
    top: 285px;
    left: 40px;
    width: 122px;
    opacity: 0;
    animation-name: bottomFadeInLogo;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-delay: 10s;
}

    @keyframes bottomFadeInLogo {
        0% {
            top: 285px;
            opacity: 0;
        }
        
        70% {
            top: 229px;
            opacity: 1;
        }
        
        100% {
            top: 229px;
            opacity: 1;
        }
    }

    @media only screen and (min-width: 1024px) {
        .ima-jd-banner_box__frame-four--logo-nmd img {
            top: 350px;
            left: 40px;
            width: 150px;
        }
        
        @keyframes bottomFadeInLogo {
            0% {
                top: 350px;
            }
            
            70% {
                top: 283px;
                opacity: 1;
            }
            
            100% {
                top: 283px;
                opacity: 1;
            }
        }
    }

/****************************************
    FRAME FOUR - CTA
*****************************************/

.ima-jd-banner_box__frame-four--logo-cta img {
    width: 155px;
    position: absolute;
    top: 285px;
    right: 0;
    animation-name: topFadeInCta;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-delay: 10s;
}

    @keyframes topFadeInCta {
        0% {
            top: 285px;
        }
        
        100% {
            top: 243px;
        }
    }

    @media only screen and (min-width: 1024px) {
        .ima-jd-banner_box__frame-four--logo-cta img {
            width: 155px;
            top: 350px;
        }

        @keyframes topFadeInCta {
            0% {
                top: 350px;
            }
            
            100% {
                top: 308px;
            }
        }
    }

/****************************************
    FRAME FOUR - CTA a tag
*****************************************/

.ima-jd-banner_box__frame-four--logo-cta a {
    display: block;
}