/* Hover Effects */ 
/* Dependencies: FontAwesome */


	/* Pointer */
	[data-hover~="pointer"] { cursor: pointer; }


	/* Icon */
	[data-hover~="icon"] { position: relative; }
	[data-hover~="icon"]::before { /* Play icon */
		content: "\f01d";					
		content: "\f04b";
		content: "\f16a";
		font-family: FontAwesome;
		font-style: normal;
		font-weight: normal;
		text-decoration: inherit;
		color: rgba(10, 10, 10, 0.7);
		font-size: 4rem;
		position: absolute;	top: 50%; left: 50%; transform: translate(-50%, -50%); 
		transition: all .3s;
		z-index: 3;
	}
	[data-hover~="icon"]:hover::before { color: rgba(10, 10, 10, 0.6); color: #194564; color: white; }

	[data-hover~="zoom"] { position: relative; overflow: hidden; }
	[data-hover~="zoom"] > img, 
	[data-hover~="zoom"] > div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all .3s; }
	[data-hover~="zoom"]:hover > img,
	[data-hover~="zoom"]:hover > div { width: 120%; } 


	/* Mask */
	[data-hover~="mask"] { position: relative; }
	[data-hover~="mask"]::after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0); z-index: 2; transition: all .3s; }
	[data-hover~="mask"]:hover::after { background-color: rgba(0, 0, 0, 0.50); }