.pricingdiv{
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9em;
  justify-content: center;
}

.pricingdiv ul.theplan{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  color: black;
  width: 20em; /* width of each table */
  margin-right: 20px; /* spacing between tables */
  margin-bottom: 2em;
  border-left: 1px solid var(--contrast-3);
  border-right: 1px solid var(--contrast-3);
  transition: all 100ms ease-in-out;
}

.pricingdiv ul.theplan:hover{ /* when mouse hover over pricing table */
  transform: scale(1.05);
  transition: all 100ms ease-in-out;
  z-index: 100;
  box-shadow: 0 0 10px gray;
}

.pricingdiv ul.theplan .center{
  margin: 0 auto;
  text-align: center;
}

.pricingdiv .theplan div.image {
  background: radial-gradient(rgb(255, 255, 255), rgb(250,250,250), rgb(242, 242, 242));
  padding: 20px 20px 0;
}

.pricingdiv ul.theplan img{
  max-width: 100%;
  height: auto;
}

.pricingdiv ul.theplan li{
  padding: 10px 10px;
  position: relative;
  border-bottom: 1px solid #eee;
  text-align: center;
}

.pricingdiv ul.theplan li:nth-of-type(3){
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  border-bottom: 2px solid var(--blok-nero);
  height: 4.5em;
}

.pricingdiv.detectabili ul.theplan li:nth-of-type(3){
  height: 6.5em;
}

.pricingdiv.detectabili ul.theplan li hr.detectabili-dtm {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  margin-top: 10px;
  width: 110px;
}

.pricingdiv ul.theplan li.footer{
  border-bottom: 1px hidden #eee;
}

.pricingdiv ul.theplan li:last-of-type {
  border-bottom: 1px hidden #eee;
}

.pricingdiv ul.theplan li.title{
  font-weight: bold;
  text-align: center;
  padding: 0;
  background: var(--contrast-2);
  color: white;
  box-shadow: 0 -10px 5px rgba(0,0,0,.1) inset;
  text-transform: uppercase;
}

.pricingdiv ul.theplan:nth-of-type(2) li.title{
  background: var(--contrast-3);
  color: white;
}
    
.pricingdiv ul.theplan:nth-of-type(3) li.title{
  background: var(--contrast-2);
  color: white;
}
    
.pricingdiv ul.theplan:nth-of-type(4) li.title{
  background: var(--contrast-3);
  color: white;
}

.pricingdiv ul.theplan:nth-of-type(5) li.title{
  background: var(--contrast-2);
  color: white;
}

.pricingdiv ul.theplan li b{
  text-transform: uppercase;
}
.pricingdiv ul.theplan li.title b{
  font-size: 250%;
}

.pricingdiv ul.theplan li.title b .sub-title {
  font-size: 50%;
  margin-left: 1rem;
}

.pricingdiv ul.theplan:last-of-type{ /* remove right margin in very last table */
  margin-right: 0;
}

/*very last LI within each pricing UL */
.pricingdiv ul.theplan li:last-of-type{
  text-align: center;
  margin-top: auto; /*align last LI (price botton li) to the very bottom of UL */
}  

.pricingdiv a.pricebutton{
  background: var(--accent);
  text-decoration: none;
  padding: 10px 30px;
  display: inline-block;
  margin: 10px auto;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
}

.pricingdiv_ergonomic a.pricebutton.dtm {
  background: var(--blu-detectabile);
}

@media only screen and (max-width: 1024px) {
  .pricingdiv {
    justify-content: center;
  }

  .pricingdiv ul.theplan{ 
    width: 17em;
    border-bottom: 1px solid var(--contrast-3);
    border-top: 1px solid var(--contrast-3);
  }
}

@media only screen and (max-width: 600px) {
  .pricingdiv {
    column-gap: 3%;
    font-size: 2rem;
  }
  .pricingdiv ul.theplan{
    border-radius: 0;
    width: 48.5%;
    margin-right: 0;
  }
  
  .pricingdiv ul.theplan:hover{
    transform: none;
    box-shadow: none;
  }
  
  .pricingdiv a.pricebutton{
    padding: 10px 20px;
    display: block;
  }

}