/* ////////////////////////////// */
      /* SWAP IMAGE SOCIAL MEDIA ICONS */
      /* ////////////////////////////// */

      #social-icons {
        position: relative;
        margin: 20px;
        height: 60px;
        width: 120px;
      }

      .fb img {
        width: 30px;
        top: 10px;
        left: 0px;
        position: absolute;
        overflow: hidden;
      }

      .ig img {
        width: 30px;
        top: 10px;
        left: 40px;
        position: absolute;
        overflow: hidden;
      }

      .yt img {
        width: 30px;
        top: 10px;
        left: 80px;
        position: absolute;
        overflow: hidden;
      }

      /* We set z-index to be higher than the back image, so it's alwyas on the front. We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. */

      .front_hover_img {
        z-index: 9999;
        transition: opacity 0.3s linear;
        cursor: pointer;
      }

      /* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */

      .fb:hover a .front_hover_img,
      .ig:hover a .front_hover_img,
      .yt:hover a .front_hover_img {
        opacity: 0;
      }