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

#f1{
    position: absolute;
    overflow: hidden;
    width: 450px;
    height: 100px;
}

#bg_blue{
    width: 450px;
}

.bg{
    position: absolute;
}

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

#container_bg_blue{
    position: absolute;
    overflow: hidden;   
    width: 450px;
    height: 100px;
    transform-origin: 100% 100%;
}

#container_logo{
    position: absolute;
    overflow: hidden;   
    width: 450px;
    height: 100px;    
}

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


#girl1, #girl2{
    position: absolute;
    width: 450px;
}

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

.retina{
    position: absolute;
    top:0px;
    left:0px;
    width: 320px;
    /*transform:scale3d(.5,.5,.5);*/
}

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


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

.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;}
}


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

.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);}
}




.popin{}


body{
    margin: auto;
}