/* ============================================================
BNI PERUGIA — CORE VALUES / V4 REBUILT FINALE
CSS unico definitivo
Gestisce:
- layout 4x2 desktop
- 2x4 tablet
- 1 colonna mobile
- icone
- filigrana numerica
- hover
- tipografia
============================================================ */

.bni-core-v4,
.bni-core-v4 * {
  box-sizing: border-box !important;
}

.bni-core-v4 {
  width: 100% !important;
  max-width: 1220px !important;
  margin: 0 auto !important;
  padding: 44px 20px 60px !important;
}

/* ===========================
   HEADER
   =========================== */

.bni-core-v4-head {
  max-width: 980px !important;
  margin: 0 0 34px !important;
  text-align: left !important;
}

.bni-core-v4-head h2 {
  margin: 0 !important;
  padding: 0 !important;

  color: #292727 !important;

  font-size: 40px !important;
  line-height: 1.10 !important;
  font-weight: 700 !important;

  text-align: left !important;
  text-transform: none !important;
  text-decoration: none !important;

  border: 0 !important;
}

.bni-core-v4-head h2 span {
  color: #cf2030 !important;
  text-decoration: none !important;
  border: 0 !important;
}

.bni-core-v4-head h2:before,
.bni-core-v4-head h2:after {
  display: none !important;
  content: none !important;
}

/* ===========================
   RIGHE BOOTSTRAP BLINDATE
   =========================== */

.bni-core-v4-row {
  margin-left: -9px !important;
  margin-right: -9px !important;
}

.bni-core-v4-row:before,
.bni-core-v4-row:after {
  content: " " !important;
  display: table !important;
}

.bni-core-v4-row:after {
  clear: both !important;
}

.bni-core-v4-col {
  padding: 9px !important;
}

/* ===========================
   CARD
   =========================== */

.bni-core-v4-card {
  position: relative !important;

  height: 350px !important;

  margin: 0 !important;
  padding: 24px 22px 22px !important;

  background: #ffffff !important;

  border: 1px solid #ececec !important;
  border-top: 4px solid #cf2030 !important;
  border-radius: 10px !important;

  box-shadow: 0 10px 25px rgba(0,0,0,.08) !important;

  overflow: hidden !important;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease !important;
}

/* ===========================
   NUMERO GRANDE IN FILIGRANA
   =========================== */

.bni-core-v4-watermark {
  position: absolute !important;
  top: 10px !important;
  right: 15px !important;

  z-index: 0 !important;

  color: #f1f1f1 !important;

  font-size: 68px !important;
  line-height: 1 !important;
  font-weight: 800 !important;

  pointer-events: none !important;

  transition:
    transform .25s ease,
    color .25s ease !important;
}

/* ===========================
   ICONE
   =========================== */

.bni-core-v4-icon {
  position: relative !important;
  z-index: 1 !important;

  width: 68px !important;
  height: 68px !important;

  margin: 0 0 18px !important;
  padding: 0 !important;

  transition: transform .25s ease !important;
}

.bni-core-v4-icon img {
  display: block !important;

  width: 68px !important;
  height: 68px !important;

  max-width: 68px !important;
  max-height: 68px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  object-fit: contain !important;
}

/* ===========================
   TITOLI CARD
   =========================== */

.bni-core-v4-card h3 {
  position: relative !important;
  z-index: 1 !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #cf2030 !important;

  font-size: 19px !important;
  line-height: 1.22 !important;
  font-weight: 700 !important;

  text-align: left !important;
  text-transform: none !important;
  text-decoration: none !important;

  border: 0 !important;
}

.bni-core-v4-card h3:before,
.bni-core-v4-card h3:after {
  display: none !important;
  content: none !important;
}

/* ===========================
   LINEA ROSSA
   =========================== */

.bni-core-v4-line {
  position: relative !important;
  z-index: 1 !important;

  width: 42px !important;
  height: 3px !important;

  margin: 10px 0 16px !important;
  padding: 0 !important;

  background: #cf2030 !important;

  transition: width .25s ease !important;
}

/* ===========================
   TESTO CARD
   =========================== */

.bni-core-v4-card p {
  position: relative !important;
  z-index: 1 !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #44474a !important;

  font-size: 14px !important;
  line-height: 1.52 !important;

  text-align: left !important;
}

/* ===========================
   HOVER DESKTOP
   =========================== */

@media (hover:hover) and (pointer:fine) {

  .bni-core-v4-card:hover {
    transform: translateY(-8px) !important;

    box-shadow: 0 18px 38px rgba(0,0,0,.14) !important;

    border-color: #e4c2c6 !important;
    border-top-color: #cf2030 !important;
  }

  .bni-core-v4-card:hover .bni-core-v4-icon {
    transform: translateY(-2px) scale(1.08) !important;
  }

  .bni-core-v4-card:hover .bni-core-v4-watermark {
    transform: translateX(-4px) scale(1.05) !important;
    color: #e9e9e9 !important;
  }

  .bni-core-v4-card:hover .bni-core-v4-line {
    width: 62px !important;
  }
}

/* ===========================
   TABLET
   2 CARD PER RIGA
   =========================== */

@media only screen and (max-width: 991px) {

  .bni-core-v4-card {
    height: 325px !important;
  }

  .bni-core-v4-col:nth-child(2n+1) {
    clear: left !important;
  }

  .bni-core-v4-head h2 {
    font-size: 34px !important;
    line-height: 1.13 !important;
  }
}

/* ===========================
   MOBILE
   1 CARD PER RIGA
   =========================== */

@media only screen and (max-width: 767px) {

  .bni-core-v4 {
    padding: 30px 12px 42px !important;
  }

  .bni-core-v4-head {
    margin-bottom: 28px !important;
  }

  .bni-core-v4-head h2 {
    font-size: 29px !important;
    line-height: 1.16 !important;
  }

  .bni-core-v4-col {
    float: none !important;
    width: 100% !important;
    padding: 7px !important;
    clear: both !important;
  }

  .bni-core-v4-card {
    height: auto !important;
    min-height: 270px !important;
  }

  .bni-core-v4-watermark {
    font-size: 60px !important;
  }

  .bni-core-v4-icon,
  .bni-core-v4-icon img {
    width: 60px !important;
    height: 60px !important;

    max-width: 60px !important;
    max-height: 60px !important;
  }

  .bni-core-v4-card h3 {
    font-size: 18px !important;
  }

  .bni-core-v4-card p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
}