@import url(https://fonts.googleapis.com/css?family=Open+Sans);
        
        
body, html {
    width: 100%;
    height: 100%;
    background: #737373;
    margin: 0px;
}
.banner-wrapper
{
    width: 100%;
    height: 100%;
    display: table;            
}
.banner-cntnt
{
    display: table-cell;
    vertical-align: middle;
}

p,h1,h2,h3,h4,h5,h6
{
    margin: 0px;
    padding: 0px;
}

.banner-div {
    background: url('images/bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    width: 160px;
    height: 600px;
    margin: 0 auto;
    font-family: 'Open Sans', sans-serif;    
    color: #fff;
    overflow: hidden;
}

.hdr-logo img {
    position: absolute;
    width: 143px;
    height: 34px;
    top: 50px;
    left: 9px;
}

.prodctname img {
    position: absolute;
    width: 126px;
    height: 175px;
    left: 17px;
    top: 280px;
}

.call-to-action a img {
    position: absolute;
    width: 147px;
    height: 38px;
    left: 7px;
    bottom: 30px;
}

.hdr-logo img {   

    -webkit-animation:  hdr-logo 8s infinite ease-in;
    -moz-animation:     hdr-logo 8s infinite ease-in;
    -o-animation:       hdr-logo 8s infinite ease-in;
    -ms-animation:      hdr-logo 8s infinite ease-in;
    animation:          hdr-logo 8s infinite ease-in;
    
}
.prodctname {
    -webkit-animation:  prodctname 8s infinite ease-in;
    -moz-animation:     prodctname 8s infinite ease-in;
    -o-animation:       prodctname 8s infinite ease-in;
    -ms-animation:      prodctname 8s infinite ease-in;
    animation:          prodctname 8s infinite ease-in;
}
.call-to-action a img {
    -webkit-animation:  calltoaction 8s infinite linear;
    -moz-animation:     calltoaction 8s infinite linear;
    -o-animation:       calltoaction 8s infinite linear;
    -ms-animation:      calltoaction 8s infinite linear;
    animation:          calltoaction 8s infinite linear;
}

@keyframes hdr-logo {
    
    0%
    {        
        opacity: 0;     
    }
    30%, 60%, 90%, 100% 
    {      
        opacity: 1;  
        -webkit-transform: rotateY(360deg);
        -moz-transform: rotateY(360deg);
        -o-transform: rotateY(360deg);
        -ms-transform:rotateY(360deg);
        transform: rotateY(360deg);
    }

}

@keyframes prodctname {
    
    0%,30%
    {        
        opacity: 0;     
    }
    40%, 90%, 100% 
    {        
        opacity: 1;
        /*-webkit-transform: rotateX(360deg);
        -moz-transform: rotateX(360deg);
        -o-transform: rotateX(360deg);
        -ms-transform:rotateX(360deg);
        transform: rotateX(360deg);*/
    }

}

@keyframes calltoaction {
    
    0%,30%,50%
    {        
        opacity: 0;     
    }
    60%{
        opacity: 1;
    }

    70%
    {        
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform:scale(1);
        transform: scale(1);
    }
    72%
    {        
        webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -o-transform: scale(1.05);
        -ms-transform:scale(1.05);
        transform: scale(1.05);
    }
    74%
    {        
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform:scale(1);
        transform: scale(1);
    }

    76%
    {        
        webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -o-transform: scale(1.05);
        -ms-transform:scale(1.05);
        transform: scale(1.05);
    }

    80%
    {        
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform:scale(1);
        transform: scale(1);
    }
    82%
    {        
        webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -o-transform: scale(1.05);
        -ms-transform:scale(1.05);
        transform: scale(1.05);
    }
    84%
    {        
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform:scale(1);
        transform: scale(1);
    }

    86%
    {        
        webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -o-transform: scale(1.05);
        -ms-transform:scale(1.05);
        transform: scale(1.05);
    }   transform: scale(1);


    90%
    {        
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform:scale(1);
        transform: scale(1);
    }
    92%
    {        
        webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -o-transform: scale(1.05);
        -ms-transform:scale(1.05);
        transform: scale(1.05);
    }
    94%
    {        
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform:scale(1);
        transform: scale(1);
    }

    96%
    {        
        webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -o-transform: scale(1.05);
        -ms-transform:scale(1.05);
        transform: scale(1.05);
    }
    100% 
    {        
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform:scale(1);
        transform: scale(1);
    }

}