/*
body {
	/* center the shapes in the viewport */
	/*
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	flex-wrap: wrap;
	/*background-color: #e6fbc4;*/
/*} */

.shape-holder {
	/* ADJUST SHAPE SIZE HERE */
	/* This div establishes the size of the shapes. I'm using the font-size property 
	 here so that we can easily change the size of the shapes if needed. Each shape will be
	 based on border values (which cannot be percentages),
	 therefore we are going to use em units for the borders, 
	 which inherit font size from the parent. */
	font-size: 13.66em;
	margin: .05em;
	scale: 1;
}

.shape {
    height: 3.13em;
    width:2.74em;
    background-color: rgb(255, 0, 0);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    position: relative;
	
    
	
}

.docP {
	height: 3.14em;
    width:2.75em;
	background-color: rgb(255, 255, 255);
	clip-path: polygon(50% 3%, 97% 26.5%, 97% 73.5%, 50% 97%, 3% 73.5%, 3% 26.5%);
	position: absolute;
	top: 0;
	background-image:url(1.png);	
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 2.9em;
	z-index: -1;
}
/*
.shape::after {
	content: "";
	height: 427.5px;
    width:375px;
	background-color: rgb(255, 255, 255);
	clip-path: polygon(50% 3%, 97% 26.5%, 97% 73.5%, 50% 97%, 3% 73.5%, 3% 26.5%);
	position: absolute;
	top: 0;
	background-image:url(./6.png);	
	background-repeat: no-repeat;
	background-position: center;
	background-size: 250px 300px;
	z-index: -1;
	
}
*/
.shape .slice {
	position: absolute;
	
	transform-origin: left bottom;
	left: 50%;
	
	
}


.hexagon .slice {
	
	border-bottom: 0.8em solid transparent;
	border-left: 1.385em solid;
	border-top: 0.8em solid transparent;
	top: -1%; 	
	transition-timing-function: ease-in;
	
	
	
}
/*

.hex {
	position: absolute;	
	transform-origin: left bottom;
	left: 50%;
	animation-name: autohex;
	animation-duration: 1s;
	animation-direction:alternate-reverse;
	animation-iteration-count:infinite;
}
@keyframes autohex {
	100% {border-bottom: 0.8em solid transparent;
		border-left: 1.385em solid #000;
		border-top: 0.8em solid transparent;
		top: -1%;
		
		transition-timing-function: ease-in;
		
		
		
		transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg);
		transition: transform .2s 0s;}
		
	
	80% {border-bottom: 0.8em solid transparent;
		border-left: 1.385em solid #333;
		border-top: 0.8em solid transparent;
		top: -1%;
		
		transition-timing-function: ease-in;
		
		
		transform: rotateZ(60deg) rotateY(0deg) rotateX(0deg);
		transition: transform .2s .15s;}
	60% {border-bottom: 0.8em solid transparent;
		border-left: 1.385em solid #666;
		border-top: 0.8em solid transparent;
		top: -1%;
		
		transition-timing-function: ease-in;
		
		
		transform: rotateZ(120deg) rotateY(0deg) rotateX(0deg);
		transition: transform .2s .3s;}	
	40% {border-bottom: 0.8em solid transparent;
		border-left: 1.385em solid #a1a1a1;
		border-top: 0.8em solid transparent;
		top: -1%;
		
		transition-timing-function: ease-in;
		
		
		transform: rotateZ(180deg) rotateY(0deg) rotateX(0deg);
		transition: transform .2s .45s;}
	20% {border-bottom: 0.8em solid transparent;
		border-left: 1.385em solid #b1b1b1;
		border-top: 0.8em solid transparent;
		top: -1%;
		
		transition-timing-function: ease-in;
		
		
		transform: rotateZ(240deg) rotateY(0deg) rotateX(0deg);
		transition: transform .2s .6s;}
	0% {border-bottom: 0.8em solid transparent;
		border-left: 1.385em solid #c1c1c1;
		border-top: 0.8em solid transparent;
		top: -1%;
		
		transition-timing-function: ease-in;
		
		
		transform: rotateZ(300deg) rotateY(0deg) rotateX(0deg);
		transition: transform .2s .75s;}		
	*/
	/*
	60%{.slice:nth-child(4)
		{transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
		transition: transform .3s .4s;}
	}	
	40%{.slice:nth-child(3)
		{transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
		transition: transform .3s .6s;}
	}
	20%{.slice:nth-child(2)
		{transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
		transition: transform .3s .8s;}
	}	
	0%{.slice:nth-child(1)
		{transform: rotateZ(0deg) rotateY(-90deg) rotateX(0deg);
		transition: transform .3s 1s;}
	}			
}
*/
/*
.throwing-star .slice {
	border-bottom: .1em solid transparent;
	border-left: 1.74em solid #666;
	border-top: 1em solid transparent;
	top: 22%;
	transition-timing-function: cubic-bezier(.46,.8,.08,1.44);
}
*/
/* hexagon resting state */
/* --------------------- */

.hexagon .slice:nth-child(2) {
	border-left-color: #000;
	transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg);
	transition: transform .2s 0s;
	position: absolute;
}

.hexagon .slice:nth-child(3) {
	border-left-color: #333;
	transform: rotateZ(60deg) rotateY(0deg) rotateX(0deg);
	transition: transform .2s .15s;
	position: absolute;
}

.hexagon .slice:nth-child(4) {
	border-left-color: #666;
	transform: rotateZ(120deg) rotateY(0deg) rotateX(0deg);
	transition: transform .2s .3s;
	position: absolute;
}

.hexagon .slice:nth-child(5) {
	border-left-color: #a1a1a1;
	transform: rotateZ(180deg) rotateY(0deg) rotateX(0deg);
	transition: transform .2s .45s;
	position: absolute;
}

.hexagon .slice:nth-child(6) {
	border-left-color: #b1b1b1;
	transform: rotateZ(240deg) rotateY(0deg) rotateX(0deg);
	transition: transform .2s .6s;
}

.hexagon .slice:nth-child(7) {
	border-left-color: #c1c1c1;
	transform: rotateZ(300deg) rotateY(0deg) rotateX(0deg);
	transition: transform .2s .75s;
	position: absolute;
}

/* hexagon hover state */
/* ------------------- */


.hexagon:hover .slice:nth-child(1) {
	transform: rotateZ(0deg) rotateY(-90deg) rotateX(0deg);
	transition: transform .3s 1s;
}
.hexagon:hover .slice:nth-child(2) {
	transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
	transition: transform .3s .8s;
}
.hexagon:hover .slice:nth-child(3) {
	transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
	transition: transform .3s .6s;
}
.hexagon:hover .slice:nth-child(4) {
	transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
	transition: transform .3s .4s;
}
.hexagon:hover .slice:nth-child(5) {
	transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
	transition: transform .3s .2s;
}
.hexagon:hover .slice:nth-child(6) {
	transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
	transition: transform .3s 0s;
}
 

/* throwing-star resting state */
/* --------------------------- */
/*
.throwing-star .slice:nth-child(1) {
	border-left-color: #000;
	transform: rotate(0deg) scale(1);
	transition: transform .4s 0s;
}

.throwing-star .slice:nth-child(2) {
	border-left-color: #333;
	transform: rotate(60deg) scale(1);
	transition: transform .4s .15s;
}

.throwing-star .slice:nth-child(3) {
	border-left-color: #666;
	transform: rotate(120deg) scale(1);
	transition: transform .4s .3s;
}

.throwing-star .slice:nth-child(4) {
	border-left-color: #a1a1a1;
	transform: rotate(180deg) scale(1);
	transition: transform .4s .45s;
}

.throwing-star .slice:nth-child(5) {
	border-left-color: #b1b1b1;
	transform: rotate(240deg) scale(1);
	transition: transform .4s .6s;
}

.throwing-star .slice:nth-child(6) {
	border-left-color: #c1c1c1;
	transform: rotate(300deg) scale(1);
	transition: transform .4s .75s;
}

*/
/* throwing-star hover state */
/* ------------------------- */
/*
.throwing-star:hover .slice:nth-child(1) {
	transform: rotate(-90deg) scale(0);
	transition: transform .2s .5s;
}

.throwing-star:hover .slice:nth-child(2) {
	transform: rotate(-30deg) scale(0);
	transition: transform .2s .4s;
}

.throwing-star:hover .slice:nth-child(3) {
	transform: rotate(30deg) scale(0);
	transition: transform .2s .3s;
}

.throwing-star:hover .slice:nth-child(4) {
	transform: rotate(90deg) scale(0);
	transition: transform .2s .2s;
}

.throwing-star:hover .slice:nth-child(5) {
	transform: rotate(150deg) scale(0);
	transition: transform .2s .1s;
}

.throwing-star:hover .slice:nth-child(6) {
	transform: rotate(210deg) scale(0);
	transition: transform .2s 0s;
}
*/