
img {
  max-width: 100%;
}

.img-thumbnail {
  padding: 0.25rem;
  border-color: lighten($color-divider, 3%);
  border-radius: 3px;
}

.img-shadow {
  box-shadow: 0 0 25px 5px rgba(0,0,0,0.2);
}

.img-outside-right {
  overflow: hidden;

  img {
    width: 100%;
    transform: translateX(15%);
  }
}



// Avatar
// 
.avatar {
  border-radius: 10rem;
  width: 48px;
  height: 48px;
}

.avatar-xs {
  width: 34px;
  height: 34px;
}

.avatar-sm {
  width: 40px;
  height: 40px;
}

.avatar-lg {
  width: 56px;
  height: 56px;
}

.avatar-xl {
  width: 64px;
  height: 64px;
}



.img-fadein {
  opacity: .75;
  transition: .5s;

  &:hover {
    opacity: 1;
  }
}