body {
    vertical-align: middle;
    color: #e9e9e9;
    font-family:  "Myriad Pro",  "Myriad Web",  Myriad,  Frutiger,  Calibri,  sans-serif;
    background: #111111 url(../images/bokeh.jpg) no-repeat center top;
    background-position: 50%;
    background-size:cover;
    margin: auto;
    width: 100%;
    height: 100%;
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
#content {
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 300px;
}

#content-top {
  width: 300px;
  height: 10px;
  background: url(../images/content-top-trans.png) no-repeat;
}
#content-main {
  width: 300px;
  background: #1d1d1d;
}
#content-bottom {
  width: 300px;
  height: 10px;
  background: url(../images/content-bottom-trans.png) no-repeat;
}

#social  {
  display: flex;
  align-items: center;
  text-align: center;
}

#social_inner  {
	list-style: none;
  padding: 0;
  margin: auto;
}

#social_inner li  {
	float: left;
  margin: 5px;
}

#social a img  {
	border: 0 none;
}

#social a  {
	-ms-filter:  "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter:  progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
	-moz-opacity:  0.7;
	-khtml-opacity:  0.7;
	opacity:  0.7;
	border: 0 none;
	display: block;
  transition: 0.3s;
}

#social a:hover  {
	filter:  progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	-ms-filter:  "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	-moz-opacity:  1;
	-khtml-opacity:  1;
	opacity:  1;
	border: 0 none;
  transition: 0.3s;
}

@media only screen and (max-device-width: 480px) {
  #content {
    zoom:2.1;
  }
  #social li {
   width:18px;
   margin:22px;
   margin-left:0;
  }
  #social img {
    width:200%;
  }
}

#footer {
  text-align: center;
}