/**
 * Social Media Icons Styling
 * Example CSS file 
 **/
/* Resets default styling */
.social-media-icons {
    z-index: 2; text-align: center;
    list-style: none;
    margin: 0px; padding: 0px;
}

/* Displays the list-items in a row */
.social-media-icons li {
    display: inline-block; padding-left: 5px;
}

/* Set up the social media icons and enable transitioning for a smooth hovering effect */
.social-media-icons a {
    
}

.social-media-icons a:hover {
    background-position-y: 2px; /* Bonus image movement, no support by Firefox and Opera. Requires images with similar y position. */
    filter: alpha(opacity=80); /* Fallback for older versions of IE */
    opacity: 0.8;
}

/* Move the background to the right position for each social network */
.facebook {
     background-image: url(../image/icons/social-media-icon-f-h.png);
   /* background-image: url(../img/social-icons.svg), none; /* IE8 does not support multiple backgrounds (even when it is empty), so reverts to the former rule with the .png */
    background-repeat: no-repeat;
    display: block;
    height: 25px;
    transition: all 350ms ease-out;
    -webkit-transition: all 350ms ease-out;
    -o-transition: all 350ms ease-out;
    width: 18px;
}

.whatsapp {
    background-image: url(../image/icons/social-media-icon-w-h.png);
   /* background-image: url(../img/social-icons.svg), none; /* IE8 does not support multiple backgrounds (even when it is empty), so reverts to the former rule with the .png */
    background-repeat: no-repeat;
    display: block;
    height: 25px;
    transition: all 350ms ease-out;
    -webkit-transition: all 350ms ease-out;
    -o-transition: all 350ms ease-out;
    width: 18px;
}

.linkedin {
    background-image: url(../image/icons/social-media-icon-l-h.png);
   /* background-image: url(../img/social-icons.svg), none; /* IE8 does not support multiple backgrounds (even when it is empty), so reverts to the former rule with the .png */
    background-repeat: no-repeat;
    display: block;
    height: 25px;
    transition: all 350ms ease-out;
    -webkit-transition: all 350ms ease-out;
    -o-transition: all 350ms ease-out;
    width: 18px;
}

.messanger {
    background-image: url(../image/icons/social-media-icon-m-h.png);
   /* background-image: url(../img/social-icons.svg), none; /* IE8 does not support multiple backgrounds (even when it is empty), so reverts to the former rule with the .png */
    background-repeat: no-repeat;
    display: block;
    height: 25px;
    transition: all 350ms ease-out;
    -webkit-transition: all 350ms ease-out;
    -o-transition: all 350ms ease-out;
    width: 18px;
  }

.skype {
    background-image: url(../image/icons/social-media-icon-s-h.png);
   /* background-image: url(../img/social-icons.svg), none; /* IE8 does not support multiple backgrounds (even when it is empty), so reverts to the former rule with the .png */
    background-repeat: no-repeat;
    display: block;
    height: 25px;
    transition: all 350ms ease-out;
    -webkit-transition: all 350ms ease-out;
    -o-transition: all 350ms ease-out;
    width: 18px;
}
.instagram {
  background-image: url(../image/icons/social-media-icon-i-h.png);
   /* background-image: url(../img/social-icons.svg), none; /* IE8 does not support multiple backgrounds (even when it is empty), so reverts to the former rule with the .png */
    background-repeat: no-repeat;
    display: block;
    height: 25px;
    transition: all 350ms ease-out;
    -webkit-transition: all 350ms ease-out;
    -o-transition: all 350ms ease-out;
    width: 18px;
}



/* Move the background to the right position for each social network */
.facebook:hover {
     background-image: url(../image/icons/social-media-icon-f.png);
   /* background-image: url(../img/social-icons.svg), none; /* IE8 does not support multiple backgrounds (even when it is empty), so reverts to the former rule with the .png */
    background-repeat: no-repeat;
    display: block;
    height: 25px;
    transition: all 350ms ease-out;
    -webkit-transition: all 350ms ease-out;
    -o-transition: all 350ms ease-out;
    width: 18px;
}

.whatsapp:hover {
    background-image: url(../image/icons/social-media-icon-w.png);
   /* background-image: url(../img/social-icons.svg), none; /* IE8 does not support multiple backgrounds (even when it is empty), so reverts to the former rule with the .png */
    background-repeat: no-repeat;
    display: block;
    height: 25px;
    transition: all 350ms ease-out;
    -webkit-transition: all 350ms ease-out;
    -o-transition: all 350ms ease-out;
    width: 18px;
}

.linkedin:hover {
    background-image: url(../image/icons/social-media-icon-l.png);
   /* background-image: url(../img/social-icons.svg), none; /* IE8 does not support multiple backgrounds (even when it is empty), so reverts to the former rule with the .png */
    background-repeat: no-repeat;
    display: block;
    height: 25px;
    transition: all 350ms ease-out;
    -webkit-transition: all 350ms ease-out;
    -o-transition: all 350ms ease-out;
    width: 18px;
}

.messanger:hover {
    background-image: url(../image/icons/social-media-icon-m.png);
   /* background-image: url(../img/social-icons.svg), none; /* IE8 does not support multiple backgrounds (even when it is empty), so reverts to the former rule with the .png */
    background-repeat: no-repeat;
    display: block;
    height: 25px;
    transition: all 350ms ease-out;
    -webkit-transition: all 350ms ease-out;
    -o-transition: all 350ms ease-out;
    width: 18px;
  }

.skype:hover {
    background-image: url(../image/icons/social-media-icon-s.png);
   /* background-image: url(../img/social-icons.svg), none; /* IE8 does not support multiple backgrounds (even when it is empty), so reverts to the former rule with the .png */
    background-repeat: no-repeat;
    display: block;
    height: 25px;
    transition: all 350ms ease-out;
    -webkit-transition: all 350ms ease-out;
    -o-transition: all 350ms ease-out;
    width: 18px;
}
.instagram:hover {
  background-image: url(../image/icons/social-media-icon-i.png);
   /* background-image: url(../img/social-icons.svg), none; /* IE8 does not support multiple backgrounds (even when it is empty), so reverts to the former rule with the .png */
    background-repeat: no-repeat;
    display: block;
    height: 25px;
    transition: all 350ms ease-out;
    -webkit-transition: all 350ms ease-out;
    -o-transition: all 350ms ease-out;
    width: 18px;
}