:root {
  --font-family-main: "Roboto", sans-serif;
  --transition-time: 0.2s;
  --segment-rotate: 60deg;
  --segment-skew: 210deg;
  --segment-z-index: 10;
  --segment-transition: background-color color 0.3s;
  --segment-1-color: #c1a57c;
  --segment-2-color: #431e36;
  --segment-3-color: #ba6e80;
  --segment-4-color: #f6d2c7;
  --segment-5-color: #ffeeda;
  --segment-6-color: #f4f2f2;
  --separator-skew: 150deg;
  --accordion-transition: 0.4s;
  --panel-padding: 0 16px;
  --panel-transition: max-height 0.2s ease-out;

  /* SIZE */
  --main-component-width: 200px;
  --main-component-height: 200px;
  --circle-dimensions: 428px;
  --separator-width: 428px;
  --accordion-max-width: 500px;
  --accordion-padding: 18px;
  --accordion-font-size: 15px;
  --panel-max-width: 500px;
}

@media screen and (min-width:1152px) {
	:root {
		--panel-max-width: 900px;
		--accordion-max-width: 900px;
	}
	.ds-info-segmented {
	  display: flex !important;
	  align-items: flex-start;
	  justify-content: center;
	  width: auto !important;
	  left: 0 !important;
	  right: 0 !important;
	  margin-left: 0 !important;
	  margin-right: 0 !important;
	}

	.ds-info-segmented__column:first-child {
	 flex: 0 1 25%;
	}
	.ds-info-segmented__column:last-child {
	 flex: 1 0 calc(10vw + 75% - 48px);
	 margin-left: 48px;
	}
}

.infographic-segmented {
  position: relative;
  width: var(--main-component-width);
  height: var(--main-component-height);
  border-radius: 50%;
  background: #f6f6f6;
  margin: 0 auto;
}

.ds-info-segmented__interactive_circle {
  opacity: 0;
  transition: opacity var(--transition-time);
  position: relative;
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: 50%;
  overflow: hidden;
  height: var(--circle-dimensions);
  width: var(--circle-dimensions);
}

.ds-info-segmented__interactive_circle--full-opacity {
  opacity: 1;
}

.ds-info-segmented__interactive_circle__circle-graph::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
}

.ds-info-segmented__interactive_circle__circle-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.ds-info-segmented__interactive_circle__circle-wrapper::before {
  content: "";
  position: absolute;
  width: 55%;
  height: 55%;
  border-radius: 50%;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: content-box;
}

.ds-info-segmented__interactive_circle__circle-graph
  .ds-info-segmented__interactive_circle__circle {
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;
  text-align: center;
  transition: 0.5s;
  z-index: 5;
  outline: none;
  background-color: unset;
  pointer-events: none;
}

.ds-info-segmented__interactive_circle__btn_content {
  display: flex;
  justify-content: center;
  width: 50px;
  height: 50px;
}

.ds-info-segmented__interactive_circle__btn_content img {
  background-size: cover;
  width: 100%;
  height: 100%;
}

.ds-info-segmented__interactive_circle__circle-graph .circle:hover {
  transform: scale(1.1, 1.1);
}

.ds-info-segmented__interactive_circle__circle-graph .circle:active {
  transform: scale(0.9, 0.9);
}

.ds-info-segmented__interactive_circle__segment-circle {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  top: 0;
  left: 0;
  transform: rotate(60deg);
}

.ds-info-segmented__interactive_circle__segment-element {
  display: block;
  overflow: hidden;
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  transform-origin: 0% 100%;
  z-index: var(--segment-z-index);
  cursor: pointer;
  transition: var(--segment-transition);
}

.ds-info-segmented__interactive_circle__segment-element:nth-child(1) {
  background: var(--segment-1-color);
  transform: rotate(-120deg) skewY(var(--separator-skew));
}

.ds-info-segmented__interactive_circle__segment-element:nth-child(2) {
  background: var(--segment-2-color);
  transform: rotate(-60deg) skewY(var(--separator-skew));
}

.ds-info-segmented__interactive_circle__segment-element:nth-child(3) {
  background: var(--segment-3-color);
  transform: rotate(0deg) skewY(var(--separator-skew));
}

.ds-info-segmented__interactive_circle__segment-element:nth-child(4) {
  background: var(--segment-4-color);
  transform: rotate(60deg) skewY(var(--separator-skew));
}

.ds-info-segmented__interactive_circle__segment-element:nth-child(5) {
  background: var(--segment-5-color);
  transform: rotate(120deg) skewY(var(--separator-skew));
}

.ds-info-segmented__interactive_circle__segment-element:nth-child(6) {
  background: var(--segment-6-color);
  transform: rotate(180deg) skewY(var(--separator-skew));
}

.ds-info-segmented__interactive_circle__border-inner-circle {
  position: absolute;
  width: 55%;
  height: 55%;
  border-radius: 50%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: #ffffff;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  overflow: hidden;
}

.ds-info-segmented__interactive_circle__segment-element-item {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
}

.ds-info-segmented__interactive_circle__segment-element--active {
  background-color:#cecece !important;
}

.ds-info-segmented__interactive_circle__separator {
  position: absolute;
  height: 5px;
  background-color: #fff;
  top: calc(50% - 5px / 2);
  left: 50%;
  transform-origin: 0 calc(5px / 2);
  z-index: 2;
}

.ds-info-segmented__interactive_circle__separator:nth-child(1) {
  transform: rotate(0deg) skewY(var(--separator-skew));
}

.ds-info-segmented__interactive_circle__separator:nth-child(2) {
  transform: rotate(60deg) skewY(var(--separator-skew));
}

.ds-info-segmented__interactive_circle__separator:nth-child(3) {
  transform: rotate(120deg) skewY(var(--separator-skew));
}

.ds-info-segmented__interactive_circle__separator:nth-child(4) {
  transform: rotate(180deg) skewY(var(--separator-skew));
}

.ds-info-segmented__interactive_circle__separator:nth-child(5) {
  transform: rotate(240deg) skewY(var(--separator-skew));
}

.ds-info-segmented__interactive_circle__separator:nth-child(6) {
  transform: rotate(300deg) skewY(var(--separator-skew));
}

.ds-info-segmented__interactive_circle__separator:nth-child(1),
.ds-info-segmented__interactive_circle__separator:nth-child(2),
.ds-info-segmented__interactive_circle__separator:nth-child(3),
.ds-info-segmented__interactive_circle__separator:nth-child(4),
.ds-info-segmented__interactive_circle__separator:nth-child(5),
.ds-info-segmented__interactive_circle__separator:nth-child(6) {
  width: var(--separator-width);
}

.ds-info-segmented__interactive_circle__item-1 {
	transform: rotate(595deg) translate(195px) rotate(-595deg);
}

.ds-info-segmented__interactive_circle__item-2 {
	transform: rotate(290deg) translate(175px) rotate(-290deg);
}

.ds-info-segmented__interactive_circle__item-3 {
	transform: rotate(350deg) translate(145px) rotate(-350deg);

}

.ds-info-segmented__interactive_circle__item-4 {
	transform: rotate(425deg) translate(130px) rotate(-425deg);
}

.ds-info-segmented__interactive_circle__item-5 {
	transform: rotate(490deg) translate(155px) rotate(-490deg);
}

.ds-info-segmented__interactive_circle__item-6 {
	transform: rotate(547deg) translate(190px) rotate(-547deg);
}

/* RIGHT COLUMN */

.ds-info-segmented__accordion {
  max-width: var(--accordion-max-width);
  background-color: #eee;
  color: #ffffff;
  cursor: pointer;
  padding: var(--accordion-padding);
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: var(--accordion-font-size);
  transition: var(--accordion-transition);
}

.ds-info-segmented__accordion_1 {
  background-color: var(--segment-1-color);
}
.ds-info-segmented__accordion_2 {
  background-color: var(--segment-2-color);
}
.ds-info-segmented__accordion_3 {
  background-color: var(--segment-3-color);
}
.ds-info-segmented__accordion_4 {
  background-color: var(--segment-4-color);
}
.ds-info-segmented__accordion_5 {
  background-color: var(--segment-5-color);
}
.ds-info-segmented__accordion_6 {
  background-color: var(--segment-6-color);
}

.ds-info-segmented__panel--active,
.ds-info-segmented__accordion:hover {
  background-color: #ccc;
}

.ds-info-segmented__panel {
  max-width: var(--panel-max-width);
  padding: var(--panel-padding);
  background-color: rgba(240, 240, 240, 0.404);
  max-height: 0;
  overflow: hidden;
  transition: var(--panel-transition);
}

.ds-info-segmented__panel > *:first-child {
	margin-top: 24px !important;
}
.ds-info-segmented__panel > *:last-child {
	margin-bottom: 24px !important;
}

.ds-info-segmented__panel p {
	margin: 0 !important;
	line-height: 28px !important;
	font-size: 15px !important;
}

.ds-info-segmented__panel ul {
	padding: 0 24px;
}

.ds-info-segmented__panel ul li {
	padding: 8px 0 !important;
    line-height: 20px !important;
	font-size: 15px !important;
}

.ds-info-segmented__panel ul li:last-child {
	padding-bottom: 24px !important;
}

.ds-info-segmented__interactive_circle__border-inner-circle__title img {
	max-width: 75%;
    width: 75%;

}

/*
.ds-info-segmented__interactive_circle__border-inner-circle__title span::after {
    content: "___";
    display: block;
    font-size: 30px;
    line-height: 0px;
    font-weight: 900;
} 

.ds-info-segmented__interactive_circle__border-inner-circle__title .item1::after {
  color: var(--segment-1-color);
}

.ds-info-segmented__interactive_circle__border-inner-circle__title .item2::after {
  color: var(--segment-2-color);
}

.ds-info-segmented__interactive_circle__border-inner-circle__title .item3::after {
  color: var(--segment-3-color);
}

.ds-info-segmented__interactive_circle__border-inner-circle__title .item4::after {
  color: var(--segment-4-color);
}

.ds-info-segmented__interactive_circle__border-inner-circle__title .item5::after {
  color: var(--segment-5-color);
}

.ds-info-segmented__interactive_circle__border-inner-circle__title .item6::after {
  color: var(--segment-6-color);
}
*/
@media screen and (max-width:1000px) {
	.ds-info-segmented__column {
		float:none;
		width:100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	:root {
		--panel-max-width: 800px;
		--accordion-max-width: 800px;
	}
}

@media screen and (max-width:639px) {
	
	:root {
		--circle-dimensions: 320px;
		--separator-width: 320px;
	}
	
	.ds-info-segmented__interactive_circle__btn_content {
	  width: 40px;
	  height: 40px;
	}

	.ds-info-segmented__interactive_circle__item-1 {
		transform: rotate(595deg) translate(150px) rotate(-595deg);
	}

	.ds-info-segmented__interactive_circle__item-2 {
		transform: rotate(290deg) translate(135px) rotate(-290deg);
	}

	.ds-info-segmented__interactive_circle__item-3 {
		transform: rotate(350deg) translate(110px) rotate(-350deg);
	}

	.ds-info-segmented__interactive_circle__item-4 {
		transform: rotate(425deg) translate(100px) rotate(-425deg);
	}

	.ds-info-segmented__interactive_circle__item-5 {
		transform: rotate(490deg) translate(120px) rotate(-490deg);
	}

	.ds-info-segmented__interactive_circle__item-6 {
		transform: rotate(547deg) translate(145px) rotate(-547deg);
	}
	
	.ds-info-segmented__interactive_circle__border-inner-circle__title {
		font-size:13px !important;
	}
}