/*fonts*/
@font-face {
  font-family: 'spRegular';
  src: url('../fonts/app/sfprodisplay-regular-webfont.eot');
  src: url('../fonts/app/sfprodisplay-regular-webfont.eot?#iefix')
      format('embedded-opentype'),
    url('../fonts/app/sfprodisplay-regular-webfont.woff') format('woff'),
    url('../fonts/app/sfprodisplay-regular-webfont.ttf') format('truetype'),
    url('../fonts/app/sfprodisplay-regular-webfont.svg#spRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Color variables */
:root {
  --mainTextColor: #000;
  --brandLogoColor: #000;
  --brandBgGradient: linear-gradient(180deg, #ffda19 0%, #ff61ad 100%);
  --mainBgColor: #fff;
  --navBarColor: #000;
  --navBarBgColor: #fff;
  --navBarColorHover: #fff;
  --navBarBgColorHover: #000;
  --navBarBoxShadow: 0px 15px 23px -20px rgba(0, 0, 0, 0.1);
  --navBarBorderColor: #f7f4f4;
  --navBarBurgerBgColor: #000;
  --pillBgColor: #f7f7f7;
  --pillAltColor: #fff;
  --pillAltBgColor: #000;
  --pillAltColorHover: #000;
  --pillBgColorHover: #fff;
  --pillHoverBorderColor: #000;
  --mainTransition: all 150ms ease-in-out;
}
/* Font size variables */
h1 {
  --min: 2em; /* minimum value */
  --val: 5vw; /* preferred value = 5% viewport width */
  --max: 3em; /* maximum value */
}
h2 {
  --min: 1.5em; /* minimum value */
  --val: 4vw; /* preferred value = 4% viewport width */
  --max: 2.25em; /* maximum value */
}
p {
  --min: 1em; /* minimum value */
  --val: 2.5vw; /* preferred value = 2.5% viewport width */
  --max: 1.5em; /* maximum value */
}
.create-steps li {
  --min: 2em; /* minimum value */
  --val: 5vw; /* preferred value = 5% viewport width */
  --max: 3em; /* maximum value */
}

/*general*/
body,
h1,
h2,
p,
.create-steps li {
  /* Font minimum, preferred and maximum value */
  /* TODO: custom classes font vars */
  font-size: clamp(var(--min), var(--val), var(--max)) !important;
}
html {
  scroll-behavior: smooth;
}
body {
  /* font-size: 16px !important; */
  color: var(--mainTextColor) !important;
}
body,
button,
input,
select,
textarea {
  font-family: spRegular, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#albumko {
  padding-top: 15vw;
}
h1.brand-logo {
  /* font-size: 2.55em; */
  font-weight: 600;
  text-transform: capitalize;
  color: var(--brandLogoColor);
  margin: 0;
  padding: 0;
}
h1.brand-logo:before {
  content: '';
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0 12px 0 5px;
  background: var(--brandBgGradient);
}

#wrap .navbar {
  text-transform: uppercase;
  padding: 0 1.5rem;
  min-height: 100px;
  background: var(--navBarBgColor);
  border-bottom: 1px solid var(--navBarBorderColor);
  -webkit-box-shadow: var(--navBarBoxShadow);
  -moz-box-shadow: var(--navBarBoxShadow);
  box-shadow: var(--navBarBoxShadow);
}
#wrap .navbar-brand {
  min-height: 100px;
}
.navbar a {
  /* font-size: 1em; */
  color: var(--navBarColor);
  letter-spacing: 1px;
  font-weight: 500;
  text-transform: none;
  transition: var(--mainTransition);
}
.navbar-item.brand-logo a {
  margin: 0;
}
.navbar-brand .navbar-burger {
  position: relative;
  cursor: pointer;
  height: 3rem;
  width: 3rem;
  margin-left: auto;
  margin-top: 6px;
  align-self: center;
}
.navbar-brand .navbar-burger span {
  height: 3px;
  width: 24px;
  left: calc(50% - 12px);
  background-color: var(--navBarBurgerBgColor);
}
.navbar-brand .navbar-burger span:nth-child(1) {
  top: calc(50% - 8px);
}
.navbar-brand .navbar-burger span:nth-child(2) {
  top: calc(50% - 1px);
}
.navbar-brand .navbar-burger span:nth-child(3) {
  top: calc(50% + 6px);
}
.navbar-brand .navbar-burger.is-active span:nth-child(1) {
  -webkit-transform: translateY(8px) rotate(45deg);
  transform: translateY(8px) rotate(45deg);
}
.navbar-brand .navbar-burger.is-active span:nth-child(3) {
  -webkit-transform: translateY(-6px) rotate(-45deg);
  transform: translateY(-6px) rotate(-45deg);
}

.navbar-link.is-active,
.navbar-link:focus,
.navbar-link:focus-within,
.navbar-link:hover,
a.navbar-item.is-active,
a.navbar-item:focus,
a.navbar-item:focus-within,
.navbar a.navbar-item:hover {
  background-color: var(--navBarBgColorHover) !important;
  color: var(--navBarColorHover);
  border-radius: 3px;
}
.navbar .navbar-menu {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.main-pill,
.main-pill-alt {
  /* background: #f7f7f7;
  color: #000; */
  border: none;
  padding: 8px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 9px 24px 0 0;
  cursor: pointer;
  border-radius: 18px;
  transition: var(--mainTransition);
}
.main-pill:hover {
  /* color: #fff; */
  background: #f7f7f7 !important;
}
.main-pill-alt {
  color: #fff;
  background: #000;
  margin-right: 0;
}
.main-pill-alt:hover {
  color: #000;
  background: #fff !important;
  outline: 1px solid #000;
}

.button {
  text-transform: uppercase;
  font-weight: bold;
}

.button.is-link:focus:not(:active),
.button.is-link.is-focused:not(:active) {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.button.is-link.is-hovered,
.button.is-link:hover {
  background-color: #167df0 !important;
  border-color: transparent !important;
  color: #fff;
}
/*
.main-content {
  margin-top: 100px;
} */

/* hero */
/* .hero {
 TODO: re-adjust margin top
  margin-top: 15em;
} */
.hero h2.section-header {
  /* TODO: move to root font size */
  font-size: 5em !important;
  font-weight: 700;
  line-height: 1em;
  margin-bottom: 0.5em;
}
.hero .section-info {
  /* font-size: 1.375em; */
  /* TODO: re-adjust width */
  width: 70%;
}
.hero .main-pill-alt {
  font-size: 1.5em;
  padding: 17px 50px;
  border-radius: 40px;
}
.hero p {
  margin-bottom: 3em;
  /* TODO: re-adjust width */
  width: 84%;
}

/* benefits */
/* TODO: move to MQ */
#benefits {
  position: relative;
  padding-top: 15vw;
}
/* TODO: move to MQ */
#benefits .container {
  position: unset;
}
.benefits .section-content {
  position: relative;
  /* TODO: move to MQ */
  /* width: 100vw;  */
  /* height: 120vh; */
  z-index: 2;
  /* margin-bottom: 25%; */
  margin-bottom: 10%;
}
.benefits .section-info {
  position: relative;
  z-index: 2;
  /* TODO: move to MQ */
  width: 40%;
  margin-bottom: 10vw;
  margin-top: 10vw;
}
/* TODO: move to MQ */
.benefits .section-content:last-child {
  width: 100%;
  /* margin-top: 10vw; */
  margin-top: 0;
}
/* TODO: move to MQ */
.benefits .access-svg {
  /* position: absolute;
  right: 8.5vw;
  width: 50%;
  bottom: 5vw; */
  position: absolute;
  right: 3vw;
  width: 50%;
  bottom: -8vw;
}

.benefits .container {
  display: flex;
}
.benefits-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  z-index: 2;
}
.benefits h1.section-subtitle {
  /* TODO: re-adjust font */
  font-size: 1em !important;
  color: #a7a7a7;
  text-transform: uppercase;
}
.benefits h2.section-header {
  /* font-size: 3.875em; */
  font-weight: 700;
}
.benefits p {
  /* font-size: 1.375em; */
  margin-bottom: 1em;
}
.benefits svg {
  position: relative;
  z-index: 2;
}
/* TODO: move to MQ */
/* .benefits .edit-svg,
.benefits .access-svg {
  position: absolute;
  right: 0;
} */
.benefits .access-svg {
  max-width: 889px;
  max-height: 934px;
}
/* TODO: move to MQ */
.benefits .edit-svg {
  position: absolute;
  top: 0;
  /* right: 5.5vw;
  width: 40%; */
  right: 0;
  width: 41.5%;
}
.benefits .edit-svg::after {
  content: '';
  width: 100vw;
  height: 100vw;
  position: absolute;
  left: 14vw;
  right: 0;
  /* TODO: re-enable after MQ move */
  /* background: linear-gradient(159.96deg, #ffda19 1.92%, #ff61ad 107.8%); */
}
/* .benefits .access-svg {
  position: relative;
  height: 100vw;
} */
.benefits .access-svg-wrap {
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  height: auto;
  max-width: 961px;
  max-height: 600px;
  background: #fff;
  box-shadow: 0px 0px 80px rgba(0, 0, 0, 0.15);
  bottom: 10vw;
  position: absolute;
  z-index: 2;
}
.benefits .access-svg::after {
  content: '';
  width: 100vw;
  height: 100vw;
  position: absolute;
  left: 14vw;
  right: 0;
  /* TODO: re-enable after MQ move */
  /* background: linear-gradient(159.96deg, #ffda19 1.92%, #ff61ad 107.8%); */
}

/* start creating */
#start-creating {
  padding-top: 15vw;
  padding-bottom: 15vw;
}
/* TODO: move to MQ */
.start-creating .section-subtitle {
  font-size: 1em !important;
  color: #a7a7a7;
  text-transform: uppercase;
}
/* TODO: move to MQ */
.start-creating .section-info {
  position: relative;
}

/* TODO: move to MQ */
.create-steps-visual-wrap {
  display: flex;
}

.create-steps {
  display: inline-flex;
  flex-direction: column;
  /* TODO: move to MQ */
  font-size: 1.1vw;
  width: 70%;
}
.create-steps li {
  background: linear-gradient(to right, #ffda19, #ff61ad);
  color: rgba(0, 0, 0, 1);
  background-clip: text;
  -webkit-background-clip: text;
  transition: color 0.2s ease-in-out;
}
.create-steps li:hover {
  /* color: rgba(0, 0, 0, 0); */
  cursor: pointer;
}
.create-steps li.visible {
  color: rgba(0, 0, 0, 0);
}
.create-steps-visual {
  position: relative;
  /* TODO: temp prop height remove it */
  height: 50vw;
}
/* TODO: move to MQ */
.start-creating ul.create-steps-visual {
  position: sticky;
  top: 10%;
  z-index: 20;
  height: 15vw;
  /* background: red; */
  width: 30%;
}
.create-steps-visual li {
  position: absolute;
  font-size: 6em;
  visibility: hidden;
  opacity: 0;
  transition: var(--mainTransition);
}
.create-steps-visual li.visible {
  opacity: 1;
  visibility: visible;
}

/* professional album design */
.professional-album-design {
  background: #f7f7f7;
  padding-top: 15vw;
  padding-bottom: 15vw;
}
.professional-album-design .section-info {
  text-align: center;
}
.professional-album-design .video-demo {
  margin: 6em 0 3em 0;
}
.professional-album-design .section-title,
.professional-album-design p {
  margin-bottom: 1em;
}
.professional-album-design .video-demo svg {
  border-radius: 10px;
  box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.1);
  /* TODO: temp, remove margin */
}

/* subscription plans */
.subscription-plans {
  background: linear-gradient(159.96deg, #ffda19 1.92%, #ff61ad 107.8%);
  padding-top: 15vw;
  margin-bottom: 15vw;
}
.subscription-plans .section-info {
  text-align: center;
}
.subscription-plans .section-title {
  color: #fff;
}
.subscription-plans-cards {
  display: flex;
  margin-bottom: -15%;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
  margin-top: 2em;
}
.subscription-plan-card {
  background: #fff;
  color: #000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 10px;
  width: 30%;
  padding: 1% 3%;
  box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.1);
  transition: var(--mainTransition);
}
.subscription-plan-card:hover {
  background: #000;
  color: #fff;
}

.subscription-plan-card-header-group {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 1em;
}
.subscription-plan-card-header-group:before {
  content: '';
  width: 2vw;
  height: 2vw;
  background: var(--brandBgGradient);
  border-radius: 50%;
  margin: 0 12px 0 0;
}
.subscription-plan-card-title {
  font-size: 2vw !important;
}
.subscription-plan-card-subtitle {
  font-size: 1vw;
  display: block;
}
.subscription-plan-card-header-content {
  font-size: 1vw;
}

.subscription-plan-card-header-content p::before {
  content: '\2714';
  color: #fff;
  background: #000;
  border-radius: 50%;
  font-size: 0.9em;
  margin-right: 2vw;
  line-height: 1;
  padding: 0% 2%;
}
.subscription-plan-card:hover p::before {
  background: #fff;
  color: #000;
}
.subscription-plan-card-header-content p {
  margin-bottom: 1em;
}

.subscription-plan-card-price-info p {
  font-size: 4vw !important;
  font-weight: bold;
}
.subscription-plan-card-price-info {
  color: rgba(0, 0, 0, 0.68);
  font-size: 1vw;
  font-weight: normal;
}
.subscription-plan-card:hover .subscription-plan-card-price-info {
  color: rgba(255, 255, 255, 0.68);
}
.subscription-plan-card-btn {
  background: #000;
  color: #fff;
  border: 1px solid transparent;
}
.subscription-plan-card:hover .subscription-plan-card-btn {
  background: #fff;
  color: #000;
  border: 1px solid #fff;
}
.subscription-plan-card:hover .subscription-plan-card-btn:hover {
  background: #000 !important;
  color: #fff;
  border: 1px solid #fff;
}
/* faq */
.section.faq {
  padding-top: 15vw;
}
/* TODO: move to MQ */
.section.faq h2.section-title {
  font-size: 3vw !important;
  font-weight: 700;
}
.section.faq .section-info {
  margin-bottom: 3em;
}
.section-faq-card {
  background: #f7f7f7;
  margin-bottom: 5vw;
  /* TODO: move to MQ */
  margin-bottom: 2vw;
  border-radius: 8px;
  /* TODO: move to MQ */
  border-radius: 20px;
}

.section-faq-card.active {
  background: #fff;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  /* TODO: MQ to 60px for HI RES */
}

.section-faq-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-faq-card-title {
  position: relative;
  display: block;
  width: 100%;
  font-size: 5vw;
  /* TODO: move to MQ */
  font-size: 2vw;
  font-weight: 700;
  z-index: 20;
  padding: 4% 10% 4% 10%;
}
.section-faq-card-title:hover {
  cursor: pointer;
}
.section-faq-card-title::before {
  content: url("data:image/svg+xml; utf8, <svg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><circle cx='15' cy='15' r='15' fill='%23F7F7F7' /><path d='M15.5 14.5v-3a.5.5 0 00-1 0v3h-3a.5.5 0 000 1h3v3a.5.5 0 001 0v-3h3a.5.5 0 000-1h-3z' fill='%23000' /></svg>");
  width: 15px;
  height: 15px;
  position: absolute;
  left: 3%;
  /* TODO: re-enable after move to MQ */
  /* top: 25%; */
  /* TODO: move to MQ */
  width: 3vw;
  height: 3vw;
  position: absolute;
  left: 3%;
}
.section-faq-card.active .section-faq-card-title::before {
  content: url("data:image/svg+xml; utf8, <svg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><circle cx='15' cy='15' r='15' fill='%23F7F7F7'/><path d='M11.5 14.5h7a.5.5 0 010 1h-7a.5.5 0 010-1z' fill='%23000'/></svg>");
  width: 15px;
  height: 15px;
  position: absolute;
  left: 3%;
  /* TODO: re-enable after move to MQ */
  /* top: 25%; */
  /* TODO: move to MQ */
  width: 3vw;
  height: 3vw;
  position: absolute;
  left: 3%;
}

.section-faq-card-content {
  color: rgba(0, 0, 0, 0.5);
  visibility: 0;
  opacity: 0;
  height: 0;
  transition: var(--mainTransition);
}

.section-faq-card-content.visible {
  visibility: visible;
  height: 100%;
  opacity: 1;
  padding: 0% 10% 4% 10%;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  font-size: 1vw;
}

/* reviews */
#reviews {
  background: #000;
  color: #fff;
  padding-top: 10vw;
  padding-bottom: 10vw;
}
.section.reviews .section-subtitle {
  /* TODO: responsive font */
  font-size: 1em !important;
  /* margin-top: 2vw; */
  text-transform: uppercase;
}
.review-cards-wrap {
  width: 190vw;
  overflow: hidden;
  min-height: 70vh;
  max-height: 70vh;
}
.review-cards {
  display: flex;
  width: 100%;
  margin-top: 3vw;
}
.review-card.active {
  opacity: 1;
  width: 70vw;
  margin-right: 10vw;
}
.review-card.inactive {
  margin-left: -50vw;
}
.review-card {
  opacity: 0.4;
  width: 50vw;
  transition: var(--mainTransition);
}

.review-card-avatar {
  width: 100px;
  height: 100px;
}

.review-card-content {
  /* TODO: responsive font */
  font-size: 3.875em;
  line-height: 1.25em;
  font-weight: 700;
  margin-bottom: 2vw;
}

.review-cards-controls ul {
  display: inline-flex;
  gap: 7px;
  margin-top: 7vw;
}
.review-cards-controls li {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
}
.review-cards-controls li:hover {
  cursor: pointer;
}
.review-cards-controls li.active {
  background: var(--brandBgGradient);
}

.review-card-footer p {
  /* TODO: responsive font */
  font-size: 1.25em;
  font-weight: 500;
}

/* contact */
.section.contact {
  background: linear-gradient(159.96deg, #ffda19 1.92%, #ff61ad 107.8%);
}
.section.contact h2 {
  color: #fff;
  /* font-size: 3.955em; */
  font-weight: 700;
  line-height: 1em;
  margin-bottom: 1.15em;
}
.section.contact form {
  background: #fff;
  border-radius: 10px;
  padding: 1.25em;
  box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.1);
}
.section.contact form input,
.section.contact form textarea {
  background: #f7f7f7;
  border: 0.5px solid rgba(167, 167, 167, 0.2);
  border-radius: 4px;
}
.section.contact form label {
  color: #a7a7a7;
  text-transform: uppercase;
  /* font-size: 1em; */
  display: flex;
  flex-direction: column;
}
.section.contact #email {
  color: #a7a7a7;
  height: 4.675em;
  margin: 6px 0 16px 0;
  padding: 0 1em;
}
.section.contact #message {
  resize: none;
  color: #a7a7a7;
  height: 15.625em;
  margin: 4px 0 16px 0;
  padding: 1em;
}
#contact button {
  /* font-size: 1.55em; */
  border-radius: 40px;
  padding: 0.6em 2em 0.675em 1.9em;
  line-height: 1.2em;
  margin: 0.975em 0 0.255em 0;
  width: 100%;
}

/*footer*/
footer {
  padding: 2em 1.5em;
}
footer .social-links {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
footer .contact-info {
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1em 0 0 0;
  /* font-size: 1.2em; */
}

/* Media Queries */
@media screen and (min-width: 1024px) {
  #navMenu {
    margin-left: 4em;
  }
  .navbar a {
    font-weight: 600;
    margin-top: 9px;
  }
  .navbar .navbar-menu .navbar-start a.navbar-item:hover,
  .navbar .navbar-menu .navbar-end a.navbar-item:hover {
    color: var(--navBarColor);
    text-decoration: underline;
  }
  #navMenu .navbar-end {
    align-items: center;
  }
  #navMenu .navbar-end .pill {
    padding: 8px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 9px 24px 0 0;
    cursor: pointer;
    border-radius: 40px;
  }
  #navMenu .navbar-end .pill-alt {
    margin-right: 0;
  }
  .pill,
  .pill-alt {
    border: 1px solid transparent;
  }
  .pill {
    background: var(--pillBgColor);
  }
  .pill-alt {
    color: var(--pillAltColor) !important;
    background: var(--pillAltBgColor);
  }
  .pill:hover,
  .pill-alt:hover {
    background: var(--pillBgColorHover);
    border: 1px solid var(--pillHoverBorderColor) !important;
  }
  .pill-alt:hover {
    color: var(--pillAltColorHover) !important;
  }
  /* contact */
  .section.contact .container {
    padding: 35vh 0 35vh 0;
  }
  .section.contact .section-info {
    position: absolute;
    bottom: -19.5vh;
  }
  .section.contact form {
    padding: 2.25em;
  }
  #contact button {
    width: 7em;
  }

  /* footer */
  footer {
    margin: 20vh 0 10vh 0;
  }
}

@media screen and (min-width: 1216px) {
  /* contact */
  .section.contact .section-info {
    max-width: 750px;
  }
  /* benefits */
  .benefits .container::after {
    content: '';
    width: 100vw;
    height: 140vh;
    /* TODO: move to MQ */
    height: auto;
    position: absolute;
    z-index: 1;
    background: linear-gradient(159.96deg, #ffda19 1.92%, #ff61ad 107.8%);
    top: 0;
    right: 0;
    bottom: 0;
    left: 60vw;
  }
  /* footer */
  footer {
    margin: 0 0 10vh 0;
  }
  .footer-container-wrap {
    max-width: 1152px;
    display: flex;
    justify-content: flex-end;
    margin: auto;
  }
  .footer-container {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: flex-end;
  }
  .social-links {
    width: 20%;
  }
}

@media screen and (min-width: 1408px) {
  /* contact */
  .section.contact .section-info {
    max-width: 950px;
  }
}

@media screen and (min-width: 1601px) {
  .container:not(.is-max-desktop):not(.is-max-widescreen) {
    max-width: 1644px;
  }
  /* contact */
  .section.contact .section-info {
    max-width: 1043px;
  }
}
/*
  Disable smooth scrolling when users have prefers-reduced-motion enabled
 */
/* @media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
} */