/* BEGIN LOGO HEADER CSS */
  
  #logo {
    text-align: center;
    margin: 0;
    padding: 0;
  }
  
  div#site-id 
  { 
    display: inline-block;
    position: relative; 
    height: 100%;
    padding: 0; 
  }
  
  div.site-name {
    display: inline-block;
    height: 100%;
    padding: 10px 10px 10px 0;    
  }
  
  div.site-description {
    display: inline-block;
    height: 100%;
    padding: 0;    
  }
  
  div.site-name a, div.site-description a {
    color: inherit;
    text-decoration: none;
  } 
  
  a#logo-link {
    text-align: left;
    text-decoration: none;  
    color: white;
    width:100%; 
    height:100%; 
    position: absolute; 
    top: 0; left: 0;
  }
  
  #social-media-icons {
    display: inline-block;
    position: relative;
    left: 23px;
    bottom: 13px; 
    padding-top: 10px;
    z-index: 10;
  }
  
  #social-media-icons img {
    display: inline-block;
    width: 34px;
    float: none;
    margin: 0 2px;
  }
  
/* ###################################### */
  @media screen and (max-width: 1220px) {
    #logo {
      float: none;
      padding: 0;
    }
    
    div.site-name {
      padding: 0;    
    }

    div.site-description {
      display: block;
      padding: 0;  
      margin: 0;
    }
    
    #social-media-icons {
      display: block;
      max-width: 130px;
      left: auto;
      bottom: auto;
      margin: 0 auto;
      padding: 4px 0 9px;
    }  
  }
 
  
/* ###################################### */
  @media screen and (max-width: 980px) {
    #logo {
      padding-left: 0px;
      padding-right: 0px;
    }
  
    .site-name {
      display: block;
    } 
  }
  
  /* ###################################### */
  @media screen and (max-width: 650px) {
    .site-name { 
      font-size: 3.9em;
    }
    .site-description {
      font-size: 2.3em;
      padding-bottom: 3px;
    }
  }
  
/* END LOGO HEADER CSS */