/* Frontend stile  */

/* .container-grid-ns-images {
  --repeat: auto-fit;
}
@media (min-width: calc(250px * 4)) {
  .grid {
    --repeat: 4;
  }
}

.container-grid-ns-images {
  display: grid;
  grid-template-columns: repeat(var(--repeat, auto-fit), minmax(calc(250px * 1), 1fr));
  grid-gap: 12px;
  position: relative;
  min-height: 800px;
  grid-auto-flow: dense;
}

.grid-ns--img-ns-pin {
  position: relative;
} */

.container-grid-ns-images {
  display: grid;
  grid-template-columns: 4fr 2fr 2fr;
  grid-gap: 12px;
  position: relative;
  min-height: 800px;
  grid-auto-flow: dense;
}

.grid-ns--img-ns-pin {
  position: relative;
}

.grid-ns--img-ns-pin:nth-child(1) {
  grid-row: span 5;
  grid-column: span 1;
}

.grid-ns--img-ns-pin:nth-child(2) {
  grid-row: span 2;
  grid-column: span 1;
}

.grid-ns--img-ns-pin:nth-child(3) {
  grid-row: span 3;
  grid-column: span 1;
}

.grid-ns--img-ns-pin:nth-child(4) {
  grid-row: span 3;
  grid-column: span 1;
}

.grid-ns--img-ns-pin:nth-child(5) {
  grid-row: span 2;
  grid-column: span 1;
}

.grid-ns--img-ns-pin {
  grid-column: auto;
  grid-row: auto;
}

.dot-ns-grid {
  background: white;
  border-radius: 50%;
  margin: 10px;
  height: 20px;
  width: 20px;
  /*  box-shadow: 0 0 0 0 rgba(255, 255, 255, 1); */
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.1);
  transform: scale(1);
  cursor: pointer;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.1);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 9px rgba(255, 255, 255, 0.2);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.1);
  }
}

.dot-ns-grid.active {
  background: var(--e-global-color-secondary);
  box-shadow: 0 0 0 8px rgba(236, 46, 56, 0.1);
  animation: none;
  animation: pulsered 1.5s infinite;
}

@keyframes pulsered {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 8px rgba(236, 46, 56, 0.1);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 9px rgba(236, 46, 56, 0.2);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 8px rgba(236, 46, 56, 0.1);
  }
}

.elementor-kit-10 .richiedi-info-pop-up-pin-grid .button-richiedi-info {
  background: var(--e-global-color-secondary);
  outline: none;
  border: none;
  padding: 15px 30px;
  border-radius: 30px;
  font-weight: 400 !important;
  font-size: 15px;
  cursor: pointer;
  color: #fff;
}

.img-pop-up-pin-grid {
  width: 35%;
}

.img-pop-up-pin-grid img {
  width: 200px;
}

.container-dati-prodotto-pop-up {
  min-width: 600px;
  max-width: 600px;
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 15px;
  padding: 30px;
  z-index: 1;
  position: absolute;
}

.container-dati-prodotto-pop-up.destra {
  left: 20px;
}

.container-dati-prodotto-pop-up.sinistra {
  right: 20px;
}

.text-pop-up-pin-grid {
  width: 65%;
  text-align: left;
}

.titolo-pop-up-pin-grid {
  /* color: var(--e-global-color-primary); */
  font-family: var(--e-global-typography-primary-font-family), Sans-serif;
  font-size: 24px;
  font-weight: var(--e-global-typography-primary-font-weight);
  line-height: var(--e-global-typography-primary-line-height);
}

.descrizione-pop-up-pin-grid {
  font-size: 14px;
}

.scarica-documento-pop-up-pin-grid {
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 35%;
}

.scarica-documento-pop-up-pin-grid p {
  position: relative;
  padding-left: 43px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.scarica-documento-pop-up-pin-grid > p::before {
  content: "";
  background: url(/wp-content/uploads/2024/04/file_icon.png);
  background-size: 30px;
  background-position: center;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  position: absolute;
  left: 0;
  top: -4px;
}

.scarica-documento-pop-up-pin-grid,
.richiedi-info-pop-up-pin-grid {
  margin-top: 15px;
}

.text-pop-up-pin-grid,
.richiedi-info-pop-up-pin-grid {
  padding-left: 40px;
}

.brand-pop-up-pin-grid {
  text-transform: uppercase;
}

.container-dati-prodotto-pop-up {
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

.container-dati-prodotto-pop-up.active {
  opacity: 1;
  pointer-events: all;
}

.croce {
  position: absolute;
}

.container-dati-prodotto-pop-up .croce::before,
.container-dati-prodotto-pop-up .croce::after {
  width: 54%;
  height: 2px;
  background-color: var(--e-global-color-primary);
  content: "";
  display: block;
  top: 16px;
  position: absolute;
  cursor: pointer;
}

.container-dati-prodotto-pop-up .croce {
  position: absolute;
  top: 2%;
  right: 1%;
  width: 11px;
  height: 11px;
  justify-content: center;
  align-items: center;
  display: flex;
  cursor: pointer;
  z-index: 1;
  border-radius: 50%;
  padding: 17px;
}

.container-dati-prodotto-pop-up .croce::before {
  transform: rotate(45deg);
}

.container-dati-prodotto-pop-up .croce::after {
  transform: rotate(-45deg);
}

.container-descrizione-image {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  background: #fff;
  min-width: 380px;
  max-width: 380px;
  border-radius: 15px;
  padding: 30px;
  text-align: left;
  transition: all 0.3s ease;
}

.container-descrizione-image.active {
  opacity: 1;
  z-index: 2;
  position: relative;
  pointer-events: all;
}

.info-container-grid-ns {
  position: absolute;
  right: 2%;
  top: 2%;
}

.info-container-grid-ns .titolo-info {
  font-family: var(--e-global-typography-primary-font-family), Sans-serif;
  font-size: 24px;
  font-weight: var(--e-global-typography-primary-font-weight);
  line-height: var(--e-global-typography-primary-line-height);
}

.info-container-grid-ns .descrizione-info {
  font-size: 14px;
}

.icon-plus-info {
  position: relative;
  margin-left: auto;
  height: 30px;
  width: 30px;
  margin-top: 18px;
  margin-right: 18px;
  cursor: pointer;
  z-index: 1;
}

.icon-plus-info::before {
  content: "";
  background: url(/wp-content/uploads/2024/04/plus_icon.png);
  background-size: 30px;
  background-position: center;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  position: absolute;
  left: 0;
  top: 0;
}

.icon-minus-info {
  position: absolute;
  margin-left: auto;
  cursor: pointer;
  width: 30px;
  height: 30px;
  top: 4%;
  right: 2%;
}

.icon-minus-info::before {
  content: "";
  background: url(/wp-content/uploads/2024/07/minus_icon.png);
  background-size: 30px;
  background-position: center;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0;
  top: 0;
}

/* 
  --e-global-typography-secondary-font-family
  */
@media only screen and (max-width: 767px) {
  .info-container-grid-ns.destra-mobile {
    position: absolute;
    right: auto;
    top: 2%;
  }

  .grid-ns--img-ns-pin:nth-child(1) {
    grid-row: span 5;
    grid-column: span 3;
  }

  .grid-ns--img-ns-pin:nth-child(2) {
    grid-row: span 11;
    grid-column: span 1;
  }

  .grid-ns--img-ns-pin:nth-child(3) {
    grid-row: span 5;
    grid-column: span 2;
  }

  .grid-ns--img-ns-pin:nth-child(4) {
    grid-row: span 6;
    grid-column: span 2;
  }

  .grid-ns--img-ns-pin:nth-child(5) {
    grid-row: span 5;
    grid-column: span 3;
  }

  /*  */
  .container-dati-prodotto-pop-up {
    min-width: 270px;
    max-width: 270px;
  }

  .container-dati-prodotto-pop-up {
    display: flex;
    flex-direction: column;
  }

  body .container-dati-prodotto-pop-up,
  body .container-dati-prodotto-pop-up.destra,
  body .container-dati-prodotto-pop-up.sinistra {
    left: -118px;
    top: -425px;
  }

  body .container-dati-prodotto-pop-up.sinistra-mobile,
  body .container-dati-prodotto-pop-up.destra.sinistra-mobile,
  body .container-dati-prodotto-pop-up.sinistra.sinistra-mobile {
    left: -232px;
  }

  body .container-dati-prodotto-pop-up.destra-mobile,
  body .container-dati-prodotto-pop-up.destra.destra-mobile,
  body .container-dati-prodotto-pop-up.sinistra.destra-mobile {
    left: 0;
  }

  .text-pop-up-pin-grid,
  .scarica-documento-pop-up-pin-grid {
    width: 100%;
  }

  .text-pop-up-pin-grid,
  .richiedi-info-pop-up-pin-grid {
    padding-left: 0;
  }

  .richiedi-info-pop-up-pin-grid {
    width: max-content;
    margin-top: 25px;
  }

  .titolo-pop-up-pin-grid {
    font-size: 20px;
    line-height: 1.2;
    margin-bottom: 12px;
  }

  .descrizione-pop-up-pin-grid {
    font-size: 13px;
  }

  .brand-pop-up-pin-grid {
    margin-top: 20px;
  }

  .container-dati-prodotto-pop-up .croce {
    right: 3%;
  }
}