body{
    margin: auto;
}

#bannerClicked{
    position: absolute;
    overflow: hidden;
    width: 320px;
    height: 150px;
}

#f1{
    position: absolute;
    overflow: hidden;
    width: 320px;
    height: 150px;
}

#bg{
    position: absolute;
    width: 320px;
    height: 50px;
    bottom: 0px;
}


#container{
    position: absolute;
    overflow: hidden;   
    width: 320px;
    height: 100px;
    left: 0px;
}

#container_bg{
    position: absolute;
    overflow: hidden;   
    width: 320px;
    height: 50px;
    transform-origin: 100% 100%;
}

#copy1{
   position: absolute;
   width: 320px;
}

#copy2{
   position: absolute;
   width: 320px;
}


#copy2Container{
    position: absolute;
    overflow: hidden;   
    width: 320px;
    height: 25px;
    top: 125px;
}

#cta{
    position: absolute;
    width: 320px;
}


#girl1{
    position: absolute;
    width: 320px;
   transform-origin: 100% 100%;

}

#girl2{
    position: absolute;
    width: 320px;
}

#girlcontainer{
    position: absolute;
    overflow: hidden;   
    width: 320px;
    height: 50px;
    bottom: 0px;
}


#logo{
    position: absolute;   
    width: 320px;
}

.retina{
    position: absolute;
    top:0px;
    left:0px;
    width: 320px;
}

#whiteMask{
   background-color: white;
   position: absolute;
   height: 100px;
   width: 450px;
}


/***************animation classes***************/
.hide{
    visibility: hidden;
}

.fadeout{
    animation-name: fadeout;
    animation-fill-mode: forwards;
    animation-duration: 1000ms;
}

@keyframes fadeout {
    0% { opacity:1;}
    100% { opacity:0;}
}

.shortfastfadeinleft{
    animation-name: shortfastfadeinleft;
    animation-fill-mode: forwards;
    animation-duration: 200ms;
    animation-timing-function: ease-in; 
}

@keyframes shortfastfadeinleft {
    0% { transform: translate( -20px, 0px); opacity:0;}
    100% { transform: translate( 0px, 0px); opacity:1;}
}

.shortslowfadeinleft{
    animation-name: shortslowfadeinleft;
    animation-fill-mode: forwards;
    animation-duration: 1000ms;
    animation-timing-function: cubic-bezier(.26,.46,0,1);
}

@keyframes shortslowfadeinleft {
    0% { transform: translate( -20px, 0px); opacity:0;}
    100% { transform: translate( 0px, 0px); opacity:1;}
}

.logoreveal{
    animation-name: logoreveal;
    animation-fill-mode: forwards;
    animation-duration: 1400ms;
    animation-timing-function: ease-in;    
}  
@keyframes logoreveal {
    0% { width: 0px;}
    100% { width: 450px;}
}


.walkin{
    animation-name: walkin;
    animation-fill-mode: forwards;
    animation-duration: 2000ms;
    animation-timing-function: cubic-bezier(.26,.46,0,1);
}  
@keyframes walkin {
    0% { transform: translate(50px, 20px);}
    100% { transform: translate(0px, 0px);}
}

.inbottom{
    animation-name: inbottom;
    animation-fill-mode: forwards;
    animation-duration: 800ms;
    animation-timing-function: cubic-bezier(.26,.46,0,1);
}  
@keyframes inbottom {
    0% { transform: translate(0px, 150px);}
    100% { transform: translate(0px, 0px);}
}

.inbottomgirl{
    animation-name: inbottomgirl;
    animation-fill-mode: forwards;
    animation-duration: 800ms;
    animation-timing-function: cubic-bezier(.26,.46,0,1);
}  
@keyframes inbottomgirl {
    0% { transform: translate(0px, 150px);}
    100% { transform: translate(0px, -100px);}
}

.intop{
    animation-name: intop;
    animation-fill-mode: forwards;
    animation-duration: 500ms;
    animation-timing-function: ease-out;
}

@keyframes intop {
    0% { transform: translate( 0px, -150px);}
    100% { transform: translate( 0px, -125px);}
}

.godown{
    animation-name: godown;
    animation-fill-mode: forwards;
    animation-duration: 2000ms;
    animation-timing-function: cubic-bezier(.26,.46,0,1);
}

@keyframes godown {
    0% { transform: translate(0px, 0px);}
    100% { transform: translate(110px, 110px);}
}

.walkinright{
    animation-name: walkinright;
    animation-fill-mode: forwards;
    animation-duration: 1300ms;
    animation-timing-function: ease-out;
}  
@keyframes walkinright {
    0% { transform: translate(-480px, 0px);}
    100% { transform: translate(0px, 0px);}
}


.bgblueanimation{
    animation-name: bgblueanimation;
    animation-fill-mode: forwards;
    animation-duration: 2500ms;
    animation-timing-function: ease-in;    
}  
@keyframes bgblueanimation {
    0% { transform: translate(490px, 0px);}
    100% { transform: translate(0px, 0px);}
}


.shortfastfadeinleft{
    animation-name: shortfastfadeinleft;
    animation-fill-mode: forwards;
    animation-duration: 200ms;
    animation-timing-function: ease-in; 
}

@keyframes shortfastfadeinleft {
    0% { transform: translate( -20px, 0px); opacity:0;}
    100% { transform: translate( 0px, 0px); opacity:1;}
}