.graphicwid1 {
    width: 90%;
    margin: 0px;
    border: solid 0px #dddbdb;
    }

.fastyle {font-size: 24px;}
.contactp{font-weight: normal; font-size: 20px;}

.person {width: 43%; }

.wid {width: 20%}
{font-weight: bold, font-size: 5rem;}

.contacta {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);}

.contactbuttonbundle {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  border: none;
  outline: 0;
  display: inline-block;
  color: white;
  background-color: #33ab44;
  text-align: center;
  cursor: pointer;
  width: 95%;
  font-size: 16px;
  margin: 0px;
  border-radius: 4px;

}
.contactbuttonbundle:hover {color: white;}

ol.bundle {
  width: min(100rem, 99%);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  list-style: none;
  counter-reset: cardnr;
  justify-content: center;
  color: #000204;

}

li.bundle{
  --fontColor: white;
  --width: 12em;
  --inlineP: 0.5rem;
  --borderR: 4rem;
  --arrowW: 2rem;
  --arrowH: 1.5rem;

  /**counter-increment: cardnr;*/
  width: calc(var(--width) - var(--inlineP) * 2);
  display: grid;
  grid-template:
    "icon" var(--borderR)
    "descr"
    "title" 1fr;
    

   
  margin-inline: var(--inlineP);
  margin-bottom: calc(var(--borderR));
  position: relative;
}
li .icon,
li .title,
li .descr {
  background: #f3f4f5;
  padding-bottom: 1rem;
  padding: 0rem;
  color: #333;
  line-height: 22px;
}

li .title
{
  filter: drop-shadow(0.150rem 0.150rem 0.100rem rgba(0, 0, 0, 0.25));
 
}

li .icon,
li .title {
  color: var(--accent-color);
  text-align: center;
  padding-bottom: 0rem;

}

.prid:link, .prid:visited { position: relative; z-index: 1000; color: #fff; font-size: 16px; top: 70%; 
	font-weight: bold;  }
	
	
	.prid:hover, .prid:active { position: relative; z-index: 2000; color: #fff; font-size: 16px; padding-top: 70%; padding-left: 0%;
	font-weight: bold;  }


li .icon {
  grid-area: icon;
  font-size: 2rem;
  display: grid;
  place-items: center;
  border-radius: var(--borderR) 0 0 0;
  position: relative;
}

li.bundle .title {
  grid-area: title;
  font-size: 1.5rem;
  font-weight: bold;
    z-index: 1000;
    padding-top: 23%;
  
   padding-right: 50%;
}

li.bundle .descr {
	color: #000204;
  grid-area: descr;
  font-size: 1.8rem;
  text-align: center;
  font-weight: bold;
    z-index: 1000;
     padding: 12px;
}
li.bundle .title::before {
  content: "";
  width: var(--arrowW);
  height: var(--arrowH);
  position: absolute;
  right: 1.7rem;
  top: 100%;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 50% 100%);

  
}

li.bundle::after {

  content: counter(cardnr, decimal-leading-zero);
  position: absolute;
  z-index: 1;
left: calc(var(--inlineP) * -1.7);
  right: calc(var(--inlineP) * -1.7);
  top: var(--borderR);
  bottom: calc(var(--borderR) * -1);

  /*display: flex;*/
  align-items: flex-end;
  background: var(--accent-color);
  background-image: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.25),
    transparent 25% 75%,
    rgba(0, 0, 0, 0.25)
  );
  border-radius: 0 0 var(--borderR) 0;

  --pad: 2rem;
  padding: var(--pad);
  font-size: calc(var(--borderR) - var(--pad) * 2);
  color: white;
  
}
li.bundle::before {
  content: "";
  position: absolute;
  height: var(--borderR);
  top: calc(100% + var(--borderR) - 2px);
  left: calc(var(--inlineP) * -1);
  right: calc(var(--inlineP) * -1);
  border-radius: 0 var(--borderR) 0 0;

  background-image: linear-gradient(var(--accent-color), transparent 60%);
  opacity: 0.5;
  filter: blur(2px);
}


 .detail1{
	text-align: left;
	 position: absolute;
	  
	color: #333; 

    text-decoration: none; bottom: 0; font-size: 13px; bottom: 0; width: 230px; padding-bottom: 21px;}

.detail1:link, .detail1:visited {
	text-align: left;
	 position: absolute;
	  display: inline-block;
	  
	color: #333; 
    text-decoration: none; bottom: 0; font-size: 13px; bottom: 0; width: 230px; padding-bottom: 10px;}

.detail1:hover, .detail1:active {
color: #333; 
   text-decoration: none; bottom: 0; font-size: 13px; bottom: 0; padding-top: 20px;}

}



@media screen and (max-width: 1000px) { 
.detail:link, .detail:visited {
color: #ffffff; line-height: 230px; margin-left: -40px; text-align: center; position: absolute; z-index: 2000;
   font-weight: bold;  text-decoration: none; border: solid 0px red; }

.detail:hover, .detail:active {
	color: #ffffff; top: 230px; margin-left: -40px; text-align: center; position: absolute; z-index: 1000;
    text-decoration: underline;
    font-weight: bold;
}
	
	 @media only screen and (max-width: 400px)) {
	
	li.bundle .title::before {
	border: solid red;
  content: "";
  width: var(--arrowW);
  height: var(--arrowH);
  position: absolute;
  right: 1.7rem;
  top: 60%;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  
}
	}