.x-header {
  padding-right: 5px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  background-color: #000;
  height: 100% !important; }
  .x-header a, .x-header a:hover {
    text-decoration: none;
    color: #FFF; }
  .x-header h1 {
    color: #FFF;
    font-family: 'Kadwa', serif;
    font-variant: small-caps;
    font-size: 2.0rem;
    line-height: 1.9rem;
    background-color: #333;
    margin: 0;
    padding: 0; }
    @media (min-width: 768px) {
      .x-header h1 {
        font-size: 3.2rem;
        line-height: 2.9rem; } }
    @media (min-width: 992px) {
      .x-header h1 {
        font-size: 3.5rem;
        line-height: 3.1rem; } }
    @media (min-width: 1200px) {
      .x-header h1 {
        font-size: 3.8rem;
        line-height: 3.4rem; } }
  .x-header h2 {
    font-size: 2.5rem;
    color: #FFF;
    text-align: right;
    font-family: 'Roboto', sans-serif;
    font-weight: 400; }
    @media (min-width: 768px) {
      .x-header h2 {
        font-size: 1.6rem; } }
    @media (min-width: 992px) {
      .x-header h2 {
        font-size: 1.8rem; } }
    @media (min-width: 1200px) {
      .x-header h2 {
        font-size: 2.1rem; } }
  .x-header h4 {
    font-size: 0.95rem;
    margin-top: -2px;
    text-align: right;
    color: #DDD;
    font-family: 'Roboto', sans-serif;
    font-weight: 400; }
  .x-header .xh-img {
    width: 80px;
    height: 80px;
    margin: 10px 10px 10px 0;
    background: #700; }
    @media (min-width: 768px) {
      .x-header .xh-img {
        width: 130px;
        height: 130px;
        margin: 10px 20px 10px 0; } }
    @media (min-width: 992px) {
      .x-header .xh-img {
        width: 150px;
        height: 150px; } }

.x-test {
  background: #333; }