/* TODO: need to print this style via PHP, make it configurable */

ul.w4hs-social-icons li.icon a:hover path,
ul.w4hs-social-icons li.icon a:hover rect,
ul.w4hs-social-icons li.icon a:hover circle
{
	/* fill: $w4hs_gray; */
	/* will need to implement via PHP with configuration panel */
	
}




ul.w4hs-social-icons
{
	display: block;
	list-style: none;
	
	margin: 0;
	padding: 14px 0 0;
	
}
	
	
ul.w4hs-social-icons:hover a:not(:hover) + svg
{
	/* If we are hovering over the whole element, style all the SVGs we're NOT hovering over */
	/* e.g. opacity: 0.5; to dim them back or something */
	/* opacity: .5; */
}
	
ul.w4hs-social-icons li.icon
{
	display: inline-block;
	
	list-style: none;
	
	position: relative;
	
	margin-bottom: 7px;
	
}
/*

ul.w4hs-social-icons li.icon.icon-facebook a:hover + svg path,
ul.w4hs-social-icons li.icon.icon-facebook a:hover + svg rect,
ul.w4hs-social-icons li.icon.icon-facebook a:hover + svg circle
{
	fill:rgb(76,104,161);
}

ul.w4hs-social-icons li.icon.icon-twitter a:hover + svg path,
ul.w4hs-social-icons li.icon.icon-twitter a:hover + svg rect,
ul.w4hs-social-icons li.icon.icon-twitter a:hover + svg circle
{
	fill:rgb(85,172,238);
}

ul.w4hs-social-icons li.icon.icon-youtube a:hover + svg path,
ul.w4hs-social-icons li.icon.icon-youtube a:hover + svg rect,
ul.w4hs-social-icons li.icon.icon-youtube a:hover + svg circle
{
	fill:rgb(230,33,23);
}

ul.w4hs-social-icons li.icon.icon-instagram a:hover + svg path,
ul.w4hs-social-icons li.icon.icon-instagram a:hover + svg rect,
ul.w4hs-social-icons li.icon.icon-instagram a:hover + svg circle
{
	fill:rgb(225,134,162);
}

ul.w4hs-social-icons li.icon.icon-pinterest a:hover + svg path,
ul.w4hs-social-icons li.icon.icon-pinterest a:hover + svg rect,
ul.w4hs-social-icons li.icon.icon-pinterest a:hover + svg circle
{
	fill:rgb(189,8,28);
}


ul.w4hs-social-icons li.icon.icon-google a:hover + svg path,
ul.w4hs-social-icons li.icon.icon-google a:hover + svg rect,
ul.w4hs-social-icons li.icon.icon-google a:hover + svg circle,
ul.w4hs-social-icons li.icon.icon-google-plus a:hover + svg path,
ul.w4hs-social-icons li.icon.icon-google-plus a:hover + svg rect,
ul.w4hs-social-icons li.icon.icon-google-plus a:hover + svg circle
{
	fill:rgb(219,68,55);
}

ul.w4hs-social-icons li.icon.icon-linkedin a:hover + svg path,
ul.w4hs-social-icons li.icon.icon-linkedin a:hover + svg rect,
ul.w4hs-social-icons li.icon.icon-linkedin a:hover + svg circle
{
	fill:rgb(31,137,190);
}

ul.w4hs-social-icons li.icon.icon-yelp a:hover + svg path,
ul.w4hs-social-icons li.icon.icon-yelp a:hover + svg rect,
ul.w4hs-social-icons li.icon.icon-yelp a:hover + svg circle 
{
	fill:rgb(194,22,19);
}

		
*/
ul.w4hs-social-icons li.icon a
{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	color: transparent;
	display: block;
	z-index: 2;
}

ul.w4hs-social-icons li.icon a span
{
	font-size: 10px;
	position: absolute;
	bottom: -15px;
	right: 0;
	left: 0;
	transition: none;
	text-align: center;
	margin-top: 20px;
	padding:2px;
	opacity: 0;
	border-radius: 5px;
	display: block;
}

ul.w4hs-social-icons li.icon a:hover span
{
	color: white;

	opacity: .6;
	transition: .3s all ease 1.5s;


}

ul.w4hs-social-icons li.icon a:nth-child(even):hover
{

	& + svg g
	{
		@include animation(rotate-floaty-backwards 10s ease-in-out infinite );


	}
}


ul.w4hs-social-icons li.icon a:hover + svg
{
	transform: scale(1.2);

	-webkit-filter: drop-shadow(0 0 8px rgba(white, .5));
	filter: drop-shadow(0 0 8px rgba(white, .5));


}




ul.w4hs-social-icons li.icon a:hover g
{
	@include animation(rotate-floaty 11.25s ease-in-out infinite );
}

ul.w4hs-social-icons li.icon a:active + svg
{
	transform: scale(1.5);
}


ul.w4hs-social-icons svg
{
	height: 30px;
	width: auto;
	transform: scale(1);
	transition: .3s all;
	padding: 0 10px;
	overflow: visible;

}

/*
		
ul.w4hs-social-icons svg path,
ul.w4hs-social-icons svg rect,
ul.w4hs-social-icons svg circle
{
	transition: .5s all;
}
*/