/* Reset */

* {
    box-sizing: border-box;
}

html {
	font-size: 16px;
	height: 100%;
	width: 100%;
	margin: 0;
	overflow: hidden scroll;
	font-family: "Montserrat", sans-serif;
	font-size: 18px;
	line-height: 150%;
	background: #80ABC1;
	user-select: none;
  }
  
  body {
	  overflow: hidden;
  }
  
  body, h1, h2, h3, h4, h5, h6, p, ol, ul {
	margin: 0;
	padding: 0;
	font-weight: normal;
  }

  .mobile {
	display: none;
}
  ol, ul {
	padding: 0;
	list-style-type: none;
	display: block;
  }
  
  img {
	height: auto;
	pointer-events: none;
  }

  img.background {
	position: absolute;
	top: -20px;
	width: auto;
	scale: 140%;
	z-index: 1;
}
  /* General */
  
  #app.kala {
	  width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
  }
  
  #app.kala>.container {
	  width: 100%;
	  height: 100%;
	  max-width: 1920px;	
	  filter: drop-shadow(0px 0px 34px rgba(0, 0, 0, 0.55));
	  background-color: #31636F;
	  color: white;	
	  margin: 0 auto;
	  min-height: 100vh;
  }
  
  .kala .page {
	  width: 100%;
	  position: relative;
	  overflow: hidden;

  }
  
  .kala .page .title {
	  position: absolute;
	  z-index: 100;
  }
  
  h3 {
	  font-size: 20px;
	  font-weight: 500;
  }
  
  p {
	  font-size: 16px;
	  font-weight: 400;
  }
  .campaign-header {
	display: flex;
	position: relative;
	justify-content: center;
	margin-top: 78px;
	background: #02B5A6;
	width: 100%;
	padding: 1.75rem .6rem;
	font-size: 18px;
	text-align: center;
	line-height: 1.25;
	font-weight: 600;
	font-weight: normal;
	white-space: normal;
}

.campaign-header .cta {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: inline-block;
	background: transparent;
}
  
  .cta, form input[type=submit] {
	height: 50px;
	border: none;
	border-radius: 8px;
	color: white;
	background: #D56B62;
	font-weight: bold;
	text-decoration: none;
	line-height: 50px;
	transition: transform 200ms;
	white-space: nowrap;
	text-overflow: ellipsis;
  }
  
  .cta.secondary {
	  background: transparent;
	  border: 2px solid #fd6b0200;
	  font-weight: bold;
      text-decoration: none;
	  font-family: "Montserrat", sans-serif;
      font-size: 18px;
	  color: #D56B62;
  }
  
  
  .cta:active, button:active {
	  transform: translate(0px,0px) scale(0.975);
	  transform-origin: center bottom;
  }
  
  .cta.centered:active, button.centered:active {
	  transform: translate(-50%,0px) scale(0.975);
	  transform-origin: center bottom;
  }
  
  .transition-delay-1 {
	  transition-delay: 175ms;
  }
  
  .transition-delay-2 {
	  transition-delay: 350ms;
  }
  
  .transition-delay-3 {
	  transition-delay: 525ms;
  }
  
  .transition-delay-4 {
	  transition-delay: 700ms;
  }
  
  .carousel {
	  position: absolute;
	  width: 100%;
	  height: 100%;	
	  top: 0;
	  left: 0;
	  top: -40px;
  }
  
  .carousel .selectors {
	  display: flex;
	  flex-direction: row;
  }
  
  .carousel .pages {
	  transition: transform 300ms;
  }
  
  .carousel .page {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  transform: translate(0%,0px);
	  transition: transform 300ms;
  }
  
  .carousel .page.to-history, .carousel .page.from-history {
	  width: 100%;
	  height: 100%;
	  transform: translate(-100%,0px);
  }
  
  .carousel .page.to-future, .carousel .page.from-future {
	  width: 100%;
	  height: 100%;
	  transform: translate(100%,0px);
  }
  
  .carousel>.pages {
	  width: 100%;
	  height: 100%;
	  overflow: visible;
  }
  
  .stretch {
	  width: 100%;
	  height: 100%;
  }
  
  .flex-space {
	  flex-grow: 1;
  }
  
  .space-between {
	  display: flex;
	  justify-content: space-between;
  }
  
  .centered {
	  position: absolute;	
	  transform: translate(-50%,0px);
	  left: 50%;
  }
  
  .carousel.dots .selectors {
	  bottom: 34px;
	  height: 39px;
	  display: flex;
	  flex-direction: row;
	  align-content: center;
	  align-items: center;
	  padding: 0px 10px;
	  border-radius: 48px;
	  background: #6E99B1;
  }
  
  .carousel.dots .selector {
	  width: 30px;
	  height: 100%;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  position: relative;
  }
  
  .carousel.dots .selectors .dot {
	  background: white;
	  width: 10px;
	  height: 10px;
	  border-radius: 100%;
  }
  
  .carousel.dots .selectors .circle {
	  width: 20px;
	  height: 20px;
	  border: 2px solid rgb(0, 0, 0);
	  border-radius: 100%;
	  border-color: rgba(255,255,255,0);
	  transition: border-color 300ms;
	  display: flex;
	  align-items: center;
	  justify-content: center;
  }
  
  .carousel input {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  left: 0;
	  top: 0;
	  opacity: 0;
	  margin: 0;
	  padding: 0;
  }
  
  .carousel.dots .selectors .selected .circle {
	  border-color: rgba(255,255,255,255);
  }

  .distressed {
	position: absolute;
	right: 0px;
	top: 0px;
	height: 100%;
	width: 100%;
	background-color: #E8F1F6;
	background-size: cover;
	opacity: 100%;
}

.distressed.onboarding {
	z-index: 2;
	background-color: white;
}

#app .form-page  .carousel {
	display: none;
	visibility: hidden;
}


/* Pricing plans */

#app .form-page .purchase-page {
	width: 100%;
	opacity: 1;
	transition: opacity 200ms;
}

#app .form-page .purchase-page.pending {
	opacity: 0;
}

#app .form-page .purchase-page h2, #app .form-page .purchase-page h3 {
	font-weight: 700;
}

#app .form-page .purchase-page ul.bullets {
	list-style-type: none;
	padding-left: 1.5em;
	margin-top: 1.2em;
	margin-bottom: 1.2em;
	line-height: 1.6;
	font-size: 15px;
}

#app .form-page .purchase-page ul.bullets li {
	margin-top: 12px;
}

#app .form-page .purchase-page ul.bullets li strong {
	text-transform: uppercase;
}

#app .form-page .purchase-page ul.bullets li:before {
	content: '';
	position: absolute;
	width: 18px;
	height: 18px;
	background-image: url('../img/check.svg');
	margin-left: -24px;
	margin-top: 12px;
	background-repeat: no-repeat;
}

#app .form-page .purchase-page .selected {
	background-color: white;
}

#app .form-page .purchase-page ul.bullets.main {
	height: 144px;
}

#app .form-page .purchase-page h2 {
	text-align: center;
}

#app .form-page .purchase-page .product-options {
	display: flex;
	margin: 25px auto;
	width: 260px;
	min-height: 1.5em;
	justify-content: space-between;
}


#app .form-page .purchase-page .pricing-plans {
	display: flex;
	justify-content: center;
	padding-top: 3rem;
	padding-bottom: 1rem;
}

#app .form-page .purchase-page .price-info {
	position: relative;
	display: flex;
	flex-flow: column;
	width: 320px;
	min-width: 280px;
	max-width: 90vw;
	max-width: 32%;
	background: white;
	border-radius: 40px;
	margin: 0 10px;
	box-sizing: border-box;
	padding: 29px;
	margin-bottom: 64px;
	min-height: 399px;
	border: 2px solid #3C748E;
	box-shadow: 0 6px 12px rgba(0,0,0,.16);
	transform: scale(0.9);
}

#app .form-page .purchase-page .price-info.price-highlight {
	transform: scale(1);
    border-color: #D56B62;
	box-shadow: 0 12px 24px rgba(0,0,0,.24);
	z-index: 1;
}


#app .form-page .purchase-page .price-info.price-highlight-single-kala {
	transform: scale(1);
	background: transparent;
	border-color: white;
	width: 520px;
	max-width: 520px;
	z-index: 1;
}

#app .form-page .purchase-page .price-highlight ul.bullets li:before {
	background-image: url('../img/check-highlight.svg');
}

#app .form-page .purchase-page .price-info .plan-info {
	text-align: center;
	position: absolute;
	width: 80%;
	bottom: -80px;
	font-size: 14px;
	color: #666;
	line-height: 1.4;
}

#app .form-page .purchase-page .price-info .plan-info span {
	display: block;
}

#app .form-page .purchase-page .price-info .total {
	font-weight: 700;
	margin-right: 56px;
}

#app .form-page .purchase-page .price-info .baseline {
	display: block;
	color: #990705;
	font-weight: 700;
	text-align: center;
	text-decoration: line-through;
}

#app .form-page .purchase-page .price-info .normal {
	margin-left: 1ch;
	text-align: right;
}

#app .form-page .purchase-page .price-info hr {
	color: #B6B6B6;
	margin-bottom: .6em;
	width: 100%;
}

#app .form-page .purchase-page .price-info hr.bottom {
	margin-bottom: 1.2em;
}

#app .form-page .purchase-page .price-info > h3 {
	margin-top: -30px;
	margin-left: -30px;
	margin-right: -30px;
	line-height: 60px;
    background: #6E99B1;
	border-radius: 40px 40px 0px 0px;
	box-sizing: content-box;
	color: white;
	font-size: 18px;
	font-weight: 600;
}

#app .form-page .purchase-page .price-info.price-highlight > h3 {
    background: #D56B62;
}

#app .form-page .purchase-page .price-info .price {
	text-align: center;
	margin-top: 1.2rem;
}

#app .form-page .purchase-page .price-info .price small {
	font-size: 18px;
	margin-right: 2px;
}

#app .form-page .purchase-page .price-info .normal .price {
	font-size: 28px;
}

#app .form-page .purchase-page .price-info .cta {
	margin-top: auto;
	width: 100%;
	font-size: 18px;
}

#app .form-page .purchase-page .price-info .price-compare {
	font-size: 14px;
	width: 100%;
	text-align: center;
	color: #798792;
	margin-bottom: 1rem;
}

/* cookies */

#cookie-consent {
	position: fixed;
	bottom: 0px;
	width: 100vw;
}

#cookie-consent .veil {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,0.5);
	transition: opacity 600ms;
	pointer-events: none;
}

#cookie-consent .veil.hide {
	opacity: 0;
}

#cookie-consent .footer {
	position: absolute;
	bottom: 0px;
	display: flex;
	padding: 8px 70px;
	align-items: center;
	background: white;
	width: 100%;
	box-sizing: border-box;
	column-gap: 1ch;
	transition: transform 600ms, opacity 600ms;
}

#cookie-consent .footer p {
	font-size: 12px;
}

#cookie-consent .footer.hide {
	opacity: 0;
	transform: translate(0px,100%);
}

#cookie-consent .footer a {
	color: #D56B62;
}

#cookie-consent .cta {
	font-size: 12px;
	font-weight: 400;
	height: 40px;
	line-height: 20px;
}

#cookie-consent .cta.secondary {
	border: none;
	color: #D56B62;
}

@keyframes discount-pop {
	0% { transform: scale(0.8); opacity: 0 }
	50% { transform: scale(1.5) rotate(30deg); opacity: 1 }
	100% { transform: rotate(15deg) }
}

#app .form-page .purchase-page .price-info .discount-banner {
	text-align: center;
	background: white;
	margin-top: -15px;
	display: block;
	margin-left: 26px;
	margin-right: 26px;
	border: 1px solid #D56B62;
	border-radius: 20px;
	line-height: 1.8;
	color: #D56B62;
}

#app .form-page .purchase-page .price-info .discount-banner h4 {
	font-size: 13px;
	font-weight: normal;
}

#app .form-page .purchase-page .price-info .discount-banner h4 span {
	font-weight: bold;
}

#app .form-page .purchase-page .price-info .discount-badge {
	position: absolute;
	top: -44px;
	right: -44px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #990705;
	color: white;
	width: 113px;
	height: 113px;
	border-radius: 100%;
	border: 6px solid white;
	filter: drop-shadow(4px 4px 14px rgba(0, 0, 0, 0.25));
	animation-name: discount-pop;
	animation-duration: 300ms;
	transform: rotate(15deg);
	font-weight: 500;
	font-size: 16px;
}

#app .form-page .purchase-page .price-info .discount-badge h2 {
	font-weight: 900;
	font-size: 40px;
	line-height: 30px;
	margin-top: 8px;
}


#app .form-page .purchase-page .price-info h3 {
	text-align: center;
}



#header {
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	background: #081821F2;
	box-sizing: border-box;
}

#header .header-tail.show {
	max-height: 75px;
}

#header .header-tail {
	transition: max-height 1s;
	width: 100vw;
	max-height: 0px;
	display: flex;
	justify-content: center;
	position: absolute;
	margin: 0px;
	height: 75px;
	color: white;
	font-size: 20px;
	font-weight: 600;
	overflow: hidden;
	top: 100%;
}

#header #flash {
	background: #41677C;	
}

#header #error {
	background: #ff0000;
}

#header .flash-icon {
	min-width: 40px;
	min-height: 40px;
	background-repeat: no-repeat;
	background-position: center;
	margin-right: 8px;
}

#header .user-icon {
	background-image: url(../img/user-check.svg);
	background-color: #31636E;
	border-radius: 100%;	
}

#header .error-icon {
	background-image: url(../img/error-icon.svg);	
}

#header>div {
	display: flex;
	justify-content: flex-end;
	column-gap: 16px;
	align-items: center;
	margin: 8px 7%;
}

#header .logo {
	min-width: 298px;
	height: 65px;
	background-image: url("../img/KalaUkulele.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
	flex-grow: 1;
	overflow: visible;
}

#header .cta {
	height: 44px;
	line-height: 44px;
	padding: 0px 24px;
}

#header .step {
	color: #999999;
	font-weight: 600;
	display: flex;
	align-items: center;
	column-gap: 14px;
	margin-right: 41px;
	white-space: nowrap;
	text-overflow: ellipsis;
	flex-shrink: 1;
	transition: color 500ms;
}

#header .dismiss-cross {
	position: absolute;
	right: 50px;
	width: 40px;
	cursor: pointer;
}

#header .number {
	width: 40px;
	line-height: 40px;
	border-radius: 100%;
	background: #092F2C;
	text-align: center;
}

#header .step.active {
	color: white;
}

#header .step.active a {
	color: white;
	text-decoration: none;
}

#header .step.active a:hover {
	color: white;
	text-decoration: underline;
}

#header .step.active .number {
	background: #D56B62;
}

#header .rspace {
	flex-grow: 0.1;
}

#header .header-tail .text {
	max-width: 70vw;
	text-align: center;
}

#app.kala>#home.container, #app.kala>#default.container {
	display: block;
}

#app .form-page .download-card {
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	border-radius: 40px;
	padding: 40px;
	row-gap: 16px;
	margin-bottom: 1em;
}

#app .form-page .download-card h4 {
	font-weight: 600;
}

#app .form-page .download-card p {
	font-size: 16px;
	margin-bottom: 1em;
}
#app .form-page .download-card .cta {
	width: 160px;
	text-align: center;
}

#app #account .entitlement {
	width: 100%;
}

#app #account .entitlement tr td:first-child {
	font-weight: 400;
}

#app #account .entitlement tr td:last-child {
	text-align: right;
}

#app #account .form-page .subscription {
	width: 100%;
	background: white;
	padding: 1.5em;
	filter: drop-shadow(0px 0px 15px rgba(0,0,0,0.25));
	border-radius: 22px;
	margin: 1.5em;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}


#app #account .form-page .subscription .content {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

#app #account .form-page .subscription .renewal {
	transition: opacity 400ms;
}

#app #account .form-page .subscription .product-title {
	margin-bottom: 0.5em;
}

#app #account .form-page .subscription .renewal.cancelled {
	opacity: 0.5;
}


#app #account .form-page .subscription .date {
	font-size: 14px;
}

#app #account .form-page .subscription .amount {
	font-weight: 600;
}

#app #account .form-page .subscription .renewal.cancelled .amount {
	text-decoration: line-through;
} 

#app #account .form-page .subscription .renew {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#app #account .form-page .subscription .renew .label {
	margin-top: 0.1em;
	font-size: 14px;
}



  /*Unlock your kala*/
  .kala .page.unlock-your-kala {
	height: 735px;
	left: 0px;
	background: black;
	background-image: url("../img/kala-black-friday-2024-hero.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 20%;
}

.kala .page.unlock-your-kala.big-screen {
	padding: 10rem 8vw;
 }

.kala .page.unlock-your-kala .title {
	position: relative;
}

.kala .page.unlock-your-kala .copy {
	position: relative;
	max-width: 80%;
	line-height: normal;
	z-index: 2;
}

.kala .page.unlock-your-kala .discount-badge {
	position: absolute;
	top: 12rem;
	width: 16rem;
	right: 10vw;
}

.kala .page.unlock-your-kala .discount-badge.large {
	position: absolute;
	top: 10rem;
	width: 35rem;
	right: 6vw;
}

.kala .page.unlock-your-kala .copy > * {
	margin-bottom: .6rem;
}

.kala .page.unlock-your-kala ul.bullet-points {
	position: relative;
	max-width: 80%;
	left: 20px;
	list-style: disc;
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	padding-bottom: 1.4rem;
}

.kala .page.unlock-your-kala .cta {
	position: relative;
	bottom: 0;
	left: 0;
	padding: 16px 62px;		
	text-align: center;
	width: 240px;
	font-style: normal;
	line-height: 24px;

}

.kala .page.unlock-your-kala ul>li {
	padding-left: 8px;
}

/*What learners rave about */
.kala .page.what-learners-rave-about {
	height: 704px;
	background-color: #E8F1F7;
}

.kala .page.what-learners-rave-about .title {
	left: 181px;
	top: 78px;
}

.kala .page.what-learners-rave-about .cta {
	position: absolute;
	bottom: 70px;
	right: 70px;
	padding: 16px 32px;	
	text-align: center;
	width: 240px;
	font-style: normal;
	line-height: 19px;
}

.kala .page.what-learners-rave-about .carousel.testimonial-type>.selectors {
	position: absolute;
	top: 46px;
	right: 72px;
	width: 307px;
	height: 53px;
	background-color: rgba(0,0,0,0.46);
	border-radius: 46px;
	padding: 0 16px;
}

.kala .page.what-learners-rave-about .carousel.testimonial-type>.selectors .border {
	background-color: #D56B62;
	background-color: #000000;
	width: 45%;
	border-radius: 24px;
	position: absolute;
	top: 10px;
	bottom: 10px;
	transition: transform 250ms;
}

.kala .page.what-learners-rave-about .carousel.testimonial-type>.selectors .border.selected-0 {
	transform: translate(0%,0px);
}

.kala .page.what-learners-rave-about .carousel.testimonial-type>.selectors .border.selected-1 {
	transform: translate(100%,0px);
}


.kala .page.what-learners-rave-about .carousel.testimonial-type>.selectors .selector{
	position: relative;
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
	font-weight: 700;
	width: 50%;
}

.kala .page.what-learners-rave-about .carousel .carousel .selectors {
	background-color: #304F54;	
}

.kala .page.what-learners-rave-about .testimonial {
	position: absolute;
	top: 267px;
	width: 638px;
	right: 150px;
	font-size: 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.kala .page.what-learners-rave-about .testimonial.bottom-left {
	left: 166px;
	top: 339px;
	filter: drop-shadow(4px 4px 14px #00000040);
}

.kala .page.what-learners-rave-about .testimonial.top-right {
	right: 56px;
	top: 195px;
	filter: drop-shadow(4px 4px 14px #00000040);
}

.kala .page.what-learners-rave-about .testimonial .quote-mark {
	position: absolute;
	right: 23px;
	top: 29px;
}


.kala .page.what-learners-rave-about .testimonial .quote {
	padding: 24px 156px 24px 72px;
	color: #000000;
	background-color: #FFFFFF;
	border-color: #000000;
	border-radius: 8px;
}

.kala .page.what-learners-rave-about .testimonial .signature {
	padding: 12px 48px;
	color: #000000;
	background-color: #FFFFFF;
		border-radius: 8px;
	margin-right: 28px;
	font-weight: 700;
	display: inline;
}

.kala .page.what-learners-rave-about .testimonial .portrait {
	position: absolute;
	left: -55px;
	top: -55px;
	width: 110px;
	height: 110px;
	border-radius: 190px;
	border: 5px solid white;
}


/* comparison chart */

.kala .page.enjoy-unlimited-access {
	display: flex;
	flex-flow: column;
	padding: 3rem 0.6rem;
	background: white;
}

.kala .page.enjoy-unlimited-access .container {
	display: flex;
	flex-flow: column;
	color: black;
	width: auto;
}

.kala .page.enjoy-unlimited-access .table-container {
	position: relative;
	display: flex;
	flex-flow: row;
	margin: auto;
	flex-wrap: wrap;
	justify-content: center;
}

.kala .page.enjoy-unlimited-access .kala-phone {
	width: 24rem;
	height: auto;
	object-fit: contain;
}

.kala .page.enjoy-unlimited-access h3 {
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
}

.kala .page.enjoy-unlimited-access h3 + p {
	text-align: center;
	margin-bottom: 2rem;
}

.kala .page.enjoy-unlimited-access .chart {
	position: relative;
	background: white;
	font-weight: 500;
	line-height: 1.4;
	min-width: 300px;
}

.kala .page.enjoy-unlimited-access .chart img.stars-premium {
	position: absolute;
	width: 5rem;
	top: -1.2rem;
	right: 0.6rem;
}

.kala .page.enjoy-unlimited-access .chart,
.kala .page.enjoy-unlimited-access .chart th,
.kala .page.enjoy-unlimited-access .chart td {
  border-collapse: collapse;
  border-spacing: 0;
}

.kala .page.enjoy-unlimited-access .chart th {
	text-transform: uppercase;
}

.kala .page.enjoy-unlimited-access .chart th,
.kala .page.enjoy-unlimited-access .chart td {
	text-align: center;
}

.kala .page.enjoy-unlimited-access .chart th:first-child,
.kala .page.enjoy-unlimited-access .chart td:first-child {
	text-align: left;
}

.kala .page.enjoy-unlimited-access .chart td {
	padding: .6rem;
}

.kala .page.enjoy-unlimited-access .chart th h4 {
	font-weight: 700;
	padding: .6rem;
	margin: -1px;
	border-radius: 10px 0 0 0;
}

.kala .page.enjoy-unlimited-access .chart th.features h4,
.kala .page.enjoy-unlimited-access .chart th.free {
	background-color: #E3EEF3;
}

.kala .page.enjoy-unlimited-access .chart th.free h4,
.kala .page.enjoy-unlimited-access .chart th.premium {
	background-color: #8DB6CF;
}

.kala .page.enjoy-unlimited-access .chart th.premium {
	border-radius: 0 10px 0 0;
	overflow: hidden;
}

.kala .page.enjoy-unlimited-access .chart th.premium h4 {
	background-color: #D87E7B;
}

.kala .page.enjoy-unlimited-access .chart th.free h4,
.kala .page.enjoy-unlimited-access .chart th.premium h4 {
	color: white;
}

.kala .page.enjoy-unlimited-access .chart td img {
	width: .6rem;
}

.kala .page.enjoy-unlimited-access .chart .checked img {
	width: 1.2rem;
}


/*Learn and play along step by step. */

.kala .page.learn-and-play-along-step-by-step {
	display: flex;
	flex-flow: row;
	padding: 3rem;
	background-color: #D56B62;
}

.kala .page.learn-and-play-along-step-by-step .vector-bg {
	background-image: url(../img/learn-and-play-along-step-by-step-vector-2.svg);
	background-size: 150% !important;
	background-repeat: no-repeat;
	background-position: -200px 51%;
	position: absolute;
	height: 402px;
	left: 0px;
	right: 0px;
	bottom: -0.1px;
}


.kala .page.learn-and-play-along-step-by-step .learn-phone {
	position: absolute;
	background-image: url(../img/learn-and-play-along-step-by-step-phone.png);
	background-color: rgba(0,0,0,0);
	width: 1202px;
	height: 701px;
	right: -15%;
	top: 0px;
	max-width: 70%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;	
	z-index: 1;
}

.kala .page.learn-and-play-along-step-by-step .copy {
	position: absolute;
	height: 426px;
	width: 634px;
	left: 180px;
	top: 200px;
	max-width: 80%;
	line-height: normal;
	z-index: 2;

}


.kala .page.learn-and-play-along-step-by-step .copy>* {
	margin-bottom: 1em;
}


.kala .page.learn-and-play-along-step-by-step ul.bullet-points {
	position: absolute;
	height: 426px;
	width: 834px;
	max-width: 80%;
	left: 20px;
	list-style: disc;
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
}

.kala .page.learn-and-play-along-step-by-step ul>li {
	padding-left: 8px;
}



/* Experience the magic */

.kala .page.experience-the-magic {
	height: 970px;	
	background: white
}

.kala .page.learn-and-play-along-step-by-step .title {
	left: 180px;
	top: 100px;
}

.kala .page.experience-the-magic .title-container {
	width: 100%;
}

.kala .page.experience-the-magic .veil {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #ffffff;
	mix-blend-mode: multiply;
	z-index: -90;
}

.kala .page.experience-the-magic .cta {
	position: absolute;
	bottom: 70px;
	padding: 16px 32px;	
	text-align: center;
	width: 240px;
	height: 24px;
	font-style: normal;
	line-height: 24px;
}

.kala .page .journey-steps {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	margin-left: 133px;
	margin-right: 133px;
	column-gap: 32px;
	width: 60%;
	margin: 0 auto 23rem;
	color: #000000;
}

.kala .page .journey-steps.wait-for-scroll .step {
	opacity: 0;
	transform: translate(0,50px);
}

.kala .page .journey-steps .step {
	top: 206px;
	width: 10rem;
	position: relative;
	text-align: center;
	opacity: 1;
	transition-property: opacity, transform;
	transition-duration: 500ms;
} 

.kala .page .journey-steps .step .portrait {
	width: 200px;
	border-radius: 32%;
} 

.kala .page .journey-steps .step h3 {
	font-size: 32px;
	font-weight: bold;
	line-height: 56px;
	margin-top: 16px;
}

.kala .page .journey-steps .step p {
	font-size: 16px;
}

.kala .page.fit-for-every-level {
	height: 735px;
	background: #F8EEED;
	color: #522222;
}

.kala .page.fit-for-every-level .copy {
	position: absolute;
	top: 136px;
	width: 603px;
	max-width: 85vw;
	color: #990705;
	text-align: center;
}

.kala .page.fit-for-every-level .title {
	top: 64px;
}

.kala .page.fit-for-every-level .genre-banner {
	width: 2199px;
	height: 201px;
	top: 380px;
	left: 0px;
	background-image: url(../img/genres.png);
	background-color: rgba(0,0,0,0);
	position: absolute;
} 

.kala .page.fit-for-every-level .cta {
	position: absolute;
	bottom: 82px;
	width: auto;
	padding: 0px 32px;	
}

.gift-footer {
	display: flex;
	position: relative;
	justify-content: center;
	background: #ffffff;
	width: 100%;
	padding: 0.5rem .6rem;
	font-size: 18px;
	text-align: center;
	line-height: 1.25;
	font-weight: 600;
	font-weight: normal;
	white-space: normal;
}
.gift-footer p {
	justify-content: center;
	align-items: center;
	display: flex;
	gap: 50px;
	line-height: 50px;
	width: 90dvw;
}

.kala .gift-bottom {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 4rem 8vw;
	color: #D56B62;
	background-color: #fff;
}

.kala .gift-bottom .title {
	position: relative;      
	max-width: 80vw !important;
	padding-bottom: 26px;
}


.kala .gift-bottom .subtitle {
	color: #1D3446;
	line-height: 1.2;
	max-width: 500px;
	font-size: clamp(16px, 1.5vw, 20px);
	padding-bottom: 34px;
}


  .kala .page.unlock-your-kala.gift-page {
	height: 735px;
	background-image: url("../img/kala-gift-hero.jpg");
}

@keyframes carousel-step {
0% {transform: translate(0px,0px);}
100% {transform: translate(-200px,0px);}
} 

.kala .page.fit-for-every-level .carousel.carousel-animation {
	animation-name: carousel-step;
	animation-duration: 6000ms;
	animation-timing-function: linear;
	transform: translate(-200px,0px);
}

.kala .page.fit-for-every-level .carousel {
	transform: translate(0px,0px);
	position: absolute;
	height: 201px;
	top: 328px;
	left: 0px;
	display: flex;
	flex-direction: row;
}

.kala .page.fit-for-every-level .carousel .genre {
	position: relative;
}

.kala .page.fit-for-every-level .carousel .genre .label {
	position: absolute;
}


/* What Are You Waiting For */

.kala .page.what-are-you-waiting-for {
	height: 882px;
	background-image: url("../img/what-are-you-waiting-for-uke.jpg");
	background-color: rgb(0,0,0);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.kala .page.what-are-you-waiting-for .reviews {
	position: absolute;
	height: 425px;
	min-width: 1080px;
	width: 60%;
	top: 263px;
	background: rgba(0, 0, 0, 0.5);
	border: 1px solid #FFFFFF;
	backdrop-filter: blur(7px);
	border-radius: 40px;
	padding: 40px 100px 0px 100px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.kala .page.what-are-you-waiting-for .title {
	left: 181px;
	top: 78px;
}

.kala .page.what-are-you-waiting-for .cta {
	position: absolute;
	bottom: 82px;
	width: auto;
	padding: 0px 32px;	
	margin-bottom: 2rem;
}

.kala .page.what-are-you-waiting-for .stores {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.kala .page.what-are-you-waiting-for .store {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 8px;
}

.kala .page.what-are-you-waiting-for .store .header {
	display: flex;
	flex-direction: row;
	align-items: center;
	column-gap: 16px;
}

.kala .page.what-are-you-waiting-for .store .header .rating {
	width: 44px;
	height: 44px;
	line-height: 40px;
	border: 1px solid white;
	border-radius: 100%;
	text-align: center;
	box-sizing: border-box;
	font-weight: 700;
	background: rgba(34,34,34,0.7);
} 

.kala .page.what-are-you-waiting-for .reviews .user-reviews {
	margin-top: 52px;
	flex-grow: 1;
	position: relative;
	overflow: hidden;
}

.kala .page.what-are-you-waiting-for .reviews .user-reviews .user-review-page {
	display: flex;
	font-size: 14px;
}

.kala .page.what-are-you-waiting-for .reviews .user-review {
	margin-left: 58px;
	margin-right: 58px;	
}

.kala .page.what-are-you-waiting-for .reviews .user-review .header {
	display: flex;
	justify-content: space-between;
}

.kala .page.what-are-you-waiting-for .reviews .user-review .signature {
	color: #BDBDBD;
}

.kala .page.what-are-you-waiting-for .reviews .user-review .review {
	font-size: 14px;
}

  /* forms */
  
  #app>.container .form-page {
	  width: 100vw;
	  user-select: text;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  row-gap: 20px;
	  padding-top: 100px;
	  max-width: 1920px;
	  
  }
  	#app>.container .form-page.onboarding {
		height: auto;
		justify-content: top;
		object-fit: contain;

	}

  #app .form-page .form {
	  width: 100%;
	  max-width: 858px;
	  padding: 25px 50px;
	  box-sizing: border-box;
	  background: white;
	  color: #1D3446;
	  border-radius: 20px;
	  display: flex;
	  height: 100%;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  flex-basis: auto;
	  z-index: 3;
  }
  
  #app .form-page .form>* {
	  max-width: 518px;
  }



  #app .form-page .form.onboarding img.logo {
	min-height: 50px;
	max-height: 50px;
	flex-shrink: 0;
	height: 50px;
	margin-top: 0dvh;
}

#app .form-page .form.onboarding img {
	min-height: 0px;
	max-height: 200px;
	flex-shrink: 2;
	margin-top: 20px;
	
}

#app .form-page .img.background {
	position: absolute;
}

#app .form-page .form.onboarding img.large {
	min-height: 290px;
	max-height: 430px;
	flex-shrink: 2;
	margin-top: 0px;
}

  #app .form-page .form.onboarding {
	gap: 20px;
	flex-basis: 120px;
	max-width: 100dvw;
	padding: 20px;
	background: transparent;
  }
  #app .form-page .form.onboarding>a.cta {
	width: 80dvw;
	text-align: center;
	font-weight: 500;
	min-height: 45px;
	max-height: 50px;
	flex-shrink: 2;
	user-select: none;
	font-size: min(4.5vw, 16px);
	transition: 0.3s;
	padding-left: 24px;
	
  }

  #app .form-page .form.onboarding>a.cta.short {
	width: 70dvw;
	text-align: center;
	font-weight: 500;
	font-size: min(5vw, 16px);
	min-height: 45px;
	max-height: 50px;
	flex-shrink: 2;
	user-select: none;
	transition: 0.3s;
	padding-left: 24px;
	
  }

  @media only screen and (min-width: 480px) {
  #app .form-page .form.onboarding>a.cta:hover {
	background-color: #AD564F;
  }
  #app .form-page .form.onboarding>a.cta.selection:hover {
	background-color: #FDD6D3;
  }
  img.background {
	display: none;
  }
  
}

  #app .form-page .form.onboarding>a.cta.hidden {
	width: 80dvw;
	text-align: center;
	font-weight: 500;
	pointer-events: none;
	color: #767676;
	background: #cacaca;
	font-size: min(4.5vw, 16px);
	opacity: 0.6;
	min-height: 45px;
	max-height: 50px;
	flex-shrink: 2;
	padding-left: 24px;
	user-select: none;
  }

  #app .form-page .form.onboarding>a.cta.selection {
	width: 80dvw;
	text-align: center;
	min-height: 45px;
	max-height: 50px;
	font-size: min(4.5vw, 16px);
	border: none;
	border-radius: 8px;
	color: #4a123d;
	background: #E8F1F6;
	font-weight: 500;
	text-decoration: none;
	line-height: 50px;
	transition: transform 200ms;
	white-space: nowrap;
	text-overflow: ellipsis;
	flex-shrink: 2;
	padding-left: 24px;
	user-select: none;
	transition: 0.3s;
	text-align: left;
	
  }
 
  #app .form-page .form.onboarding>a.cta.selection.selected {
	width: 80dvw;
	text-align: center;
	border: none;
	border-radius: 8px;
	color: #12364A;
	background: #FDD6D3;
	font-size: min(4.5vw, 16px);
	font-weight: 500;
	text-align: left;
	text-decoration: none;
	line-height: 50px;
	transition: transform 200ms;
	white-space: nowrap;
	text-overflow: ellipsis;
	min-height: 45px;
	max-height: 50px;
	flex-shrink: 2;
	user-select: none;
	transition: 0.3s;
  }
  
  #app .form-page .form>h2 {
	  text-align: center;
	  margin-bottom: 55px;
	  font-weight: bold;
	  font-size: 28px;
  }

  #app .form-page .form>h3 {
	text-align: center;
	font-weight: 600;
	font-size: 18px;
}
#app .form-page .form>h3.left {
	text-align: left;
	width: 90dvw;
	margin-top: 10px;
	font-size: 0.85em;


}

#app .form-page .form>h3.red {
	color:  #D56B62;
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	width: 168px;
	margin-top: 75px;
	margin-bottom: 26px;

}
  
  
  #app .form-page .form>p {
	  text-align: center;
	  margin: 0px;
	  font-size: 0.85em;
	  text-wrap: balance;
  }

  #app .form-page .form>p.left {
	text-align: left;
	font-size: 14px;
	width: 90dvw;
	font-size: 0.68em;
	margin-top: -16px;
	
}

  
  #app .form-page .form>form {
	  display: flex;
	  flex-direction: column;
	  width: 100%;
	  max-width: 418px;
  }
  
  #app .form-page .form>form label {
	  font-size: 16px;
	  font-weight: 700;
	  line-height: 56px;
  }
  
  #app .form-page .form>form input[type=email],
  #app .form-page .form>form input[type=password] {
	  height: 47px;
	  margin-bottom: 9px;
	  border-radius: 8px;
	  padding: 0px 18px;
	  font-size: 16px;
	  border: 2px solid #F8EEED;
	  outline: none;
  }

  #app .form-page .form>form .email-consent {
	margin-top: .3em;
}

#app .form-page .form>form label.email-consent {
	float: right;
	font-size: 13px;
	font-weight: 400;
	line-height: 16px;
	width: calc(100% - 30px);
}

#app .form-page .form>form .email-consent input[type=checkbox] {
	width: auto;
	height: 24px;
}
  
  #app .form-page .form>form input:invalid {
	  border: 2px solid red;
  }
  
  #app .form-page .form>form input[type=submit] {
	  font-size: 16px;
	  margin-top: 56px;
	  margin-bottom: 56px;
  }
  
  #app .form-page .form>form p.caption {
	  font-size: 14px;
  }
  
  #app .form-page .form .sso {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  margin: 32px;
  }
  
  #app .form-page .form .sso .providers {
	  margin-top: 13px;
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  column-gap: 20px;
  }
  
  #app .form-page .form .sso .providers button {
	  border: none;
	  background: transparent;
	  display: flex;
	  flex-direction: column;
	  row-gap: 6px;
  }
  
  #app .form-page .form .sso .providers button img {
	  width: 23px;
	  height: 23px;
	  padding: 2px;
	  border: 1px solid #44546C;
	  border-radius: 10px;
  }
  
  #app .form-page .purchase-page {
	  width: 100%;
	  opacity: 1;
	  transition: opacity 200ms;
  }
  
  #app .form-page .purchase-page.pending {
	  opacity: 0;
  }
  
  #app .form-page .purchase-page h2, #app .form-page .purchase-page h3 {
	  font-weight: 700;
  }
  
  #app .form-page .purchase-page ul.bullets {

	  padding-left: 1.5em;
	  margin-top: 2em;
	  margin-bottom: 2em;
	  line-height: 2;
	  font-size: 16px;
  }
  
  #app .form-page .purchase-page ul.bullets.main {
	  height: 144px;
  }
  
  #app .form-page .purchase-page .product-options {
	  display: flex;
	  margin: 25px auto;
	  width: 260px;
	  min-height: 1.5em;
	  justify-content: space-between;
  }
  
  #app .form-page .purchase-page .price-info {
	  width: 467px;
	  border-radius: 40px;
	  margin: 0 auto;
	  border: 1px solid black;
	  box-sizing: border-box;
	  padding: 29px;
	  margin-bottom: 51px;
	  min-height: 399px;
  }
  
  #app .form-page .purchase-page .price-info h3 {
	  text-align: center;
  }
  
  
  #download .form-page.congratulations {
	  background-color: #FFFFFF;
	  background-position: top right;
	  min-height: 100vh;
	  align-items: center;
	  row-gap: 0px;
  }
  
  #download .form-page.congratulations .title {
  max-width: 1300px;
  top: 229px;
  border-radius: 0px;
  }
  
  #download .form-page.congratulations .form {
	  max-width: 1300px;
	  display: flex;
	  flex-direction: row;
	  align-items: stretch;
	  justify-content: space-between;
	  column-gap: 16px;
	  background: rgba(255, 255, 255, 0.8);
	  -moz-backdrop-filter: blur(10px);
	  -webkit-backdrop-filter: blur(10px);
  }
  
  #app .form-page.congratulations .copy {
	  display: flex;
	  flex-direction: column;
	  line-height: 1.5;
	  row-gap: 16px;
  }
  
  #app .form-page.congratulations h2 {
	  line-height: 1.25;
	  font-weight: 700;
  }

  #app .form-page h1.title {
	color: #000000;
	font-weight: 1000;
	font-size: 40px;
	line-height: normal;
}

#app .free-trial{
		position: absolute;
		right: 10vw;
		z-index: 10;

}
  
  #app .form-page.congratulations div.qr-code {
	  display: flex;
	  margin-top: 100px;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  text-align: center;
	  row-gap: 15px;
	  background: rgba(0,0,0,0.1);
	  padding: 25px 56px;
	  border-radius: 40px;
  }
  
  #app .form-page.congratulations .qr-code a {
	  display: flex;
	  align-items: center;
	  justify-content: center;
  }
  #app .form-page.congratulations .qr-code img {
	  border: 25px solid rgb(0, 0, 0);
	  border-radius: 30px;
	  display: block;
	  box-sizing: content-box;
  }
  #app #login .kalaukulele-account {
	display: flex;
	column-gap: 10px;
	align-items: flex-start;
	color: #666;
	font-weight: 500;
	text-align: left;
	line-height: 3.5;
	font-size: .85rem;
	padding-bottom: 6rem;
	}

	#app .info-text,
	#app .terms {
		font-size: 15px;
		line-height: 1.5;
	}

	#app #login .kalaukulele-account svg {
		margin-top: 1rem;
	}

	.bubble-root {
		position: relative;
		visibility: hidden;
	}
	
	
	.bubble {
		position: absolute;
		transform: translate(0px,-50%);
		top: 50%;
		display: flex;
		align-items: center;
		text-align: left;
		font-weight: 400;
		font-size: 10px;
		line-height: 13.6px;
		width: 189px;
		filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.25));
		margin-top: .5rem;
	}
	
	*:hover>.bubble-root {
		visibility: visible;
	}
	
	*:focus>.bubble-root {
		visibility: visible;
	}
	
	.bubble .text {
		border-radius: 4px;
		padding: 16px;
		background: white;
	}
	
	.bubble-root {
		position: absolute;
	}
	
	.bubble {
		transform: translate(-0.7rem,0);
	}
	
	.bubble .text {
		position: absolute;
		top: 120%;
		min-width: 15.8rem;
		font-size: 13px;
		line-height: 1.4;
	}
	
	.bubble svg {
		transform: rotate(90deg) translate(11px, -14px);
	}
	
	#app .form-page .form .sso .providers {
		display: flex;
		flex-direction: row;
		align-items: center;
		column-gap: 20px;
	}
	
	#app .form-page .form .sso .providers button {
		border: none;
		background: transparent;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 20px;
		border-radius: 10px;
		padding: 2px;
		box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.084), 0px 2px 3px rgba(0, 0, 0, 0.168);
	}
	
	#app .form-page .form .sso .providers button img {
		width: 23px;
		height: 23px;
		margin-right: 16px;
		border: none;
	}

	#app .form-page div.qr-code {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		row-gap: 15px;
		background: rgba(255, 255, 255, 0.1);
		border: 2px solid #F8EEED;
		padding: 25px 56px;
		border-radius: 40px;
		flex-shrink: 1;
		max-width: 60vw;
		margin-bottom: 1em;
	}
	
	
	#app .form-page div.qr-code .spinner {
		display: none;
	}
	
	#app .form-page div.qr-code.pending .spinner {
		display: block;
	}
	
	#app .form-page div.qr-code.pending img {
		opacity: 0;
	}

	#app .form-page .form .store-banners {
		display: flex;
		gap: 3.5vw;
	}

	#app .form-page .form .store-banner {
		width: 40vw;
		height: 15vw;
		max-width: 200px;
		max-height: 60px;
	}

	.switch {
		width: 6ch;
		height: 2em;
		background: rgba(0,0,0,0.1);
		border-radius: 1em;
		position: relative;
		transition: background 400ms;
	}
	
	.switch.on {
		background: #FD6A02;
	}
	
	.switch .thumb {
		position: absolute;
		height: 1.5em;
		width: 1.5em;
		border-radius: 100%;
		background: white;
		top: 50%;
		transform: translate(0px,-50%);
		left: 0.375em;
		filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.25));
		transition: left 400ms;
	}
	
	.switch.on .thumb {
		left: calc(6ch - 1.875em); 
	}