.icon,
.icon-lg {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  background-origin: content-box;
}

.icon-lg{
  width: 40px;
  height: 40px;
}

/*   I C O N   I M A G E S   */

.icon-all-groups {
  background-image: url("all-groups.svg");
}

.icon-python {
  background-image: url("python.svg");
}

.icon-android {
  background-image: url("android.svg");
}

.icon-ml {
  background-image: url("ml.svg");
}

.icon-django {
  background-image: url("django.svg");
}

.icon-arduino {
  background-image: url("arduino.svg");
}

.icon-java {
  background-image: url("java.svg");
}

.icon-javascript {
  background-image: url("javascript.svg");
}

/*  */

.icon-website {
  background-image: url("website.svg");
}

.icon-doc {
  background-image: url("doc.svg");
}

.icon-github {
  background-image: url("github.svg");
}

.icon-linkedin {
  background-image: url("linkedin.svg");
}

.icon-download {
  background-image: url("download.svg");
}


/* MEDIA QUERIES */


@media screen and (min-width:950px) {
  .icon {
    width: 22px;
    height: 22px;
  }
}

@media screen and (min-width:600px) and (max-width:950px) {
  .icon {
    width: 20px;
    height: 20px;
  }
}

@media screen and (max-width: 600px) {
  .icon {
    width: 20px;
    height: 20px;
  }
}