.cards__copy {
  text-align: center;
  padding-bottom: 3.5rem;
}
.cards__title {
  font-size: 48px;
  margin-bottom: 2rem;
}
.cards__copy-toggle {
  display: inline-flex;
  align-items: center;
  border-radius: 14px;
  border: 1px solid #EBF5F3;
  background: #FBFBFB;
  box-shadow: 0px 1px 5px 0px rgba(86, 110, 232, 0.10) inset;
  padding: 8px;
}
label.cards__copy-toggle-monthly,
label.cards__copy-toggle-annually {
  font-weight: 300;
  color: #797878;
  border: 1px solid transparent;
  padding: 5px 20px;
  font-size:24px;
}
#pricing__monthly:checked ~ * label.cards__copy-toggle-monthly,
#pricing__annually:checked ~ * label.cards__copy-toggle-annually,
.currency-list button.active{
  border-radius: 12px;
  border: 1px solid #EBF5F3;
  background: #22BAA0;
  box-shadow: 0px 6px 36px 0px rgba(181, 194, 251, 0.10);
  font-weight:700;
  color:white;
}
.cards__container {
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
.cards {
  background-color: hsl(210, 100%, 99%);
}
.pricing__choice,
.card__price-annually,
.card__price-monthly {
  display: none;
}
#pricing__annually:checked ~ * .card__price-annually,
#pricing__monthly:checked ~ * .card__price-monthly {
  display: flex;
}

.cards__list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  column-gap: 20px;
}
.card-wrapper {
  width: 100%;
  border-radius: 26px;
  padding: 40px;
  border: 1px solid #22BAA0;
  background: #FFF;
  box-shadow: 0px 26px 40px 0px rgba(188, 202, 255, 0.13);
}
.card-wrapper ul {list-style: none; padding:0; margin:0;}

.card__inner {
  display: flex;
  flex-direction: column;
  min-height: 480px;
}
#pricing .card__title {
  font-size: 44px;
  font-weight: 700;
  color:#1B223C;
  margin:0;
  text-align: left;
}
.card__price {
  margin-bottom: 2rem;
  font-size: 60px;
  font-weight: 700;
  padding: 20px 0 40px;
  color:#1B223C;
  border-bottom: 1px solid #E7EBFF;
  align-items: flex-end;
}
.card__price li {line-height: 1; margin-right:15px;}

.price__type {
  color: #3C3C3C;
  font-size: 24px;
  font-weight: 300;
}
.card__feature {
  font-size: 24px;
  display: flex;
  align-items: center;
  margin-bottom:10px;
}
.card__feature svg {margin-right:10px;}
.card__feature:last-of-type {
  margin-bottom: 2rem;
}

.pricing-link {
  display: flex;
  padding: 18px 44px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: 10px;
  background: #FFDB54;
  box-shadow: 0px 8px 36px 0px rgba(27, 34, 60, 0.16);
  font-weight: 700;
  color: #1B2835;
  font-size:24px;
  line-height: 1;
}
.pricing-link:hover {color:#1B2835}
.currency-list-wrapper {
  margin:3.5rem 0 0; display:inline-flex; align-items: center; padding:8px; border-radius: 14px;
  border: 1px solid #EBF5F3;
  background: #FBFBFB;
  box-shadow: 0px 1px 5px 0px rgba(86, 110, 232, 0.10) inset;
}
.currency-list-wrapper button {padding: 16px 20px; line-height: 1; background:transparent; border:0; font-size: 24px;
  font-weight: 300;}

.card__price-monthly li,
.card__price-annually li {
  display: none;
}

 /* Display the elements when .pricing__curr1 has active class */
 .pricing__curr1.active ~ .card__price-monthly li:first-of-type,
 .pricing__curr1.active ~ .card__price-annually:first-of-type {
   display: list-item;
 }

.card__price-monthly li:first-child,
.card__price-annually li:first-child {
  display: list-item;
} 

 /* Display the elements when .pricing__curr1 has active class */
 .pricing__curr2.active ~ .card__price-monthly li:first-of-type,
 .pricing__curr2.active ~ .card__price-annually:first-of-type {
   display: none;
 }

  /* Display the elements when .pricing__curr1 has active class */
  .pricing__curr2.active ~ .card__price-monthly li::nth-child(2),
  .pricing__curr2.active ~ .card__price-annually::nth-child(2) {
    display: list-item;
  }

.pricing-threecols .card__feature {font-size:20px; text-align: left;}
.pricing-threecols .cards__container .cards__list {display:grid; grid-template-columns: 1fr 1fr 1fr; gap:2em; align-items: flex-start;}
.pricing-threecols .cards__container .pricing-link { padding:14px 0 15px; color:white;
  border-radius:50px; box-shadow:none; width:100%; text-transform: uppercase; margin-top:1.5em;
}
.pricing-threecols .card-wrapper ul.features-list svg path {fill:#49A28B}
.pricing-threecols .card-wrapper ul.features-list.inapplicable svg path {fill:#CD4039;}
.pricing-threecols .card-wrapper ul.features-list svg {width:28px; height:28px;}
.pricing-threecols .card__price {padding:20px 0 0; border:0; width:100%; text-align:center; justify-content:center;}
.pricing-threecols .card__feature:last-of-type {margin-bottom: 0;}
.pricing-threecols .features-list.inapplicable {margin-top:10px;}

.pricing-threecols .card-wrapper {background: transparent; padding:0 40px 40px; max-width: auto;}

.pricing-threecols .card__price li {margin-right:5px;}

.pricing-threecols .card__inner {align-items: flex-start; min-height: auto;}
.pricing-threecols .cards__copy {padding-bottom: 4.5rem;}
.pricing-threecols#pricing .card__title.lngbtn, 
.pricing-threecols#pricing .card__title.lngbtn2,
.pricing-threecols#pricing .card__title.lngbtn3{
						position: relative;
						display:block;
						background: transparent;
						min-width:200px;
						height:60px;
						line-height:60px;
						text-align:center;
						font-size:34px;
						text-decoration:none;
						text-transform:uppercase;
						margin:-32px auto 0;
            z-index:99;
            color:white;
					}
				
					.pricing-threecols#pricing .card__title.lngbtn:before, 
          .pricing-threecols#pricing .card__title.lngbtn2:before, 
          .pricing-threecols#pricing .card__title.lngbtn3:before,
          .pricing-threecols#pricing .card__title.lngbtn:after, 
          .pricing-threecols#pricing .card__title.lngbtn2:after,
          .pricing-threecols#pricing .card__title.lngbtn3:after {
						width:200px;
						left: 0px;
						height:27px;
						z-index: -1;
						border-radius:5px;
						background:yellow;
					}
				
					.pricing-threecols#pricing .card__title.lngbtn.violet:before,
          .pricing-threecols#pricing .card__title.lngbtn2.violet2:before,
          .pricing-threecols#pricing .card__title.lngbtn3.violet3:before,
          .pricing-threecols#pricing .card__title.lngbtn.violet:after,
          .pricing-threecols#pricing .card__title.lngbtn2.violet2:after,
          .pricing-threecols#pricing .card__title.lngbtn3.violet3:after {
						border: 3px solid yellow;
					}
					
					.pricing-threecols#pricing .card__title.lngbtn:before,
          .pricing-threecols#pricing .card__title.lngbtn2:before,
          .pricing-threecols#pricing .card__title.lngbtn3:before{
						position: absolute;
						content: '';
						border-bottom: none;
						-webkit-transform: perspective(15px) rotateX(5deg);
						-moz-transform: perspective(15px) rotateX(5deg);
						transform: perspective(15px) rotateX(5deg);  
					}
				
					.pricing-threecols#pricing .card__title.lngbtn:after,
          .pricing-threecols#pricing .card__title.lngbtn2:after,
          .pricing-threecols#pricing .card__title.lngbtn3:after{
						position: absolute;
						top: 32px;
						content: '';
						border-top: none;
						-webkit-transform: perspective(15px) rotateX(-5deg);
						-moz-transform: perspective(15px) rotateX(-5deg);
						transform: perspective(15px) rotateX(-5deg);
					}
          
@media (min-width: 960px) {
  .cards__copy {
    margin-bottom: 0;
  }
  .card-wrapper {
    max-width: 488px;
  }
  .cards__list {
    column-gap: 40px;
  }
  .card.main__card {
    transform: scale(1);
    box-shadow: 0 0 6px rgba(65, 65, 65, 0.1);
    transform: scale(1.1);
  }
  .card.main__card .card__price {
    margin-top: 10px;
  }
}

@media (max-width: 1024px) {
  .pricing-threecols .cards__container .cards__list {
    grid-template-columns: 1fr 1fr;
  }
  .pricing-threecols .cards__container .card-wrapper {
    margin-bottom: 3em;
  }
  .card-wrapper:first-of-type { margin-bottom: 2rem;}
  #pricing .card__title {font-size: 25px !important; }
   .card__price {font-size: 40px; }
   .card__feature { font-size: 18px;   text-align: left;}
	.pricing-link {font-size: 20px; }
	    .card__inner {
        min-height: 400px;
    }
	    .currency-list-wrapper button, label.cards__copy-toggle-monthly, label.cards__copy-toggle-annually {
        font-size: 18px;
    }
}

@media (max-width: 800px) {
  .pricing-threecols .cards__container .cards__list {
    grid-template-columns: 1fr;
  }
    .card-wrapper {
        max-width: 488px;
    }
}