img.logo {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
  -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}

img.logo:hover {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
  -webkit-filter: grayscale(0%);
}

svg image {
  transition: all .6s ease;
}

svg image:hover {
  opacity: 0;
}

img.half-grayscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.5\'/></filter></svg>#grayscale"); /* Firefox 10+ */
  filter: gray alpha(opacity=50); /* IE6-9 */
  -webkit-filter: grayscale(50%); /* Chrome 19+ & Safari 6+ */
  -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
  -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}

img.half-grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}

#content span {
  display: block;
  float: left;
  width: 200px;
  height: 100px;
  border-bottom: 1px solid #111;
  border-right: 1px solid #111;
  overflow: hidden;
}

#content span.wide {
  width: 400px;
}

#content span.square {
  width: 100px;
}

/* ====== media ====== */
.media {margin: 0; border-bottom: 1px solid #111; border-right: 1px solid #111; background-color: #FFF;}
.media, .bd {overflow:hidden; _overflow:visible; zoom:1;}
.media .img {float:left; border-right: 1px solid #111;}
.media .img img{display:block;}
.media .imgExt{float:right; margin-left: 10px;}

.bd {height: 100px; padding-left: 10px; padding-right: 10px; }
.bd h2 {margin-top: 10px; margin-bottom: 5px}

#content {color: #333;}

#footer {top: 10px; margin-top: 20px;}

.press-head {
  color: #DDD;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 10px;
}

#content div.media a:hover {
  color: #444;
}

#content div.media a:link, #content div.media a:visited {
  color: #333;
}
