body.sites {

  &.index {
    .wrapper {
      @include locomotive_gradient;
    }
  }

  .main {
    background: transparent;

     > .row h1 {
      margin-top: 20px;
      color: $site_title_color;
    }
  }

  .sites {
    padding: 20px 0px;

    width: $site_wrapper_max_width;
    margin: 0 auto;

    .site {
      margin: 0px 10px 10px 10px;

      float: left;
      width: ($site_wrapper_max_width / 2 - 20);

      a {
        display: block;
        background: $site_background;
        text-decoration: none;

        border-radius: 5px;

        padding: 10px;

        &:hover {
          background: $site_hover_background;
        }
      }

      h2 {
        font-size: 14px;
        margin: 5px 0px 0px 0px;
      }

      .domain {
        font-size: 12px;
        color: $site_domain_color;
      }

      .img-circle {
        width: 40px;
      }

      a:hover .domain {
        color: #fff;
      }

      .arrow {
        margin-left: 15px;

        span {
          font-size: 22px;
          position: relative;
          top: 2px;

          i {
            color: $site_arrow_color;
          }
        }
      }

      &.new-site {
        a {
          background: transparent;
          border: 2px dashed rgba($site_new_color, 0.6);

          &:hover {
            border-color: $site_new_color;
          }
        }

        .media-body {
          height: 32px;
        }

        h2 {
          font-size: 14px;
          margin-top: 0px;
          line-height: 32px;
        }

        .arrow {
          span {
            i {
              color: $site_new_color;
            }
          }
        }
      }
    }

  }

}

@media (max-width: $screen-sm-min) {

  body.sites {

    h1 {
      margin-top: 20px;
    }

    .sites {
      padding: 20px;
      width: auto;

      .site {
        float: none;
        width: auto;
      }
    }

  }

}