﻿/* --- Graphic --- */

.graphic 	{	}

.graphic > figure 					{	display: block; width: 100.0%; margin-top: 3.00vw; }
.graphic > figure > .donut			{	position: relative; width: 50.00%; min-width: 240px; aspect-ratio: 1 / 1; margin: 0 auto; }
.graphic > figure > figcaption		{	position: relative; width: 72.00%; min-width: 240px; margin: 1.00em auto; }
.graphic > figure > img				{	position: relative;	width: calc(100.0% - 6.00vw - 2.00em);	min-width: 240px;	height: auto;	margin: 0 auto;	box-shadow: 0 0 0 1em white; }

	.graphic > figure > .donut > div					{	position: absolute; aspect-ratio: 1 / 1; border-radius: 100.0%; display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; background-color: white; }
	.graphic > figure > .donut > div					{	z-index: 2; top:  0.00%; left:  0.00%; width: 100.0%; box-shadow: 0  2.00em 2.00em 0.50em rgba(000,000,000,0.050); }
	.graphic > figure > .donut > div + div				{	z-index: 3; top:  5.00%; left:  5.00%; width: 90.00%; box-shadow: inset 0 -2.00em 2.00em 0.50em rgba(000,000,000,0.050); }
	.graphic > figure > .donut > div + div + div		{	z-index: 4; top: 25.00%; left: 25.00%; width: 50.00%; box-shadow: 0  0.50em 0.50em 0.25em rgba(000,000,000,0.050);}
	.graphic > figure > .donut > div + div + div:before	{	margin-bottom: 2.50%; }

		.graphic > figure > #donut-1 > div:nth-child(2)	{	background-image: conic-gradient(rgba(204,204,206,0.50) 0 65.00%, rgba(040,040,040,0.75) 0 100.0%); }
		.graphic > figure > #donut-2 > div:nth-child(2)	{	background-image: conic-gradient(rgba(204,204,206,0.50) 0 95.00%, rgba(040,040,040,0.75) 0 100.0%); }
		.graphic > figure > #donut-3 > div:nth-child(2)	{	background-image: conic-gradient(rgba(204,204,206,0.50) 0 70.00%, rgba(040,040,040,0.75) 0 100.0%); }

		.graphic > figure > #donut-1 > div + div + div:before	{	content: '35%'; }
		.graphic > figure > #donut-2 > div + div + div:before	{	content: '+5%'; }
		.graphic > figure > #donut-3 > div + div + div:before	{	content: '30%'; color: #e60001; }

/*	=================================
		END
	================================= */
