/* SVG Icons */
.svg-icon {position:relative;display:inline-block;transition:opacity 200ms;min-width:16px;min-height:16px;text-align:center;background-color:rgba(0,0,0,0.3);vertical-align:middle;}
.svg-icon img,.svg-icon svg {position:relative;z-index:1;width:100%;height:100%;transition:opacity ease-out 200ms, filter ease-out 200ms;display:inline-block;vertical-align:middle;}
.svg-icon:before {content:"";position:absolute;z-index:0;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity ease-out 200ms;}

/* Específicos de cada ícono */
.svg-icon{fill:#ffffff}
.svg-icon:before {background-color:#333;}
.svg-icon.googleplus:before{background-color:#dc4e41;}
.svg-icon.linkedin:before  {background-color:#0077b5;}
.svg-icon.pinterest:before {background-color:#bd081c;}
.svg-icon.facebook:before  {background-color:#495899;}
.svg-icon.twitter:before   {background-color:#6cadde;}
.svg-icon.instagram:before {background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);}
.svg-icon.whatsapp:before  {background-color:#25D366;}
.svg-icon.rss:before       {background-color:#f26522;}

:not(:hover) .svg-icon.youtube svg .tube {fill:#fff;}
:not(:hover) .svg-icon.youtube svg .play {fill:transparent;}
.svg-icon.youtube  {fill:green;}
.svg-icon.youtube svg .play {fill:transparent;}
.svg-icon.youtube:before {background-color:white;}

/* Si los íconos SVG están dentro de un link, cambian de estado en el hover y active */
a:hover .svg-icon:before {opacity:1;}
a:hover .svg-icon img, a:hover .svg-icon svg {opacity:1 !important;}