header a.logo {
    display: block;
    position: absolute;
    background-position: 0 0;
    background-repeat: no-repeat;
}


@media screen and (min-width: 1025px) {
    
    header {
        height: 209px; 
        background: url(../img/banner_x-large.jpg) no-repeat left 0px; 
        width: 100%; 
        background-size: 100%;
        webkit-background-size: cover;
        moz-background-size: cover;
        o-background-size: cover;
        background-size: cover;
        }
    header a.logo {
        width:  170px;
        height: 107px;
        top: 40px;
        left: 44px;
        background-image: url(../img/logo_x-large.png);
    }
        
}



@media screen and (min-width: 851px) and (max-width: 1024px) {
    
    header {
        height: 174px; 
        background: url(../img/banner_large.jpg) no-repeat left 0px; 
        width: 100%;
        background-size: 100%;
        webkit-background-size: cover;
        moz-background-size: cover;
        o-background-size: cover;
        background-size: cover;
    }
    header a.logo {
        width:  150px;
        height: 94px;
        top: 28px;
        left: 30px;
        background-image: url(../img/logo_large.png);
    }
    
}



@media screen and (min-width: 770px) and (max-width: 850px) {
    
    header {
        height: 134px;
        background: url(../img/banner_medium.jpg) no-repeat left 0px; 
        width: 100%;
        background-size: 100%;
        webkit-background-size: cover;
        moz-background-size: cover;
        o-background-size: cover;
        background-size: cover;
    }
    header a.logo {
        width:  115px;
        height: 72px;
        top: 20px;
        left: 20px;
        background-image: url(../img/logo_medium.png);
    }
    
}



@media screen and (min-width: 551px) and (max-width: 769px) {
    
    header {
        height: 104px;
        background: url(../img/banner_small.jpg) no-repeat left 0px; 
        width: 100%;
        background-size: 100%;
        webkit-background-size: cover;
        moz-background-size: cover;
        o-background-size: cover;
        background-size: cover;
    }
    header a.logo {
        width:  105px;
        height: 66px;
        top: 16px;
        left: 15px;
        background-image: url(../img/logo_small.png);
    }
    
}



@media screen and (min-width: 320px) and (max-width: 550px) {
    
    header {
        height: 69px;
        background: url(../img/banner_x-small.jpg) no-repeat left 0px; 
        width: 100%;
        background-size: 100%;
        webkit-background-size: cover;
        moz-background-size: cover;
        o-background-size: cover;
        background-size: cover;
    }
    header a.logo {
        width:  68px;
        height: 43px;
        top: 11px;
        left: 10px;
        background-image: url(../img/logo_x-small.png);
    }
    
}