/* # MetaEffects v0.0.1 n.1 1402-01-01 12:14 */
/* polygon{2,12} */
.effect{display:inline-flex;}
.effect img{transition:clip-path 0.5s;
	-webkit-clip-path: polygon(50% 50%, 100% 0%, 100% 25%, 0% 25%, 0% 50%, 100% 50%, 100% 75%, 0% 75%, 0% 100%, 100% 100%, 100% 0%, 75% 0%, 75% 100%, 50% 100%, 50% 0%, 25% 0%, 25% 100%, 0% 100%);
	clip-path: polygon(50% 50%, 100% 0%, 100% 25%, 0% 25%, 0% 50%, 100% 50%, 100% 75%, 0% 75%, 0% 100%, 100% 100%, 100% 0%, 75% 0%, 75% 100%, 50% 100%, 50% 0%, 25% 0%, 25% 100%, 0% 100%);
}
.effect:hover img{
	-webkit-clip-path: polygon(100% 100%, 100% 0%, 100% 25%, 0% 25%, 0% 50%, 100% 50%, 100% 75%, 0% 75%, 0% 0%, 100% 100%, 100% 0%, 75% 0%, 75% 100%, 50% 100%, 50% 0%, 25% 0%, 25% 100%, 0% 0%);
	clip-path: polygon(100% 100%, 100% 0%, 100% 25%, 0% 25%, 0% 50%, 100% 50%, 100% 75%, 0% 75%, 0% 0%, 100% 100%, 100% 0%, 75% 0%, 75% 100%, 50% 100%, 50% 0%, 25% 0%, 25% 100%, 0% 0%);
}


/* Color Effects ---------------------------------------- */
.effect-color{}
.effect-color img{transition:0.5s;-webkit-filter:grayscale(100%);filter:grayscale(100%);}
.effect-color img:hover{-webkit-filter:grayscale(0%);filter:grayscale(0%);}

.effect-color1{}
.effect-color1 img{transition:0.5s;}
.effect-color1 img:hover{-webkit-filter:grayscale(100%);filter:grayscale(100%);}


/* Scale Effects ---------------------------------------- */
.effect-scale{}
.effect-scale img{transition:0.5s;}
.effect-scale img:hover{transform:scale(0.95);}

.effect-scale1{}
.effect-scale1 img{transition:0.5s;transform:scale(0.95);}
.effect-scale1 img:hover{transform:scale(1);}


/* Rotate Effects ---------------------------------------- */
.effect-rotate{}
.effect-rotate img{transition:0.5s;} .effect-rotate img:hover{transform:rotate(360deg)}

.effect-rotate1{}
.effect-rotate1 img{transition:0.5s;} .effect-rotate1 img:hover{transform:rotate(-360deg)}



/* Other */

.effect-x1{}
.effect-x1 img{transition:1s;
	-webkit-mask:linear-gradient(135deg,rgba(0,0,0,1) 49.8%,rgba(255,255,255,0) 50%,rgba(0,0,0,1) 50.2%) 100% 100% / 250% 250%;
	mask:linear-gradient(135deg,rgba(0,0,0,1) 48%,rgba(255,255,255,0.1) 50%,rgba(0,0,0,1) 52%) 100% 100% / 300% 300%;
	-webkit-filter:grayscale(0%);filter:grayscale(0%);
}
.effect-x1 img:hover{
	-webkit-mask-position:0% 0%; mask-position:0% 0%;
	-webkit-filter:grayscale(100%);filter:grayscale(100%);}