.jpl-banner{
   position: relative;
    margin-bottom: 10px;
   margin-top: 10px;
}
.jpl-banner-logo {
    display: block;
    float: left;
    padding: 0;
    margin: 0;
}
.jpl-banner-nav {
    display: block;
    float: right;
    text-align: right;
    padding: 0 10px 0 0;
    margin: 0;
    clear: right;
}
.jpl-banner-nav-li {
    display: inline-block;
    padding: 0 10px 0 0;
}
.jpl-banner-nav-a {
    color: #b3d4fc;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: lighter;
    font-size: 11px;
    text-shadow: 0 0 .1em #b3d4fc;
    letter-spacing: 0.1em;
}
.jpl-banner-nav-a:hover {
    color: #fff;
    text-shadow: 0 0 .2em #fff;
}
/* JPL Banner Social Links */
.jpl-banner-social {
    padding-right: 10px;
}
.jpl-banner-social-li {
    display: inline-block;
    padding: 0 5px 0 0;
}
.jpl-banner-social-heading {
    color: #fff;
    text-transform: uppercase;
    font-weight: lighter;
    font-size: 11px;
    line-height: 11px;
    text-shadow: 0 0 .1em #fff;
    letter-spacing: 0.1em;
}
/* ============================================================
    NARROW WIDTH / MOBILE 
   ============================================================ */

@media only screen and (max-width: 768px) {
    .jpl-banner {
        border-bottom: solid 1px #fff;
        padding-bottom: 25px;
    }
    .jpl-banner-logo {
        margin-bottom: -10px;
    }
    .jpl-banner-nav {
        float: none;
        text-align: center;
        clear: both;
        margin-bottom: -15px;
        padding-top: 5px;
    }
    .jpl-banner-social {
        position: absolute;
        top: 10px;
        right: 0;
        width: 160px;
    }
    .jpl-banner-social-heading {
        display: none;
    }
    .top-banner-image {
        display: none;
    }
    .jpl-banner-nav-a {
        font-size: 4mm;
    }
}
@media only screen and (max-width: 586px) {
    .jpl-banner-nav {
        margin-bottom: -5px;
        padding-top: 5px;
    }
    .jpl-banner-social {
        margin-bottom: -15px;
        position: static;
        width: 100%;
    }
    .jpl-banner-nav-a {
        font-size: 4mm;
    }
}

/* ============================================================
    INTERMEDIATE WIDTH / TABLETS 
   ============================================================ */
@media only screen and (min-width: 768px) and (max-width : 975px) {
    .jpl-banner {
        border-bottom: solid 1px #fff;
        padding-bottom: 25px;
    }
    .jpl-banner-logo {
        margin-bottom: -15px;
    }
    .jpl-banner-nav {
        float: none;
        text-align: center;
        clear: both;
        margin-bottom: -15px;
        padding-top: 5px;
    }
    .jpl-banner-social-heading {
        display: block;
        
    }
    .jpl-banner-social {
        position: absolute;
        top: 20px;
        right: -10px;
        width: 45%;
    }
    .top-banner-image {
        display: none;
    }
    .top-banner-title { display: block; }
    .jpl-banner-nav-a {
        font-size: 4mm;
    }
    
}

/* ============================================================
    WIDE
   ============================================================ */
@media only screen and (min-width: 975px) and (max-width : 1140px) {
    .jpl-banner-nav {
        margin-top: 15px;
    }
    .jpl-banner-social {
        margin-top: 0;
    }
}
/* ============================================================
    FULL WIDTH
   ============================================================ */
@media only screen and (min-width: 1140px) {
}