:root {
  --col-primary: #296eb3;
  --col-secondary: #003b81;
  --col-background: #e8e8e8;
  --col-light: #e8e8e8;
  --col-dark: #022f64;
  --col-free: #7dbaff;
  --col-bronze: #b85a24;
  --col-silver: #8a8a8a;
  --col-gold: #e2a922;
}

 
.price_table {
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  align-items: start;
  column-gap: 2rem;
  row-gap: 2rem;
  max-width: 80em;
}

.package {
  border-radius: 4px;
  background: white;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  position: relative;
}
.package h2 {
  margin: 0;
  padding: 1rem;
  background: var(--col-primary);
  font-size: 1.2em;
  text-align: center;
  font-weight: normal;
  color: white;
  position: static;
}
.package h2::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 0.4rem;
  left: 0;
  bottom: 0;
}
.package .price {
  padding: 0.2rem 1rem;
  background: linear-gradient(45deg, var(--col-secondary) 0%, var(--col-dark) 100%);
  color: white;
  text-shadow: 0 4px 0 var(--col-dark);
}
.package p {
  padding: 1rem;
}
.package .price {
  font-size: 1.2em;
  font-weight: normal;
  text-align: center;
  box-shadow: inset 0 10px 4px -6px rgba(0, 0, 0, 0.1);
}
.package .big {
  display: inline;
  font-size: 1em;
  font-weight: 700;
}
.package ul {
  list-style: none;
  padding: 0 0 1rem 0;
  margin: 0;
  border-bottom: 1px solid var(--col-primary);
}
.package li {
  padding: 0.8em 1em;
  font-size: 0.9em;
}
.package li:nth-child(odd) {
  background: var(--col-light);
}
.package button {
  cursor: pointer;
  padding: 1em 2em;
  font-size: 1rem;
  display: block;
  color: white;
  margin: 1rem auto;
  border: none;
  border-radius: 5px;
  background: linear-gradient(0deg, var(--col-secondary) 0%, var(--col-primary) 100%);
  transition: all 0.2s;
}
.package button:hover, .package button:focus {
  background: linear-gradient(0deg, var(--col-secondary) 0%, var(--col-dark) 100%);
  box-shadow: 0 0 0 4px white, 0 0 0 8px var(--col-primary);
  outline: 0;
}
.package .banner {
  background: linear-gradient(90deg, #0c0303 0%, #cb394e 50%, #f7f7f7 100%);
  transform: rotate(-45deg);
  position: absolute;
  z-index: 1;
  padding: 0.5rem 4rem;
  top: 2rem;
  left: -4rem;
  border: 2px solid #f7f7f7;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
}

.package .banner2 {
  background: linear-gradient(90deg, #6b741a 0%, #e9de60 50%, #bb092c 100%);
  transform: rotate(-45deg);
  position: absolute;
  z-index: 1;
  padding: 0.5rem 4rem;
  top: 2rem;
  left: -4rem;
  border: 2px solid #f7f7f7;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
}

.package .banner3 {
  background: linear-gradient(90deg, #261f85 0%, #7aafe3 50%, #d52144 100%);
  transform: rotate(-45deg);
  position: absolute;
  z-index: 1;
  padding: 0.5rem 4rem;
  top: 2rem;
  left: -4rem;
  border: 2px solid #f7f7f7;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
}




.package_free h2::after {
  background: var(--col-free);
  background: linear-gradient(90deg, var(--col-free) 0%, white 50%, var(--col-free) 100%);
}

.package_bronze h2::after {
  background: linear-gradient(90deg, var(--col-bronze) 0%, white 50%, var(--col-bronze) 100%);
}

.package_silver h2::after {
  background: linear-gradient(90deg, var(--col-silver) 0%, white 50%, var(--col-silver) 100%);
}

.package_gold h2::after {
  background: linear-gradient(90deg, var(--col-gold) 0%, white 50%, var(--col-gold) 100%);
}











body { margin: 0 !important; padding: 0 !important; width: 100% !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important;}
.container { position: relative; overflow: hidden; height: 50.45vw; background-image: url(arkaplan.png); background-size: cover; }
input { display: none; }
p { margin: 0; }
.button { color: #e7c55f; font-weight: bold; font-size: 20px; background-color: #e7c55f; opacity:0.6; display: block; padding: 8px 16px; border-radius: 100%; cursor: pointer; animation: fadein .5s; animation: pulse 1.5s infinite; }
.content { background: white; padding: 1rem 1rem 2rem 1rem; text-align: center; display: none; margin: 10%; border-radius: 8px; box-shadow: 0 4px 2px -2px rgba(211,47,47,0); }
 

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
 
  
.content { background: white; padding: 1rem 1rem 2rem 1rem; text-align: center; display: none; margin: 0%; border-radius: 8px; box-shadow: 0 4px 2px -2px rgba(211,47,47,0); }

 
}
  
/* Smartphones (landscape) ----------- */
 
@media only screen and (min-width : 321px) {
 
.content { background: white; padding: 1rem 1rem 2rem 1rem; text-align: center; display: none; margin: 0%; border-radius: 8px; box-shadow: 0 4px 2px -2px rgba(211,47,47,0); }



}
/* Smartphones (portrait) ----------- */
 
@media only screen and (max-width : 320px) {
 
 
.content { background: white; padding: 1rem 1rem 2rem 1rem; text-align: center; display: none; margin: 0%; border-radius: 8px; box-shadow: 0 4px 2px -2px rgba(211,47,47,0); }
 
 
 
}
/* iPads (portrait and landscape) ----------- */
 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
.content { background: white; padding: 1rem 1rem 2rem 1rem; text-align: center; display: none; margin: 0%; border-radius: 8px; box-shadow: 0 4px 2px -2px rgba(211,47,47,0); } 
 
 
 
 
}
 
/* iPads (landscape) ----------- */
 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
 
.content { background: white; padding: 1rem 1rem 2rem 1rem; text-align: center; display: none; margin: 0%; border-radius: 8px; box-shadow: 0 4px 2px -2px rgba(211,47,47,0); } 

 
 
 
}
/* iPads (portrait) ----------- */
 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
 
.content { background: white; padding: 1rem 1rem 2rem 1rem; text-align: center; display: none; margin: 0%; border-radius: 8px; box-shadow: 0 4px 2px -2px rgba(211,47,47,0); } 
 
 
 
}
/* Desktops and laptops ----------- */
 
@media only screen and (min-width : 1224px) {
.content { background: white; padding: 1rem 1rem 2rem 1rem; text-align: center; display: none; margin: 0%; border-radius: 8px; box-shadow: 0 4px 2px -2px rgba(211,47,47,0); } 
 
 
 
}
/* Large screens ----------- */
 
@media only screen and (min-width : 1824px) {
  
.content { background: white; padding: 1rem 1rem 2rem 1rem; text-align: center; display: none; margin: 10%; border-radius: 8px; box-shadow: 0 4px 2px -2px rgba(211,47,47,0); } 



}
  
/* iPhone 5 (portrait & landscape)----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
  
.content { background: white; padding: 1rem 1rem 2rem 1rem; text-align: center; display: none; margin: 0%; border-radius: 8px; box-shadow: 0 4px 2px -2px rgba(211,47,47,0); } 

 


}
  
/* iPhone 5 (landscape)----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
  
.content { background: white; padding: 1rem 1rem 2rem 1rem; text-align: center; display: none; margin: 0%; border-radius: 8px; box-shadow: 0 4px 2px -2px rgba(211,47,47,0); } 


 
 
}
  
/* iPhone 5 (portrait)----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {
  
.content { background: white; padding: 1rem 1rem 2rem 1rem; text-align: center; display: none; margin: 0%; border-radius: 8px; box-shadow: 0 4px 2px -2px rgba(211,47,47,0); } 

 
} 















.cross { font-weight: bold; }
#b1 { position: absolute; left: 45%; top: 10%; }
#b2 { position: absolute; left: 55%; top: 19%; }
#b3 { position: absolute; left: 44%; top: 19%; }
#b4 { position: absolute; left: 47%; top: 27%; }
#b5 { position: absolute; left: 23%; top: 24%; }
#b6 { position: absolute; left: 16%; top: 38%; }
#b7 { position: absolute; left: 26%; top: 34%; }
#b8 { position: absolute; left: 32%; top: 44%; }
#b9 { position: absolute; left: 38%; top: 53%; }
#b10 { position: absolute; left: 32%; top: 56%; }
#b11 { position: absolute; left: 28%; top: 66%; }
#b12 { position: absolute; left: 15%; top: 66%; }
#b13 { position: absolute; left: 30%; top: 82%; }
#b14 { position: absolute; left: 35%; top: 73%; }
#b15 { position: absolute; left: 42%; top: 67%; }
#b16 { position: absolute; left: 42%; top: 39%; }
#b17 { position: absolute; left: 52%; top: 48.5%; }
#b18 { position: absolute; left: 58%; top: 41%; }
#b19 { position: absolute; left: 60%; top: 58%; }
#b20 { position: absolute; left: 61%; top: 75%; }
#b21 { position: absolute; left: 73%; top: 35%; }
#b22 { position: absolute; left: 77%; top: 46%; }
#b23 { position: absolute; left: 83%; top: 54%; }
#b24 { position: absolute; left: 92%; top: 47%; }
#b25 { position: absolute; left: 83%; top: 39%; }

#input1:checked ~ #content1,
#input2:checked ~ #content2,
#input3:checked ~ #content3,
#input4:checked ~ #content4,
#input5:checked ~ #content5,
#input6:checked ~ #content6,
#input7:checked ~ #content7,
#input8:checked ~ #content8,
#input9:checked ~ #content9,
#input10:checked ~ #content10,
#input11:checked ~ #content11,
#input12:checked ~ #content12,
#input13:checked ~ #content13,
#input14:checked ~ #content14,
#input15:checked ~ #content15,
#input16:checked ~ #content16,
#input17:checked ~ #content17,
#input18:checked ~ #content18,
#input19:checked ~ #content19,
#input20:checked ~ #content20,
#input21:checked ~ #content21,
#input22:checked ~ #content22,
#input23:checked ~ #content23,
#input24:checked ~ #content24,
#input25:checked ~ #content25 { display: block !important; animation: fadein .5s; }
input:checked ~ label .button { display: none !important; animation: fadeout .5s; }
.button:hover { color: white; background: white; }
.cta { display: inline-block; background: #d32f2f; color: white; padding: 12px 24px; margin-top: 48px; border-radius: 24px; text-decoration: none; transition: all .3s ease; }
.cta:hover { text-decoration: underline !important; box-shadow: 0 0 0 6px rgba(211, 46, 46, 0.4); }
@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeout {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulse {
  from { box-shadow: 0 0 0 0px rgba(211, 47, 47); }
  to { box-shadow: 0 0 0 15px rgba(0, 0, 0, 0); }
}




/* inspired by this article/tutorial > https://curated.email/hotspots-in-email */