/* Stile generale */
.circle-wrapper {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  background: #f8f8f8;
  background: #ffffff;
  padding-bottom: 80px;
}


@media (max-width:979px) {
	.circle-wrapper {
	  display:none;
	}	
}

.circle-container {
  position: relative;
  width: 0; /* Raggio del cerchio grande */
  height: 0;
  margin-left:-107px;
}

/* Contenitore esterno dei cerchi */
.circle {
  position: absolute;
  width: 8vh;
  height: 8vh;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-origin: center;
	  border-radius: 50%;
	  z-index:1;
}
/* Cerchio interno per l'animazione */
.circle-inner {
  width: 100%;
  height: 100%;
  z-index:1;
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8vh;
  font-weight: bold;
  transition: transform 0.3s ease, background-color 0.3s ease;
  text-align:center;
  font-family:'Montserrat', Arial;
  padding:0.4vh;
}

/* Disposizione a cerchio */
.circle:nth-child(1)  { transform: rotate(0deg) translate(30vh) rotate(0deg); }
.circle:nth-child(2)  { transform: rotate(18deg) translate(30vh) rotate(-18deg); }
.circle:nth-child(3)  { transform: rotate(36deg) translate(30vh) rotate(-36deg); }
.circle:nth-child(4)  { transform: rotate(54deg) translate(30vh) rotate(-54deg); }
.circle:nth-child(5)  { transform: rotate(72deg) translate(30vh) rotate(-72deg); }
.circle:nth-child(6)  { transform: rotate(90deg) translate(30vh) rotate(-90deg); }
.circle:nth-child(7)  { transform: rotate(108deg) translate(30vh) rotate(-108deg); }
.circle:nth-child(8)  { transform: rotate(126deg) translate(30vh) rotate(-126deg); }
.circle:nth-child(9)  { transform: rotate(144deg) translate(30vh) rotate(-144deg); }
.circle:nth-child(10) { transform: rotate(162deg) translate(30vh) rotate(-162deg); }
.circle:nth-child(11) { transform: rotate(180deg) translate(30vh) rotate(-180deg); }
.circle:nth-child(12) { transform: rotate(198deg) translate(30vh) rotate(-198deg); }
.circle:nth-child(13) { transform: rotate(216deg) translate(30vh) rotate(-216deg); }
.circle:nth-child(14) { transform: rotate(234deg) translate(30vh) rotate(-234deg); }
.circle:nth-child(15) { transform: rotate(252deg) translate(30vh) rotate(-252deg); }
.circle:nth-child(16) { transform: rotate(270deg) translate(30vh) rotate(-270deg); }
.circle:nth-child(17) { transform: rotate(288deg) translate(30vh) rotate(-288deg); }
.circle:nth-child(18) { transform: rotate(306deg) translate(30vh) rotate(-306deg); }
.circle:nth-child(19) { transform: rotate(324deg) translate(30vh) rotate(-324deg); }
.circle:nth-child(20) { transform: rotate(342deg) translate(30vh) rotate(-342deg); }









/* Gradazione dei colori */
.circle:nth-child(1), .mob-benefits .benefit-container:nth-child(1) .rdimg:after  { background-color: hsl(0, 70%, 60%); }
.circle:nth-child(2), .mob-benefits .benefit-container:nth-child(2) .rdimg:after  { background-color: hsl(20, 70%, 60%); }
.circle:nth-child(3), .mob-benefits .benefit-container:nth-child(3) .rdimg:after  { background-color: hsl(40, 70%, 60%); }
.circle:nth-child(4), .mob-benefits .benefit-container:nth-child(4) .rdimg:after  { background-color: hsl(60, 70%, 60%); }
.circle:nth-child(5), .mob-benefits .benefit-container:nth-child(5) .rdimg:after  { background-color: hsl(100, 70%, 60%); }
.circle:nth-child(6), .mob-benefits .benefit-container:nth-child(6) .rdimg:after  { background-color: hsl(140, 70%, 60%); }
.circle:nth-child(7), .mob-benefits .benefit-container:nth-child(7) .rdimg:after  { background-color: hsl(180, 70%, 60%); }
.circle:nth-child(8), .mob-benefits .benefit-container:nth-child(8) .rdimg:after  { background-color: hsl(200, 70%, 60%); }
.circle:nth-child(9), .mob-benefits .benefit-container:nth-child(9) .rdimg:after  { background-color: hsl(240, 70%, 60%); }
.circle:nth-child(10), .mob-benefits .benefit-container:nth-child(10) .rdimg:after { background-color: hsl(280, 70%, 60%); }
.circle:nth-child(11), .mob-benefits .benefit-container:nth-child(11) .rdimg:after { background-color: hsl(320, 70%, 60%); }
.circle:nth-child(12), .mob-benefits .benefit-container:nth-child(12) .rdimg:after { background-color: hsl(360, 70%, 60%); }
.circle:nth-child(13), .mob-benefits .benefit-container:nth-child(13) .rdimg:after { background-color: hsl(20, 70%, 60%); }
.circle:nth-child(14), .mob-benefits .benefit-container:nth-child(14) .rdimg:after { background-color: hsl(40, 70%, 60%); }
.circle:nth-child(15), .mob-benefits .benefit-container:nth-child(15) .rdimg:after { background-color: hsl(60, 70%, 60%); }
.circle:nth-child(16), .mob-benefits .benefit-container:nth-child(16) .rdimg:after { background-color: hsl(100, 70%, 60%); }
.circle:nth-child(17), .mob-benefits .benefit-container:nth-child(17) .rdimg:after { background-color: hsl(140, 70%, 60%); }
.circle:nth-child(18), .mob-benefits .benefit-container:nth-child(18) .rdimg:after { background-color: hsl(180, 70%, 60%); }
.circle:nth-child(19), .mob-benefits .benefit-container:nth-child(19) .rdimg:after { background-color: hsl(240, 70%, 60%); }
.circle:nth-child(20), .mob-benefits .benefit-container:nth-child(20) .rdimg:after { background-color: hsl(280, 70%, 60%); }


.circle:nth-child(1), .mob-benefits .benefit-container:nth-child(1) .rdimg:after  { background-color: #cc7000; }
.circle:nth-child(2), .mob-benefits .benefit-container:nth-child(2) .rdimg:after  { background-color: #e67e00; }
.circle:nth-child(3), .mob-benefits .benefit-container:nth-child(3) .rdimg:after  { background-color: #ff8c00; }
.circle:nth-child(4), .mob-benefits .benefit-container:nth-child(4) .rdimg:after  { background-color: #ff981a; }
.circle:nth-child(5), .mob-benefits .benefit-container:nth-child(5) .rdimg:after  { background-color: #ffa333; }
.circle:nth-child(6), .mob-benefits .benefit-container:nth-child(6) .rdimg:after  { background-color: #ffaf4d; }
.circle:nth-child(7), .mob-benefits .benefit-container:nth-child(7) .rdimg:after  { background-color: #ffba66; }
.circle:nth-child(8), .mob-benefits .benefit-container:nth-child(8) .rdimg:after  { background-color: #ff3333; }
.circle:nth-child(9), .mob-benefits .benefit-container:nth-child(9) .rdimg:after  { background-color: #ff4000; }
.circle:nth-child(10), .mob-benefits .benefit-container:nth-child(10) .rdimg:after { background-color: #ff6000; }
.circle:nth-child(11), .mob-benefits .benefit-container:nth-child(11) .rdimg:after { background-color: #cc7000; }
.circle:nth-child(12), .mob-benefits .benefit-container:nth-child(12) .rdimg:after { background-color: #e67e00; }
.circle:nth-child(13), .mob-benefits .benefit-container:nth-child(13) .rdimg:after { background-color: #ff8c00; }
.circle:nth-child(14), .mob-benefits .benefit-container:nth-child(14) .rdimg:after { background-color: #ff981a; }
.circle:nth-child(15), .mob-benefits .benefit-container:nth-child(15) .rdimg:after { background-color: #ffa333; }
.circle:nth-child(16), .mob-benefits .benefit-container:nth-child(16) .rdimg:after { background-color: #ffaf4d; }
.circle:nth-child(17), .mob-benefits .benefit-container:nth-child(17) .rdimg:after { background-color: #ffba66; }
.circle:nth-child(18), .mob-benefits .benefit-container:nth-child(18) .rdimg:after { background-color: #ffc680; }
.circle:nth-child(19), .mob-benefits .benefit-container:nth-child(19) .rdimg:after { background-color: #ff4000; }
.circle:nth-child(20), .mob-benefits .benefit-container:nth-child(20) .rdimg:after { background-color: #ff6000; }




/* Effetto al passaggio del mouse */
/* Effetto al passaggio del mouse */

.circle:hover, .circle.active {
  z-index:99;
  cursor:pointer;
}
.circle-inner:hover, .circle.active .circle-inner {
  transform: scale(1.75, 1.58);
  transform: scale(1.75, 1.75);
  background-color: hsl(220, 0%, 0%);
  z-index:99;
}






#labels {display:none;}
.label img, .inner img {width:72px;height:auto;margin-bottom: 1.8vh;}

.maintext {
	width: 46vh;
    height: 46vh;
    position: relative;
    margin: 7vh auto 0;
    transform: translate(-19vh, -26vh);
    font-family: 'Montserrat', Arial;
}

.inner {
  width: 100%;
  height: 100%;
  /*BLUE BG*/
  background: radial-gradient(
    ellipse at center,
    rgba(0, 128, 172, 1) 0%,
    rgba(0, 128, 172, 1) 70%,
    rgba(0, 128, 172, 0) 70.3%
  );
  /*RED BG
  background: radial-gradient(
    ellipse at center,
    rgba(210, 20, 20, 1) 0%,
    rgba(210, 20, 20, 1) 70%,
    rgba(210, 20, 20, 0) 70.3%
  );*/
  background: radial-gradient(
    ellipse at center,
    rgba(240, 240, 240, 1) 0%,
    rgba(240, 240, 240, 1) 70%,
    rgba(0, 128, 172, 0) 70.3%
  );  
  padding-top: 2vh;
  
  position: relative;
  margin: 0;
  color: black;
}

@media (min-height:980px) {
	.inner {
	  padding-top: 2vh;
	}	
}

.inner > div {
  height: 100%;
  font-size: 1.3vh;
  line-height: 1.25;
  padding: 0;
  text-align: center;
  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
  font-weight: 200;
}
.inner h3 {
	margin-bottom: 16px;
	font-size: 24px;
    line-height: 30px;
}
@media (min-height:980px) {
	.inner h3 {
		font-size: 28px;
		line-height: 34px;
	}
}


.inner::before {
  content: "";
  width: 50%;
  height: 100%;
  float: left;
  shape-outside: polygon(
    0 0,
    98% 0,
    50% 6%,
    23.4% 17.3%,
    6% 32.6%,
    0 50%,
    6% 65.6%,
    23.4% 82.7%,
    50% 94%,
    98% 100%,
    0 100%
  );
  shape-margin: 10%;
}

.inner > div::before {
  content: "";
  width: 50%;
  height: 100%;
  float: right;
  shape-outside: polygon(
    2% 0%,
    100% 0%,
    100% 100%,
    2% 100%,
    50% 94%,
    76.6% 82.7%,
    94% 65.6%,
    100% 50%,
    94% 32.6%,
    76.6% 17.3%,
    50% 6%
  );
  shape-margin: 10%;
}

@media (min-width:980px) {
	.mob-benefits {
	  display:none;
	}	
}

.benefit-row-parent {display:none;}

.mob-benefits .benefit-container {
    margin-bottom: 30px;
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

.mob-benefits .rdimg {
    float: left;
    width: 80px;
	height: 80px;
    margin-right: 16px;
}

.mob-benefits .rdimg img {
    max-width: 80px;
    max-height: 80px;
    z-index: 1;
    position: relative;
    padding: 16px;
    margin: 0 auto;
    display: block;
}

.mob-benefits .rdimg:after {
    content: '';
    width: 80px;
    height: 80px;
    position: absolute;
    left: 15px;
    top: 20px;
    border-radius: 50%;
}






@media (max-height:800px) {
	.circle:nth-child(1)  { transform: rotate(0deg) translate(300px, -30px) rotate(0deg); }
	.circle:nth-child(2)  { transform: rotate(18deg) translate(300px, -30px) rotate(-18deg); }
	.circle:nth-child(3)  { transform: rotate(36deg) translate(300px, -30px) rotate(-36deg); }
	.circle:nth-child(4)  { transform: rotate(54deg) translate(300px, -30px) rotate(-54deg); }
	.circle:nth-child(5)  { transform: rotate(72deg) translate(300px, -30px) rotate(-72deg); }
	.circle:nth-child(6)  { transform: rotate(90deg) translate(300px, -30px) rotate(-90deg); }
	.circle:nth-child(7)  { transform: rotate(108deg) translate(300px, -30px) rotate(-108deg); }
	.circle:nth-child(8)  { transform: rotate(126deg) translate(300px, -30px) rotate(-126deg); }
	.circle:nth-child(9)  { transform: rotate(144deg) translate(300px, -30px) rotate(-144deg); }
	.circle:nth-child(10) { transform: rotate(162deg) translate(300px, -30px) rotate(-162deg); }
	.circle:nth-child(11) { transform: rotate(180deg) translate(300px, -30px) rotate(-180deg); }
	.circle:nth-child(12) { transform: rotate(198deg) translate(300px, -30px) rotate(-198deg); }
	.circle:nth-child(13) { transform: rotate(216deg) translate(300px, -30px) rotate(-216deg); }
	.circle:nth-child(14) { transform: rotate(234deg) translate(300px, -30px) rotate(-234deg); }
	.circle:nth-child(15) { transform: rotate(252deg) translate(300px, -30px) rotate(-252deg); }
	.circle:nth-child(16) { transform: rotate(270deg) translate(300px, -30px) rotate(-270deg); }
	.circle:nth-child(17) { transform: rotate(288deg) translate(300px, -30px) rotate(-288deg); }
	.circle:nth-child(18) { transform: rotate(306deg) translate(300px, -30px) rotate(-306deg); }
	.circle:nth-child(19) { transform: rotate(324deg) translate(300px, -30px) rotate(-324deg); }
	.circle:nth-child(20) { transform: rotate(342deg) translate(300px, -30px) rotate(-342deg); }
	
    .maintext {
        width: 570px;
        height: 570px;
        margin: 0 auto;
        transform: translate(-257px, -257px);
    }
	
	.circle-container {
		margin-left: -45px;
	}
	.circle-wrapper {
		min-height: 800px;
	}
	
	.inner > div {
    height: 100%;
    font-size: 16px;
	}
	
	.circle {
    width: 80px;
    height: 80px;
	}
	.circle-inner {
    font-size: 10px;
    padding: 0.4vh;
	}
	
}