@font-face {
  font-family: "fontawesome";
  src: url("/font-awesome/webfonts/fa-solid-900.eot");
  src: url("/font-awesome/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("/font-awesome/webfonts/fa-solid-900.woff") format("woff"), url("/font-awesome/webfonts/fa-solid-900.ttf") format("truetype"), url("/font-awesome/webfonts/fa-solid-900.svg#micon") format("svg");
}
#content-outer {
  width: 100%;
}
.links {
  color: #fff;
  width: 80%;
  margin: 100px auto 0;
}
@media (min-width: 1200px) {
  .links {
    width: 85%;
  }
}
@media (min-width: 920px) {
  .links {
    width: 65%;
  }
}
.links h2 {
  font-size: 1.8em;
}
.links h3 {
  font-size: 1.2em;
}
.group-items {
  padding: 0;
  margin-bottom: 50px;
  width: 100%;
}
.item-friend {
  list-style-type: none;
  display: inline-block;
  margin: 10px auto;
  width: 100%;
  flex: 1 0 18.75em;
  margin: 0 0 1.875rem;
  border-radius: 10px;
  background-color: #000;
  color: #fff;
  border: #d3d3d3 solid 2px;
}
@media (min-width: 37.5rem) {
  .item-friend {
    margin: 0 0.9375em 15px;
  }
}
@media (min-width: calc((2 * 0.625em) + (2 * 18.75em))) {
  .item-friend {
    max-width: calc(100%/2 - 1.5em*2);
  }
}
@media (min-width: calc((2 * 0.625em) + (3 * 18.75em))) {
  .item-friend {
    max-width: calc(100%/3 - 1.5em*2);
  }
}
@media (min-width: calc(2 * 0.625em + 3 * $s)) {
  .item-friend {
    flex: 1 0 calc(100%/3 - 0.9375em*2);
  }
}
.links .site-preview {
  text-align: center;
  width: 70px;
  float: left;
  border-radius: 80px;
  margin: 15px;
  border: solid #d3d3d3 2px;
  transform-origin: center;
  transition: 0.5s;
}
.links .site-preview:hover {
  transform: rotate(360deg);
}
.links .link-title {
  border-bottom: solid 1px #323232;
  padding-bottom: 20px;
  font-size: 30px;
  line-height: 30px;
}
.links .group-description {
  margin: 30px 1%;
}
.links .site-name {
  margin: 20px 10px 10px 110px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.2em;
  line-height: 24px;
}
.links .site-description {
  margin-left: 110px;
  margin-right: 7%;
  padding: 10px;
  padding-left: 0;
  border-top: dashed #646464 1px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.clearfix::before {
  content: "";
  display: block;
  clear: both;
}
.links a {
  color: #fff;
  text-decoration: none;
}
#vcomment {
  clear: both;
}