.cnt-circle {
  position:relative;
}

.circle-container {
  position:relative;
  width:50em;
  height:50em;
  border-radius:50%;
  padding:0;
  list-style:none;
  margin:0 auto;
  background-size: 70% 70%;
  background-repeat: no-repeat;
  background-position: 20% 50%;
  /*border: 1px dashed white;*/
  /*transform: rotate(19deg);*/
}

@media all and (min-width: 1024px) and (max-width: 1400px) {
}

.animazione-ruota {
  animation-name: anima-circle;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 2s;
  animation-iteration-count: 1;
  -webkit-transition:all 1s ease-in;
  -moz-transition:all 1s ease-in;
  -o-transition:all 1s ease-in;
  -ms-transition:all 1s ease-in;
  transition:all 1s ease-in;
}

@keyframes anima-circle {
	0% { transform:rotate(0deg); }
  25% { transform:rotate(-30deg); }
  50% { transform:rotate(30deg); }
  100% { transform:rotate(0deg); }
}

.circle-container>*{
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    margin:-3em;
    width:7em;
    height:7em
}

.circle-container>*:nth-of-type(1) {
	transform: rotate(-90deg) translate(25em) rotate(90deg)
}

.circle-container>*:nth-of-type(2) {
	transform: rotate(-64.28571deg) translate(25em) rotate(64.28571deg)
}

.circle-container>*:nth-of-type(3) {
	transform: rotate(-38.57143deg) translate(25em) rotate(38.57143deg)
}

.circle-container>*:nth-of-type(4) {
	transform: rotate(-12.85714deg) translate(25em) rotate(12.85714deg)
}

.circle-container>*:nth-of-type(5) {
	transform: rotate(12.85714deg) translate(25em) rotate(-12.85714deg)
}

.circle-container>*:nth-of-type(6) {
	transform: rotate(38.57143deg) translate(25em) rotate(-38.57143deg)
}

.circle-container>*:nth-of-type(7) {
	transform: rotate(64.28571deg) translate(25em) rotate(-64.28571deg)
}

.circle-container>*:nth-of-type(8) {
	transform: rotate(90deg) translate(25em) rotate(-90deg)
}

.circle-container>*:nth-of-type(9) {
	transform: rotate(115.71429deg) translate(25em) rotate(-115.71429deg)
}

.circle-container>*:nth-of-type(10) {
	transform: rotate(141.42857deg) translate(25em) rotate(-141.42857deg)
}

.circle-container>*:nth-of-type(11) {
	transform: rotate(167.14286deg) translate(25em) rotate(-167.14286deg)
}

.circle-container>*:nth-of-type(12) {
	transform: rotate(192.85714deg) translate(25em) rotate(-192.85714deg)
}

.circle-container>*:nth-of-type(13) {
	transform: rotate(218.57143deg) translate(25em) rotate(-218.57143deg)
}

.circle-container>*:nth-of-type(14) {
	transform: rotate(244.28571deg) translate(25em) rotate(-244.28571deg)
}

.circle-container li a {
    width:7em;
    height:7em;
    display:block;
    max-width:100%;
    border-radius:50%!important;
    transition:.15s;
    opacity:0.9;
    position:relative;
}

.circle-container li a:hover {
    transform: scale(1.3);
    opacity:1;
}

.circle-container li a img {
    /*border-radius:50%!important;*/
    display:block;
    max-width:100%;
    transition:.15s;
}

.circle-titoletto {
  color:#a73334;
  font-weight: bold;
  position:relative;
  top:0;
  white-space:nowrap;
  -webkit-transition: all .5s linear;
  -moz-transition: all .5s linear;
  transition: all .5s linear;
}

.circle-container li:hover a img {
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  transform: rotate(-10deg);
}

.circle-container li:hover .circle-titoletto {
  top:20px;
}

/* FINE CIRCLE */

/* TOOLTIP */

.info-tooltip {
  display:none;
  color:#000;
  background-color: rgba(249,244,224,0.8);
  width: 450px;
  height: 450px;
  min-width: 450px;
  min-height: 450px;
  position:absolute;
  top: 50%;
  left: 48%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  border: 4px dotted #a73334;
  padding: 30px;
  z-index:9999;
  text-align: center;
  box-shadow: 0 0 1px 1px rgba(0,0,0,0.1);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-transition: all .3s linear;
  -moz-transition: all .3s linear;
  transition: all .3s linear;

  animation-name: anima-tooltip;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
}

@keyframes anima-tooltip {
	0% {
    opacity:0;
    left:30%;
  }

  100% {
    opacity:1;
    left:48%;
  }
}

.circle__wrapper {
  display: table;
  width: 100%;
  height: 100%;
}

.circle__content {
  display: table-cell;
  padding: 30px;
  vertical-align: middle;
}