html, body {
  height: 100%;
  margin: 0;
}

body {
  background-color: black;
}

#container {
  min-height: 100%;
  background-color: transparent;
}

.hcenter-box {
  background: transparent;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

.vcenter-box {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

.media-box {
  display: table;
  margin: 25px;
  width: 300px;
  height: 300px;
  position: relative;
  display: inline-block;
  overflow: visible;
}

.media-svg{
  position: absolute;
  max-height:100%;
  display:block;
  min-width:100%;

  text-align: center;
  display: table-cell;
  vertical-align: middle;

  -webkit-transition: all .5s ease; /* Safari and Chrome */
  -moz-transition: all .5s ease; /* Firefox */
  -ms-transition: all .5s ease; /* IE 9 */
  -o-transition: all .5s ease; /* Opera */
  transition: all .5s ease;
}

.media-svg:hover {
  -webkit-transform:scale(1.1); /* Safari and Chrome */
  -moz-transform:scale(1.25); /* Firefox */
  -ms-transform:scale(1.25); /* IE 9 */
  -o-transform:scale(1.25); /* Opera */
  transform:scale(1.1);
}