body{
    /*background-color: gainsboro;*/
    background-color:#5c5f5d;
    margin: 0;
    width: 970px;
    height: 250px;
    transform-origin: 0 0;
}

.container{
    width: 970px;
    height: 250px;
    /*border:1px solid black;*/
    background-image: url("images/bg.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.layer{
    position: absolute;
}

.fan{
    left: 438px;
    bottom: -310px;
}

.shape{

  left: 374px;
  top: -18px;

}/*end shape*/

/*SET ALL ELEMENTS TO 0 OPACITY*/
.sou, .southampton, .vs, .new, .newcastle, .cta, .kickoff{
    opacity:0;
}


/*the blue shape is masked*/
.masked{
  -webkit-mask-image: url(images/square.png);
  mask-image: url(images/square.png);
  mask-repeat: no-repeat; 
  mask-position: 0 -300px;

}

/* =========== 01 SHAPE ANIMATION =========== */
/*this gets added by JS when ad starts*/
.shape-animation{
    animation-name: maskAnimation;
    animation-duration: .8s;
    animation-fill-mode: both;
}

@keyframes maskAnimation {
  from {mask-position: 0 -300px;}
  to {mask-position: 0 0;}
}

/* =========== 02 FAN ANIMATION =========== */
/*this gets added by JS when ad starts*/
.fan-animation{
    animation: fanAnimation .5s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* A single-bounce cubic-bezier can be used as a simple approximation */
    animation-fill-mode: both;
    animation-delay: .5s;
}

@keyframes fanAnimation {
  from {bottom: -310px;}
  to {bottom: -56px;}
}

/* =========== 03 SOU ANIMATION =========== */
.sou-animation{
    animation-name: revealElement_animation; 
    animation-duration: .6s; 
    animation-fill-mode: both;
    animation-delay: .75s;

}

/* =========== 04 SOUTHAMPTON ANIMATION =========== */
.southampton-animation{
    animation-name: revealElement_animation; 
    animation-duration: .6s; 
    animation-fill-mode: both;
    animation-delay: .85s;

}


/* =========== 05 VS ANIMATION =========== */
.vs-animation{
    animation-name: revealElement_animation; 
    animation-duration: .6s; 
    animation-fill-mode: both;
    animation-delay: 1s;

}


/* =========== 06 'NEW' ANIMATION =========== */
.NEW-animation{
    animation-name: revealElement_animation; 
    animation-duration: .6s; 
    animation-fill-mode: both;
    animation-delay: 1.2s;
    /* animation-timing-function: ease-out; */
}



/* =========== 07 'Newcastle' ANIMATION =========== */
.newcastle-animation{
    animation-name: revealElement_animation; 
    animation-duration: .6s; 
    animation-fill-mode: both;
    animation-delay: 1.3s;
    /* animation-timing-function: ease-out; */

}


/* =========== 08 CTA ANIMATION =========== */
.cta-animation{
    animation-name: revealElement_animation; 
    animation-duration: .6s; 
    animation-fill-mode: both;
    animation-delay: 1.4s;
    /* animation-timing-function: ease-out; */

    /* animation: fanAnimation .5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;  */

}



/* =========== 09 KICKOFF ANIMATION =========== */
.kickoff-animation{
    animation-name: revealElement_animation; 
    animation-duration: .6s; 
    animation-fill-mode: both;
    animation-delay: 1.5s;


}


@keyframes revealElement_animation {
  from {bottom: -18px;
        opacity: 0;
        }
  to {bottom: 0px;
        opacity: 1;

    }
}