:root {
  --circles-size: 600px;
  --circle-1-size: 65%;
  --core-size: 25%;
}

.duo__block--flip{
  flex-direction: row-reverse;
    justify-content: space-between;
}

.section--circles .anchor {
  color: var(--grey35);
}
.anchor {
  text-decoration: none!important;
  transition: color .2s ease-in-out;
  font-family: -apple-system,BlinkMacSystemFont,Arial,sans-serif;
  font-size: 1.5rem;
}
.section--circles .anchor:hover {
  text-decoration: none!important;
  color: var(--purple35);
}

.section.section--circles {
  padding: 50px 0!important;
}
.circle-infographic {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out;
  transform-origin: top left;
  text-align: center;
  position: relative;
  width: var(--circles-size);
  height: var(--circles-size);
}
.circle-infographic * {
  transition: all 0.3s ease-in-out;
}
.circle__core {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--core-size);
  min-height: var(--core-size);
  border-radius: 50%;
  z-index: 2;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  cursor: default;
  background-color: var(--color-primary);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 4px solid #ffffff;
}
.core-content {
  opacity: 0.4;
}
.circle-infographic .circle__cat {
  font-weight: 700;
  text-transform: uppercase;
  width: 150px;
  opacity: 0.4;
  cursor: default;
}
.circle-1 {
    width: var(--circle-1-size);
    height: var(--circle-1-size);
    border-radius: 50%;
    position: relative;
    z-index: 1;
    background-color: var(--purple35);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 4px solid #ffffff;
}
.circle__item {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  transform: translate(-50%, -50%);
  transition: all 0.2s ease-in-out;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  background-color: transparent;
  padding: 0;
  white-space: unset;
  border: 0;
}
.circle__item:hover,
.circle__item:focus {
  color: #fff;
  background-color: transparent;
  outline: 0;
  border: 0;
  box-shadow: none;
}
.circle__item:active {
 box-shadow: 0 0 0 2px rgb(191 0 255 / 80%);
}

.circle__item .helper {
  font-size: 11px;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.circle__item:hover .helper,
.circle__item:focus .helper {
  visibility: visible;
  opacity: 1;
}


.circle-1 .circle__cat {
  left: 50%;
  top: 17%;
}

{# Default and if 5 items #}
.circle-1 .item--1,
.circle-1.has-5-items .item--1{
  left: 80%;
  top: 37%;
}
.circle-1 .item--2,
.circle-1.has-5-items .item--2{
  left: 80%;
  top: 65%;
}
.circle-1 .item--3,
.circle-1.has-5-items .item--3{
  left: 50%;
  top: 85%;
}
.circle-1 .item--4,
.circle-1.has-5-items .item--4{
  left: 18%;
  top: 65%;
}
.circle-1 .item--5,
.circle-1.has-5-items .item--5{
  left: 18%;
  top: 37%;
}



.circle-2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    background-color: var(--purple60);
  position: absolute;
  left: 0;
  top: 0;
}


.circle-2 .circle__cat {
    left: 50%;
    top: 10%;
}

{# Default and if 7 items #}
.circle-2 .item--1,
.circle-2.has-7-items .item--1{
  left: 79%;
  top: 22%;
}
.circle-2 .item--2,
.circle-2.has-7-items .item--2{
  left: 90%;
  top: 48%;
}
.circle-2 .item--3,
.circle-2.has-7-items .item--3{
  left: 79%;
  top: 79%;
}
.circle-2 .item--4,
.circle-2.has-7-items .item--4{
  left: 50%;
  top: 91%;
}
.circle-2 .item--5,
.circle-2.has-7-items .item--5{
  left: 20%;
  top: 79%;
}
.circle-2 .item--6,
.circle-2.has-7-items .item--6{
  left: 9%;
  top: 49%;
}
.circle-2 .item--7,
.circle-2.has-7-items .item--7{
  left: 21%;
  top: 23%;
}
{# if 6 items #}
.circle-2.has-6-items .item--1{
  left: 84%;
  top: 28%;
}
.circle-2.has-6-items .item--2{
  left: 90%;
  top: 61%;
}
.circle-2.has-6-items .item--3{
  left: 71%;
  top: 87%;
}
.circle-2.has-6-items .item--4{
  left: 34%;
  top: 87%;
}
.circle-2.has-6-items .item--5{
  left: 12%;
  top: 64%;
}
.circle-2.has-6-items .item--6{
  left: 15%;
  top: 29%;
}




.circle__core:hover .shine, .circle__core:focus .shine,
.circle-1:hover .shine, .circle-1:focus .shine,
.circle-2:hover .shine, .circle-2:focus .shine {
  color: #fff;
  -webkit-mask-image: linear-gradient(-75deg,rgba(0,0,0,.6) 30%,#a001f0 50%,rgba(0,0,0,.6) 70%);
  -webkit-mask-size: 200%;
  animation: shine 2s infinite;
  opacity: 1;
}
.circle__core:hover, .circle__core:focus,
.circle-1:hover, .circle-1:focus,
.circle-2:hover, .circle-2:focus  {
  background-color: var(--purple25);
}

.circle-infos {
  z-index: 100;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(202, 145, 242, 0.5);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in-out;
  text-align: left;
}
.circle-infographic.active .circle-infos {
  opacity: 1;
  visibility: visible;
}
.circle-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  transition: all 0.2s ease-in-out;
  display: none;
  position: relative;
  border-radius: 50%;
  background-color: var(--purple25);
  box-shadow: 0 0px 32px rgb(255 255 255 / 46%);
  width: 70%;
  height: 70%;
  padding: 50px;
  padding-left: 70px;
}


.circle-info.active {
  display: flex;
}
.circle-info__name {
  font-weight: 700;
  margin-bottom: 10px;
}
.circle-info__description {
  margin-bottom: 20px;
}
.circle-info__close {
  position: absolute;
  top: 16%;
  right: 18%;
  background-color: transparent;
  
}
.circle-info__close:before,
.circle-info__close:after {
    background: #fff;
    content: "";
    height: 0.2rem;
    width: 2rem;
    left: 0;
    margin-top: -2px;
    position: absolute;
    top: 50%;
  -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.circle-info__close:before {
  -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.circle-info__close:hover, .circle-info__close:focus {
  background-color: transparent;
  /*box-shadow: none;*/
}
.circle-info__close:active {
  /*box-shadow: 0 0 0 2px rgb(191 0 255 / 80%);*/
}
.circle-info .link {
  color: #fff;
  font-size: 1rem;
  text-decoration: none;
}
.section--circles .has-icon-forward:after {
  border-color: #fff!important;
}
.circle-info .link:hover, 
.circle-info .link:focus {
  color: #E0C6FC;
}
/*
.circle-infographic .tooltipp {
  z-index: 5;
  width: 34vmin;
  height: 34vmin;
  border-radius: 50%;
  position: relative;
  background-color: var(--purple25);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  
  overflow: hidden;
  justify-content: center;
  align-items: center;
  padding: 6vmin;
  
}
.circle-infographic .tooltipp["data-show"]{
  display: flex;
}
*/




/* Move to global css file */ 

/* Module specific css */ 
.no-padding-top .section--text-and-image {
  padding-top: 0;
}
.duo__block .heading--subsection {
  margin-bottom: 40px;
}
.duo__content .heading {
  margin-bottom: 20px;
  font-size: 24px;
  line-height: 1.2;
}
.section--text-and-image .text--basic {
  max-width: 600px;
}
.section--circles a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-skip-ink: none;
}
.section--circles ul {
  padding-left: 20px;
}
.section--circles li {
  font-size: 1.25rem;
  margin-bottom: 12px;
}
.section--circles .text--basic {
  margin-bottom: 20px;
}



@media (min-width: 992px) {
  .circle-infographic {
    transform-origin: center left;
  }
  .duo__block{
    display: flex;
    align-items: center;
  }
  .section--text-and-image.img-right .duo__block {
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  .section--text-and-image.img-right .duo__content {
    padding-left: 0;
    width: 600px;
  }
  .duo__image {
    padding: 30px;
    align-items: flex-end;
    max-width: 60%;
    width: 100%;
  }
  .duo__content {
    padding: 30px;
    padding-left: 80px;
  }
  .section--duo .text--basic {
    max-width: 350px;
  }
  
}
@media (max-width: 991px) {
  .section.section--circles {
    padding: 0!important;
  }
  .duo__image,
  .duo__content {
    align-items: flex-start;
    margin-bottom: 50px;
  }
  .duo__image {
    margin: 0 auto 0 auto;
    /*max-width: 400px;*/
  }
  .section--basic .container {
    margin-bottom: 30px;
  }
  .no-cta .duo__content .text--basic:last-child {
    margin-bottom: 0;
  }
  .no-cta .duo__content {
    margin-bottom: 0;
  }
  
  .circle-info {
    width: 90%;
    height: 90%;
    padding: 10% 10% 10% 15%;
  }
  .circle-infos {
    font-size: 130%;
  }
  .circle-info .link {
    font-size: 1.4rem;
  }
  .section--circles.section--text-and-image .duo__image {
    height: 90vW;
  }
}

{# If Strategic circle has 7 items #}