@charset "UTF-8";
/* CSS Document */



@font-face{
	font-family: bigJohn;
	src: url("BIGJOHN.otf");
}	

.header{
	height: 14rem;
}

.container{
	width: 100%;
	height: 100%;
}


#imagetest{
	position: absolute;
	z-index: 1;
	top: 18rem;
	left: 25%;
	height: 280px;
	width: 280px;
	background-color:turquoise;	
	-webkit-clip-path: polygon(23% 0, 75% 13%, 93% 90%, 0 100%);
	clip-path: polygon(23% 0, 75% 13%, 93% 90%, 0 100%);
	mix-blend-mode: saturation;

}

#imagetest2{
	position: absolute;
	z-index: 0;
	top: 30rem;
	left: 24rem;
	height: 280px;
	width: 280px;
	background-color:turquoise;	
	-webkit-clip-path: polygon(14% 15%, 64% 0, 100% 26%, 0 100%);
	clip-path: polygon(14% 15%, 64% 0, 100% 26%, 0 100%);
	mix-blend-mode: color-dodge;
	-webkit-transition: all 1s linear;
	-moz-transition: all 1s linear;
	-ms-transition: all 1s linear;
	-o-transition: all 1s linear;
	transition: all 1s linear;

}

#imagetest2.in{
	top: 50rem;
	-webkit-clip-path: polygon(10% 15%, 74% 0, 100% 26%, 0 100%);
	clip-path: polygon(10% 15%, 74% 0, 100% 26%, 0 100%);
	
}