.mgznkr-reveal {

}

@media screen {
	
.reveal-fade-move {
	opacity:0;
	transform: scale(0.92) translateY(2em);
} 

.reveal-fade {
	opacity:0;
} 

.reveal-zoom-rotate {
	transform: scale(0.1) rotate(20deg); 
	transform-origin: 50% 50%;
}

.reveal-zoom-rotate:nth-of-type(2n) {
	transform: scale(0.1) rotate(-20deg);
} 

.mgznkr-reveal.reveal-end,
.mgznkr-reveal.reveal-end.reveal-clip-right-img-wrapper .img-wrapper,
.mgznkr-reveal.reveal-end.reveal-clip-left-img-wrapper .img-wrapper    {
	transition-property: all; 
	transition-duration:0.6s; 
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transform: scale(1) rotate(0deg) translateX(0) translateY(0); 
	opacity: 1;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.mgznkr-reveal.reveal-clip-right.reveal-end,
.mgznkr-reveal.reveal-clip-left.reveal-end,
.mgznkr-reveal.reveal-clip-right-img-wrapper.reveal-end .img-wrapper ,
.mgznkr-reveal.reveal-clip-left-img-wrapper.reveal-end .img-wrapper  {
	transition-duration:3s; 
}


.reveal-clip-right,
.mgznkr-reveal.reveal-clip-right-img-wrapper .img-wrapper {
	clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}

.reveal-clip-left,
.mgznkr-reveal.reveal-clip-left-img-wrapper .img-wrapper {
	clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

.mgznkr-reveal.reveal-clockwise img {
	border-radius: 50%;
	opacity: 0;
	clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0);
}

.mgznkr-reveal.reveal-clockwise.reveal-end img {
	transform: none;
	opacity: 1;
	animation: reveal-clockwise-animation 2.8s 1 linear;
}

@keyframes reveal-clockwise-animation {
0% {clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 100% 100%, 100% 0%, 50% 0);}
20% {clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 100% 100%, 100% 0%, 50% 0);}
30% {clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 100% 100%, 100% 0%, 100% 0);}
50% {clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%, 100% 100%);}
50.001% {clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%, 100% 100%);}
70% {clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 100% 100%, 100% 100%, 0 100%);}
70.001% {clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%);}
90% {clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 0);}
90.001% {clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 0% 0);}
100% {clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0);}
}

}