#page-hero {
    color: #fff;
    background: #1a9fd6;

    background: -moz-linear-gradient(-45deg, #a50029 0%, #e40039 30%, #e40039 70%, #a50029 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #a50029), color-stop(30%, #e40039), color-stop(70%, #e40039), color-stop(100%, #a50029));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, #a50029 0%, #e40039 30%, #e40039 70%, #a50029 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, #a50029 0%, #e40039 30%, #e40039 70%, #a50029 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, #a50029 0%, #e40039 30%, #e40039 70%, #a50029 100%);
    /* IE10+ */
    background: linear-gradient(135deg, #a50029 0%, #e40039 30%, #e40039 70%, #a50029 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#416faf', endColorstr='#4471af', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
    position: relative;
    z-index: 399;
    text-align: center;
    padding: 0;
}

/*iPad header padding fix*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    header[role="banner"] .wrap {
        padding-top: 1em;
        padding-bottom: 1em;
    }

    header[role="banner"] #logo {
        height: 2em !important;
        margin-top: .35em;
    }
}

header[role="banner"] #logo {
    float: left;
    height: 3.65em;
    width: 200px;
    margin: 0;
    background-image: url('./logo-header.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 200px 50px;
    border-bottom: none;
}