Utility Header CSS

/* ## Utility Header
--------------------------------------------- */

.utility_header {
        background-color: #00457c;
    width: 100%;
}

.utility_header_wrap {
    max-width: 1200px;
    padding-left: 5%;
    padding-right: 5%;
    margin: 0 auto;
    padding: 5px 0;
    text-align: right;
}

.social_icons li {
    display: inline-block;
    padding-left: 5px;
}

.social_icons li a {
    color: #ffffff;
}

.utility_header .social_icons li a:hover {
    color: #f68026;
}

@media only screen and (max-width: 1200px) {
.utility_header_wrap {
    max-width: 960px;
    padding-left: 5%;
    padding-right: 5%;
    }

}

@media only screen and (max-width: 960px) {
.utility_header_wrap {
    max-width: 800px;
    }
}

@media only screen and (max-width: 320px) {
.utility_header {
    text-align: center;
    }
}