.metrics {
	padding: 7rem 0 8.6rem;
}

.metrics .container {
	max-width: 140rem;
}

.metrics .metrics__wrapper__inner {
	display: flex;
  	justify-content: space-between;
}

.metrics .subtitle {
	margin-bottom: 2.8rem;
  	text-align: center;
	color: var(--orange);
}

.metrics h3 {
	margin-bottom: 4.8rem;
  	text-align: center;
}

.metrics .metrics__left {
	padding: 4.5rem 0;
}

.metrics .metrics__left__wrapper {
	display: flex;
	flex-direction: column;
  	justify-content: space-between;
  	height: 100%;
}

.metrics .metrics__left__wrapper h2 {
	color: var(--green);
  	font-size: 6.3rem;
  	font-weight: 700;
  	line-height: 1;
	margin-bottom: 1rem;
}

.metrics .metrics__left__wrapper__item {
	margin-bottom: 2.8rem;
}

.metrics .metrics__right__wrapper__bottom p {
	font-size: 1.6rem;
  	font-weight: 400;
  	line-height: 1.4;
  	margin-bottom: 0;
}

.metrics .metrics__right__wrapper__bottom p:first-child {
	display: none;
}

.metrics .metrics__right {
	padding: 4.5rem 0;
}

.metrics .metrics__right__wrapper {
	display: flex;
  	flex-direction: column;
  	justify-content: space-between;
  	height: 100%;
}
.metrics .metrics__right__wrapper__items h5 {
	font-size: 1.6rem;
  	font-weight: 700;
  	line-height: 1.4;
  	color: var(--blue);
  	margin-bottom: 2.3rem;
  	text-align: end;
}

.metrics .metrics__list {
	display: flex;
  	justify-content: flex-end;
  	font-size: 1.6rem;
  	font-weight: 400;
  	line-height: 1.4;
  	color: var(--title);
}

.metrics .metrics__list li {
	margin-bottom: 0.6rem;
}

.metrics .metrics__list__month {
	list-style-type: none;
  	text-align: end;
  	margin-right: 1.2rem;
}

.metrics__list__number {
	text-align: end;
  	list-style-type: none;
}

.metrics .metrics__list__month li span {
	display: none;
}

.metrics .metrics__left__wrapper__bottom {
	display: flex;
  	flex-direction: column;
  	text-align: left;
}	

.metrics__right__wrapper__bottom {
	text-align: right;
}

.metrics .metrics__left__wrapper__bottom p {
	font-size: 1.6rem;
  	font-weight: 400;
  	line-height: 1.4;
  	margin-bottom: 0;
}

.metrics .metrics__left__wrapper__bottom .link__orange {
	margin-bottom: 0.6rem;
}

.metrics .counter__mob {
	display: none;
}

.metrics__charts_center {
	width: 45%;
  	margin-right: 60px;
}

.metrics__charts_circle {
	position: absolute;
  	left: 0;
  	top: 0;
  	z-index: 1;
}

.metrics__left__subtitle {
	position: relative;
  	opacity: 0;
  	left: 10%;
  	position: relative;
  	transition: all 1s ease 0s;
  	z-index: 2;
}

.metrics.sub-metrics .metrics__left__subtitle {
	opacity: 1;
  	left: 0;
  	transition: none;
}

.metrics__section .metrics .metrics__right {
	transition: 0 !important;
  	opacity: 1 !important;
  	left: 0 !important;
}

.metrics .metrics__right {
	opacity: 0;
  	left: 10%;
  	position: relative;
  	transition: all 1s ease 0s;
}

.metrics.show .metrics__left__subtitle {
	opacity: 1;
  	left: 0;
}

.metrics.show .metrics__right {
	opacity: 1;
  	left: 0;
}

.metrics__charts {
	position: relative;
}

.metrics__charts .metrics__charts__inner .metrics__charts__inner__box {
	position: absolute;
  	width: 80%;
  	left: 50%;
  	transform: translateX(-50%);
  	height: 100%;
  	text-align: center;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	flex-direction: column;
  	z-index: 3;
}

.metrics__charts .metrics__charts__inner h3 {
	font-size: 2.4rem;
  	font-weight: 700;
  	line-height: 0.9;
  	margin-bottom: 0.4rem;
	margin-top: 0;
}

.metrics__charts .metrics__charts__inner p {
	font-size: 1.4rem;
  	font-weight: 400;
  	line-height: 1.2;
  	margin: 1rem 0 0;
}

.metrics__charts .metrics__charts__inner p span {
	font-weight: 700;
  	color: var(--blue);
}

.metrics__charts .metrics__charts__inner {
	background-image: url("../img/charts-inner.svg");
  	background-repeat: no-repeat;
  	background-position: center center;
  	background-size: contain;
  	position: absolute;
  	top: 48%;
  	width: 39.34%;
  	height: 38.52%;
  	left: 50%;
  	transform: translate(-50%, -50%);
}

.metrics__charts .metrics__charts__title__box {
	position: absolute;
  	left: 0;
  	top: 0;
  	width: 100%;
  	height: 100%;
  	text-align: center;
}

.metrics__charts .charts__title1 {
	top: 9%;
  	left: 50%;
  	transform: translatex(-50%);
}

.metrics__charts .charts__title2 {
	top: 35.1%;
  	right: 9.34%;
}

.metrics__charts .charts__title3 {
	top: 73.94%;
  	right: 20.98%;
}

.metrics__charts .charts__title4 {
	left: 20.98%;
  	top: 73.94%;
}

.metrics__charts .charts__title5 {
	top: 35.1%;
  	left: 9.02%;
}

.metrics__charts .metrics__charts__title {
	position: absolute;
  	z-index: 20;
  	cursor: default;
}

.metrics__charts .metrics__charts__title h4 {
	font-size: 2.8rem;
  	font-weight: 700;
  	line-height: 1.1;
  	color: var(--white);
	margin: 0;
}

.metrics__charts .metrics__charts__title p {
	font-size: 1.1rem;
  	font-weight: 400;
  	line-height: 1;
  	color: var(--white);
  	margin-bottom: 0;
}

.metrics__charts .palette {
	--g: 2.5%;
  	--s: 15.7rem;
  	max-width: 100%;
  	width: 100%;
  	height: 100%;
  	padding-top: 100%;
  	position: relative;
  	display: inline-block;
  	overflow: hidden;
}	

.metrics__charts .palette > * {
	position: absolute;
  	top: 0;
  	left: 0;
  	right: 0;
  	bottom: 0;
  	transform: rotate(-36deg);
  	border: var(--s) solid var(--c, #f26122);
  	border-radius: 50%;
  	clip-path: polygon(
    	calc(50% + var(--g) / 2) 50%,
    	calc(50% + var(--g) / 2) 0%,
    	100% 0%,
    	100% calc(33.745% - var(--g) / 2),
    	50% calc(50% - var(--g) / 2)
  	);
	transition: all 0.3s ease 0s;
}

.metrics__charts .palette > *:hover,
.metrics__charts .palette > *.active {
	--c: #002b54;
}

.metrics__charts .color-inner {
	transition: all 0.3s ease 0s;
}

.metrics__charts .color-inner.active {
	fill: #002b54;
}

.metrics__charts .color1 {
	transform: rotate(36deg);
  	--c: #54b948;
  	transition: all 0.3s ease 0s;
}

.metrics__charts .color1:hover {
	--c: #002b54;
}

.metrics__charts .color2 {
	transform: rotate(108deg);
  	--c: #01a1dd;
  	transition: all 0.3s ease 0s;
}

.metrics__charts .color2:hover {
  --c: #002b54;
}

.metrics__charts .color3 {
	transform: rotate(-108deg);
  	--c: #0d76bd;
  	transition: all 0.3s ease 0s;
}

.metrics__charts .color3:hover {
	--c: #002b54;
}

.metrics__charts .color4 {
	transform: rotate(-180deg);
  	--c: #faa634;
  	transition: all 0.3s ease 0s;
}

.metrics__charts .color4:hover {
	--c: #002b54;
}

.c-counter {
	display: inline-flex;
	align-items: flex-start; 
}

.c-counter-divider {
    opacity: 0;
    transition: all 1s ease 0s; 
}

.c-counter-column {
	display: inline-block;
    overflow: hidden;
    opacity: 0;
    transition: all 1s ease 0s;
    letter-spacing: -0.4rem;
	width: 46px; 
	margin: 0;
}
    
.c-counter-column-inner {
	display: inline-flex;
 	flex-direction: column;
	align-items: center; 
}

.c-counter.done .c-counter-column, 
.c-counter.done .c-counter-divider {
	opacity: 1; 
}

/* -------------------------------------- Responsive ------------------------------------------ */

@media only screen and (max-width: 1099px) {
	.metrics__charts .palette {
    	--s: 13.7rem;
  	}
}

@media only screen and (max-width: 1199px) {
	.metrics .metrics__right {
    	opacity: 1;
    	left: 0;
  	}
	.metrics__left__subtitle {
    	opacity: 1;
    	left: 0%;
  	}
	.metrics .metrics__left__wrapper h2 {
    	display: none;
  	}
	.metrics .metrics__left__wrapper .counter__mob {
    	display: block;
  	}
	.metrics__charts .palette {
    	--s: 14.7rem;
  	}
	.metrics__charts .metrics__charts__inner h3 {
    	font-size: 2rem;
    	line-height: 1.3;
  	}
	.metrics__charts .metrics__charts__inner p {
    	display: none;
  	}
}

@media only screen and (max-width: 1023px) {
		.metrics__right__wrapper__bottom {
    	text-align: center;
    	display: flex;
    	flex-direction: column;
  	}
	.metrics .metrics__left__wrapper__bottom {
    	align-items: center;
  	}
	.metrics .metrics__right__wrapper__bottom a {
    	order: 2;
  	}
	.metrics .metrics__right__wrapper__bottom .metrics__right__bottom__text {
    	order: 1;
  	}
	.metrics .metrics__right__wrapper__items h5 {
    	text-align: center;
  	}
	.metrics .metrics__left__wrapper {
    	text-align: center;
  	}
	.metrics .metrics__right__wrapper {
    	justify-content: center;
  	}
	.metrics .metrics__list__month {
    	text-align: center;
    	margin-right: 0;
    	width: 100%;
  	}
	.metrics .metrics__list__month li span {
    	display: inline-block;
    	margin-left: 1rem;
  	}
	.metrics .metrics__list .metrics__list__number {
    	display: none;
  	}
	.metrics__charts .palette {
    	--s: 15.7rem;
    	max-width: 100%;
    	width: 100%;
    	height: 100%;
    	padding-top: 100%;
  	}
	.metrics__charts .metrics__charts__inner {
    	top: 48%;
  	}
	.metrics .metrics__charts_center {
    	max-width: 61rem;
    	width: 100%;
  	}
	.metrics .metrics__wrapper__inner {
    	flex-direction: column;
    	align-items: center;
  	}
}

@media (max-height: 499px) and (max-width: 899px), (max-width: 767px) {
	.metrics .metrics__left__wrapper__item {
    	margin-bottom: 0.6rem;
  	}
	.metrics .metrics__left__wrapper h2 {
    	font-size: 4rem;
  	}
	.metrics .metrics__left__wrapper {
    	font-size: 1.3rem;
  	}
	.metrics .metrics__right__wrapper__bottom p:first-child {
    	display: block;
  	}
	.metrics .metrics__list__month {
    	margin-bottom: 3rem;
    	padding: 0;
  	}
	.metrics .metrics__left__wrapper__bottom {
    	display: none;
  	}
	.metrics .metrics__right {
    	padding: 3rem 0 0;
  	}
	.metrics .subtitle {
    	margin-bottom: 2rem;
  	}
	.metrics h3 {
    	margin-bottom: 2.8rem;
  	}
	.metrics .metrics__left {
    	padding: 0 0 3.2rem 0;
  	}
	.metrics {
    	padding: 4rem 0;
  	}
}

@media only screen and (max-width: 640px) {
	.metrics__charts .metrics__charts__title {
    	max-width: 9rem;
  	}
	.metrics__charts .metrics__charts__title h4 {
    	font-size: 1.3rem;
  	}
	.metrics .metrics__charts_center {
    	max-width: 50rem;
    	width: 100%;
  	}
	.metrics__charts .palette {
    	--s: 12.7rem;
  	}
}

@media only screen and (max-width: 540px) {
	.metrics .metrics__charts_center {
    	max-width: 40rem;
    	width: 100%;
    	margin: 0;
  	}
	.metrics__charts .palette {
    	--s: 10.7rem;
  	}
	.metrics__charts .charts__title3 {
    	top: 70.94%;
    	right: 18.98%;
  	}
	.metrics__charts .charts__title4 {
    	left: 17.98%;
    	top: 70.94%;
  	}
	.metrics__charts .charts__title5 {
    	top: 33.1%;
    	left: 8.02%;
  	}
	.metrics__charts .charts__title2 {
    	top: 33.1%;
    	right: 7.34%;
  	}
}

@media only screen and (max-width: 450px) {
	.metrics .metrics__charts {
    	max-width: 40rem;
    	width: 100%;
  	}
	.metrics__charts .palette {
    	--s: 9.7rem;
  	}
}

@media only screen and (max-width: 420px) {
	.metrics .metrics__charts {
    	max-width: 40rem;
    	width: 100%;
  	}
	.metrics__charts .palette {
    	--s: 9rem;
  	}
	.metrics__charts .charts__title5 {
    	top: 33.1%;
    	left: 5.02%;
  	}
	.metrics__charts .charts__title4 {
    	left: 14.98%;
    	top: 70.94%;
  	}
	.metrics__charts .charts__title3 {
    	top: 70.94%;
    	right: 15.98%;
  	}
	.metrics__charts .charts__title2 {
    	top: 33.1%;
    	right: 5.34%;
  	}
	.metrics__charts .metrics__charts__inner {
    	top: 47%;
  	}
}

@media only screen and (max-width: 399px) {
	.metrics__charts .palette {
    	--s: 8rem;
  	}
	.metrics__charts .metrics__charts__inner h3 {
    	font-size: 1.6rem;
    	line-height: 1.3;
  	}
}