/* https://css-tricks.com/building-a-starburst-with-css/ */

.starburst{
	display: none;
}

@media screen and (min-width: 981px){
	.starburst,
	.starburst:before,
	.starburst:after,
	.starburst .text,
	.starburst .text:before,
	.starburst .text:after{
		--starburst: 2.75em;
		height: var(--starburst);
		width: var(--starburst);
		background-color: #007f6e;
	}

	.starburst:before,
	.starburst:after,
	.starburst .text:before,
	.starburst .text:after{
		content: "";
		position: absolute;
	}

	.starburst{
		display: block;
		position: absolute; 
		top: 0;
		left: -4em;
		transform: rotate(-45deg);
	}

	.starburst:before{
		top: 0;
		left: 0;
		transform: rotate(-30deg);
	}

	.starburst:after{
		top: 0;
		left: 0;
		transform: rotate(-15deg);
	}

	.starburst .text{
		height: var(--starburst);
		position: absolute;
		bottom: 0;
		right: 0;
		transform: rotate(45deg);
		z-index: 1; 
	}

	.starburst .text:before{
		top: 0;
		left: 0;
		transform: rotate(60deg);
	}

	.starburst .text:after{
		top: 0;
		left: 0;
		transform: rotate(75deg);
	}
		
	.starburst .text span{
		position: relative;
		z-index: 100;
		display: block;
		text-align: center;
		color: #ddd;
	}

	.starburst .text span.number{
		font-weight: bold;
		line-height: var(--starburst);
		color: #fff;
		text-transform: uppercase;
	}
}