:root {
  --width_pezzi: 7%;
	--height_pezzi: 84px;
  --height_contenitore: 4.5%;
  --width_base: 1200px;
}

[draggable] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.drag-list {
  /*overflow: hidden;*/
  margin: 0;
  top: calc((100% - var(--height_contenitore))/2);
  left:calc((100% + var(--offset)*2 - var(--n_pezzi)*var(--width_pezzi))/2);
  position: absolute;
  /*width:calc(var(--n_pezzi)*var(--width_pezzi));*/
  width:100%;
  z-index:9999999999;

}
.drag-item {
  float: left;
  padding: 0;
  width: var(--width_pezzi);
  text-align: center;
  transition: 0.25s;
  cursor: pointer;
  transition: 0.25s;
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  -o-transition: 0.25s;
  -ms-transition: 0.25s;
  /*border: 1px solid transparent;*/
/*  z-index:9999999999; */
  position: absolute;
}


.sinistra #pos_0{
  margin-left: calc(var(--width_pezzi)*0.9);
  margin-top: calc(var(--width_pezzi)*-0.3);
}

.sinistra #pos_0 .immagine_dentro{
  -webkit-transform: rotate(140deg);
  -moz-transform: rotate(140deg);
  -o-transform: rotate(140deg);
  -ms-transform: rotate(140deg);
  transform: rotate(140deg);
}

.sinistra #pos_1{
  margin-left: calc(var(--width_pezzi)*0.4);
  margin-top: calc(var(--width_pezzi)*0.54);
}

.sinistra #pos_1 .immagine_dentro{
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -o-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}

.sinistra #pos_2{
  margin-left: calc(var(--width_pezzi)*0.6);
  margin-top: calc(var(--width_pezzi)*1.5);
}

.sinistra #pos_2 .immagine_dentro{
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.sinistra #pos_3{
  margin-left: calc(var(--width_pezzi)*1.2);
  margin-top: calc(var(--width_pezzi)*2.3);
}

.sinistra #pos_3 .immagine_dentro{
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}

.sinistra #pos_4{
  margin-left: calc(var(--width_pezzi)*2);
  margin-top: calc(var(--width_pezzi)*3);
}

.sinistra #pos_4 .immagine_dentro{
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

.destra #pos_5{
  margin-left: calc(var(--width_pezzi)*4);
  margin-top: calc(var(--width_pezzi)*-0.1);
}

.destra #pos_5 .immagine_dentro{
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}

.destra #pos_6{
  margin-left: calc(var(--width_pezzi)*4);
  margin-top: calc(var(--width_pezzi)*0.85);
}

.destra #pos_6 .immagine_dentro{
  -webkit-transform: rotate(110deg);
  -moz-transform: rotate(110deg);
  -o-transform: rotate(110deg);
  -ms-transform: rotate(110deg);
  transform: rotate(110deg);
}

.destra #pos_7{
  margin-left: calc(var(--width_pezzi)*3.65);
  margin-top: calc(var(--width_pezzi)*1.8);
}

.destra #pos_7 .immagine_dentro{
  -webkit-transform: rotate(115deg);
  -moz-transform: rotate(115deg);
  -o-transform: rotate(115deg);
  -ms-transform: rotate(115deg);
  transform: rotate(115deg);
}

.drag-item img{
  width:100%;
}

.drag-start {
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
}
.drag-enter {
  opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -o-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
}

.immagine_base{
  width: 100%;
  max-width: 600px;
  max-height: 600px;
  position: relative;
  /*overflow: hidden;*/
}

.immagine_base_img{
  width: 100%;
  height: auto;
  position: relative;
}

.immagine_dentro{
  width: 100%;
  height: var(--height_pezzi);
  background-repeat: no-repeat;
  background-position: center top;
  background-size:contain;
}

.immagine_dentro.attribute_pa_charm{
  width: 166%;
  height: calc(var(--height_pezzi)*2.74);
  margin-left: -30%;
  -webkit-transform-origin50% 20%;
  transform-origin: 50% 20%;
}

.attivo{
  border:1px solid #ff6600;
}

#navigatore, .navigatore_del{
  font-size:1.5em;
  display: none;
  position: relative;
  width:46px
}

.navigatore_del{
  margin:auto;
  top:0;
}

#navigatore div{
  float:left;
}

#sposta_sinistra{
  margin-left:0;
  margin-right:0;
}

#sposta_destra{
  margin-right:0;
  margin-left:0;
}

#rimuovi:hover, #sposta_sinistra:hover, #sposta_destra:hover{
  background-color: rgb(255, 102, 0, 0.5);
  border-radius: 5px;
}

#menu_action{
  margin-top: 10px;
}
/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-border {
  position:relative;
  padding: 3px 7px;
  margin:1em 0 3em;
  border:3px solid #ff6600;
  color:#333;
  background:#fff;
  /* css3 */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  width: 130px;
}

/* Variant : for left positioned triangle
------------------------------------------ */

.triangle-border.left {
  margin-left:30px;
}

/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-border.right {
  margin-right:30px;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-border:before {
  content:"";
  position:absolute;
  bottom:-20px; /* value = - border-top-width - border-bottom-width */
  left:40px; /* controls horizontal position */
  border-width:20px 20px 0;
  border-style:solid;
  border-color:#ff6600 transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* creates the smaller  triangle */
.triangle-border:after {
  content:"";
  position:absolute;
  bottom:-13px; /* value = - border-top-width - border-bottom-width */
  left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
  border-width:13px 13px 0;
  border-style:solid;
  border-color:#fff transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* Variant : right
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.tutti:before {
  top: 10px;
  bottom: auto;
  left: auto;
  right: -20px;
  border-width: 8px 0 8px 20px;
  border-color: transparent #ff6600;
}

/* creates the smaller  triangle */
.triangle-border.tutti:after {
  top:13px; /* value = (:before top) + (:before border-top) - (:after border-top) */
  bottom:auto;
  left:auto;
  right:-15px; /* value = - border-left-width - border-right-width */
  border-width:5px 0 5px 15px;
  border-color:transparent #fff;
}