@charset "UTF-8";

.mg_social {
  margin: 30px 7px 0 7px;
  fill: #cfbb57; transition: fill 0.2s ease-in;

}

.mg_social:hover {
  fill: #e8db97;
}



/* [1] The container */
.img-hover-zoom {
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
  transition: transform .7s ease-in-out;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
  transform: scale(1.1);
}


.img-hover-zoom--zoom-n-rotate {
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

/* Zoom-n-rotate Container */
.img-hover-zoom--zoom-n-rotate img {
  transition: transform .7s ease-in-out;
}

/* The Transformation */
.img-hover-zoom--zoom-n-rotate:hover img {
  transform: scale(1.1) rotate(10deg);
}


.img-hover-zoom--colorize {
  overflow: hidden !important; /* [1.2] Hide the overflowing of child elements */
}

/* Colorize-zoom Container */
.img-hover-zoom--colorize img {
  transition: filter .7s ease-in-out;
  filter: grayscale(100%);
}

/* The Transformation */
.img-hover-zoom--colorize:hover img {
  filter: grayscale(0) brightness(130%);
  /*transform: scale(1.3);*/
}


.img-hover-brightness {
  overflow: hidden !important; /* [1.2] Hide the overflowing of child elements */
}

/* Colorize-zoom Container */
.img-hover-brightness img {
  transition: filter .7s ease-in-out;
}

/* The Transformation */
.img-hover-brightness:hover img {
  filter: brightness(130%);
}