/*! minireset.css v0.0.4 | MIT License | github.com/jgthms/minireset.css */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal; }

ul {
  list-style: none; }

button,
input,
select,
textarea {
  margin: 0; }

html {
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

img,
embed,
iframe,
object,
video {
  height: auto;
  max-width: 100%; }

audio {
  max-width: 100%; }

iframe {
  border: 0; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0;
  text-align: left; }

.select:not(.is-multiple):not(.is-loading)::after {
  border: 3px solid transparent;
  border-radius: 2px;
  border-right: 0;
  border-top: 0;
  content: " ";
  display: block;
  height: 0.625em;
  margin-top: -0.525em;
  pointer-events: none;
  position: absolute;
  top: 50%;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transform-origin: center;
          transform-origin: center;
  width: 0.625em; }

.heading:not(:last-child) {
  margin-bottom: 1.5rem; }

.menu-background {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0; }

.logo, .option, .character, .header-logo, .footer-payments, .card-header, .card-cover, .colors, .variable-name, .variable-box, .art, .single-media, .single-characters, .preview-continue {
  align-items: center;
  display: flex;
  justify-content: center; }

.open-label, .label, .header-nav, .menu-nav {
  color: #293846;
  font-family: "Quicksand", "Open Sans", BlinkMacSystemFont, -apple-system, "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 1.25rem;
  font-weight: 700; }

html {
  background-attachment: fixed;
  background-color: #fff;
  background-repeat: no-repeat;
  font-size: 16px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-width: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%; }

body,
button,
input,
select,
textarea {
  font-family: "Open Sans", BlinkMacSystemFont, -apple-system, "Helvetica Neue", "Helvetica", "Arial", sans-serif; }

body {
  color: #767F88;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5; }

a {
  color: inherit;
  text-decoration: none; }

hr {
  border: none; }

strong {
  font-weight: 600; }

table,
tr,
th,
td {
  color: inherit; }

::-moz-selection {
  background-color: #FF3EA9;
  color: #fff; }

::selection {
  background-color: #FF3EA9;
  color: #fff; }

.float {
  font-size: 0.75em;
  pointer-events: none;
  position: absolute;
  text-align: center; }
  @media screen and (max-width: 768px) {
    .float {
      display: none; } }

.heading {
  font-size: 1.25rem;
  text-align: center; }
  .heading .title {
    font-size: 2em; }
  .heading .subtitle {
    color: #FF3EA9;
    margin-top: 0.25em; }

.hr {
  margin: 1em 0; }
  .hr hr {
    background-color: #B042F5;
    background-image: linear-gradient(45deg, rgba(176, 66, 245, 0.5), rgba(176, 66, 245, 0.5)), linear-gradient(45deg, #04d7ad, #59B7FF, #6166FF, #B042F5, #FF3EA9);
    border-radius: 3px;
    height: 6px;
    width: 3.75em; }
  .hr.is-turquoise hr {
    background-color: #04d7ad;
    background-image: linear-gradient(45deg, #04d7ad, #02735c); }
  .hr.is-cyan hr {
    background-color: #59B7FF;
    background-image: linear-gradient(45deg, #59B7FF, #0089f2); }
  .hr.is-blue hr {
    background-color: #6166FF;
    background-image: linear-gradient(45deg, #6166FF, #0008fa); }
  .hr.is-purple hr {
    background-color: #B042F5;
    background-image: linear-gradient(45deg, #B042F5, #7e0bc6); }
  .hr.is-pink hr {
    background-color: #FF3EA9;
    background-image: linear-gradient(45deg, #FF3EA9, #d70077); }

.age {
  color: #6166FF; }

.price {
  color: #04d7ad; }

.title {
  color: #293846;
  font-family: "Quicksand", "Open Sans", BlinkMacSystemFont, -apple-system, "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 2em;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.125; }

.open {
  align-items: center;
  display: flex; }

.open-label {
  margin-left: 0.5rem; }

.icon {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  height: 1em;
  width: 1em; }

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1280px;
  position: relative; }

.table {
  font-size: inherit; }
  .table thead {
    color: #ACACAC;
    font-size: 0.875em; }
  .table tbody th,
  .table tbody td {
    padding: 0.375em 1.5em 0.375em 0; }
  .table tbody th {
    color: #293846;
    vertical-align: top; }

.quote {
  align-items: center;
  display: flex;
  font-family: "Quicksand", "Open Sans", BlinkMacSystemFont, -apple-system, "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  justify-content: center;
  line-height: 1.25;
  padding: 1.25rem;
  text-align: center; }
  .quote p {
    flex-grow: 0;
    flex-shrink: 1; }
  .quote br {
    display: none; }
  .quote strong {
    font-size: 1.125em; }
  .quote.is-large {
    font-size: 2rem;
    font-weight: 700; }
  .quote .icon:first-child {
    align-self: flex-start;
    margin-left: auto;
    margin-right: 0.75em;
    opacity: 0.4; }
  .quote .icon:last-child {
    align-self: flex-end;
    font-size: 0.75em;
    margin-left: 0.5em;
    opacity: 0.2; }

.content {
  font-size: inherit;
  line-height: 1.5; }
  .content p:not(:last-child) {
    margin-bottom: 1em; }
  .content strong {
    color: #293846; }

.is-turquoise {
  color: #04d7ad; }

.is-cyan {
  color: #59B7FF; }

.is-blue {
  color: #6166FF; }

.is-purple {
  color: #B042F5; }

.is-pink {
  color: #FF3EA9; }

.is-light {
  background-color: whitesmoke; }

.is-dark {
  background-color: #0F0438;
  color: #A39AC1; }
  .is-dark .title,
  .is-dark .table thead,
  .is-dark .table tbody th,
  .is-dark .content strong {
    color: #fff; }

.is-alt {
  background-color: whitesmoke; }

.button, .input, .select select, .toggle {
  -moz-appearance: none;
  -webkit-appearance: none;
  align-items: center;
  border: none;
  border-radius: 0.25em;
  box-shadow: none;
  color: #fff;
  display: inline-flex;
  font-size: 1rem;
  height: 3rem;
  justify-content: flex-start;
  line-height: 1.5;
  padding: 0.5rem 1.5rem;
  position: relative;
  vertical-align: top; }
  .button:focus, .input:focus, .select select:focus, .toggle:focus, .is-focused.button, .is-focused.input, .select select.is-focused, .is-focused.toggle, .button:active, .input:active, .select select:active, .toggle:active, .is-active.button, .is-active.input, .select select.is-active, .is-active.toggle {
    outline: none; }
  .button[disabled], .input[disabled], .select select[disabled], .toggle[disabled],
  fieldset[disabled] .button,
  fieldset[disabled] .input,
  fieldset[disabled] .select select,
  .select fieldset[disabled] select,
  fieldset[disabled] .toggle {
    cursor: not-allowed; }

.button {
  background-color: #FF3EA9;
  background-image: linear-gradient(to bottom, #FF3EA9, #ff0b92);
  box-shadow: 0 12px 14px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  color: #fff;
  cursor: pointer;
  font-family: "Quicksand", "Open Sans", BlinkMacSystemFont, -apple-system, "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  height: auto;
  justify-content: center;
  line-height: 1.25;
  padding: 0.725em 1.5em 0.775em;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }
  .button:hover {
    background-image: linear-gradient(to bottom, #FF3EA9, #ff259e); }
  .button:active {
    background-image: linear-gradient(to bottom, #ff259e, #ff259e); }
  .button.is-large {
    font-size: 1.25rem;
    height: 2.5em;
    padding: 0.25em 1.5em; }
  .button.is-fullwidth {
    display: flex;
    width: 100%; }
  .button:focus, .button.is-focused {
    box-shadow: none; }
  .button:active, .button.is-active {
    background-color: #ff0b92;
    box-shadow: none; }
  .button.is-turquoise {
    background-color: #04d7ad;
    background-image: linear-gradient(to bottom, #04d7ad, #03a585); }
    .button.is-turquoise:hover {
      background-image: linear-gradient(to bottom, #04d7ad, #04be99); }
    .button.is-turquoise:active {
      background-image: linear-gradient(to bottom, #04be99, #04be99); }
  .button.is-cyan {
    background-color: #59B7FF;
    background-image: linear-gradient(to bottom, #59B7FF, #26a1ff); }
    .button.is-cyan:hover {
      background-image: linear-gradient(to bottom, #59B7FF, #40acff); }
    .button.is-cyan:active {
      background-image: linear-gradient(to bottom, #40acff, #40acff); }
  .button.is-blue {
    background-color: #6166FF;
    background-image: linear-gradient(to bottom, #6166FF, #2e35ff); }
    .button.is-blue:hover {
      background-image: linear-gradient(to bottom, #6166FF, #484dff); }
    .button.is-blue:active {
      background-image: linear-gradient(to bottom, #484dff, #484dff); }
  .button.is-purple {
    background-color: #B042F5;
    background-image: linear-gradient(to bottom, #B042F5, #9c12f2); }
    .button.is-purple:hover {
      background-image: linear-gradient(to bottom, #B042F5, #a62af4); }
    .button.is-purple:active {
      background-image: linear-gradient(to bottom, #a62af4, #a62af4); }
  .button.is-pink {
    background-color: #FF3EA9;
    background-image: linear-gradient(to bottom, #FF3EA9, #ff0b92); }
    .button.is-pink:hover {
      background-image: linear-gradient(to bottom, #FF3EA9, #ff259e); }
    .button.is-pink:active {
      background-image: linear-gradient(to bottom, #ff259e, #ff259e); }

.input, .select select {
  background-color: #fafafa;
  color: #293846;
  font-size: 1.125rem;
  max-width: 100%;
  padding: 0.5rem 1rem;
  width: 100%; }
  .input:focus, .select select:focus {
    box-shadow: 0 0 0 1px #04d7ad, 0 0 0 2px #04d7ad; }
  .input:not(:active):not(:focus):hover, .select select:not(:active):not(:focus):hover {
    box-shadow: inset 0 0 0 2px rgba(118, 127, 136, 0.2); }
  .input.is-small, .select select.is-small {
    font-size: 0.875rem; }
  .input.is-dark, .select select.is-dark {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff; }
    .input.is-dark:focus, .select select.is-dark:focus {
      box-shadow: 0 0 0 1px #fff, 0 0 0 2px #fff; }
  .input::-moz-placeholder, .select select::-moz-placeholder {
    color: currentColor;
    opacity: 0.3; }
  .input::-webkit-input-placeholder, .select select::-webkit-input-placeholder {
    color: currentColor;
    opacity: 0.3; }
  .input:-moz-placeholder, .select select:-moz-placeholder {
    color: currentColor;
    opacity: 0.3; }
  .input:-ms-input-placeholder, .select select:-ms-input-placeholder {
    color: currentColor;
    opacity: 0.3; }
  .input.is-turquoise:focus, .select select.is-turquoise:focus {
    box-shadow: 0 0 0 1px #04d7ad, 0 0 0 2px #04d7ad; }
  .input.is-cyan:focus, .select select.is-cyan:focus {
    box-shadow: 0 0 0 1px #59B7FF, 0 0 0 2px #59B7FF; }
  .input.is-blue:focus, .select select.is-blue:focus {
    box-shadow: 0 0 0 1px #6166FF, 0 0 0 2px #6166FF; }
  .input.is-purple:focus, .select select.is-purple:focus {
    box-shadow: 0 0 0 1px #B042F5, 0 0 0 2px #B042F5; }
  .input.is-pink:focus, .select select.is-pink:focus {
    box-shadow: 0 0 0 1px #FF3EA9, 0 0 0 2px #FF3EA9; }

.options {
  display: flex;
  flex-wrap: wrap; }
  .options.is-hair-type .option {
    padding: 10px; }
  .options.is-colors .option {
    height: 40px;
    width: 40px; }

.option {
  border-radius: 4px;
  cursor: pointer;
  height: 80px;
  position: relative;
  width: 80px; }
  .option:not(.is-active):hover {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); }
  .option.is-active {
    background-color: #fff;
    box-shadow: 0 0 0 2px #04d7ad, 0 10px 20px rgba(0, 0, 0, 0.2);
    z-index: 1; }
  .option img {
    height: auto;
    max-height: 100%;
    max-width: 100%;
    width: auto; }

.toggles {
  display: flex; }

.toggle {
  background-color: #fafafa;
  font-size: 1.125rem;
  font-weight: 600;
  justify-content: center;
  text-align: center; }
  .toggle:not(:last-child) {
    margin-right: 1rem; }
  .toggle.is-active {
    box-shadow: none; }
  .toggle.is-boy {
    color: #658DD5; }
    .toggle.is-boy.is-active {
      background-color: #658DD5;
      color: #fff; }
  .toggle.is-girl {
    color: #D565CC; }
    .toggle.is-girl.is-active {
      background-color: #D565CC;
      color: #fff; }

.label {
  color: #FF3EA9;
  display: block;
  font-size: 1rem;
  margin-bottom: 0.25rem; }
  .label.is-empty {
    min-height: 1.5em; }
  .label.is-turquoise {
    color: #04d7ad; }
  .label.is-cyan {
    color: #59B7FF; }
  .label.is-blue {
    color: #6166FF; }
  .label.is-purple {
    color: #B042F5; }
  .label.is-pink {
    color: #FF3EA9; }

.select {
  display: inline-block;
  height: 3em;
  position: relative;
  vertical-align: top;
  width: 100%; }
  .select:not(.is-multiple) {
    height: 3rem; }
  .select:not(.is-multiple):not(.is-loading)::after {
    border-color: #04d7ad;
    right: 1.125em;
    z-index: 4; }
  .select select {
    cursor: pointer;
    display: block;
    font-size: 1em;
    height: 3em;
    outline: none;
    width: 100%; }
    .select select::-ms-expand {
      display: none; }
    .select select[disabled]:hover,
    fieldset[disabled] .select select:hover {
      border-color: #767F88; }
    .select select:not([multiple]) {
      padding-right: 3em; }
    .select select[multiple] {
      height: auto;
      padding: 0; }
      .select select[multiple] option {
        padding: 0.5em 1em; }
  .select.is-small {
    font-size: 0.875rem; }
  .select:not(.is-multiple):not(.is-loading):hover::after {
    border-color: #293846; }
  .select.is-light:not(.is-multiple):not(.is-loading):hover::after {
    border-color: #293846; }
  .select.is-turquoise::after {
    border-color: #04d7ad !important; }
  .select.is-turquoise select:focus, .select.is-turquoise select.is-focused, .select.is-turquoise select:active, .select.is-turquoise select.is-active {
    box-shadow: 0 0 0 1px #04d7ad, 0 0 0 2px #04d7ad; }
  .select.is-cyan::after {
    border-color: #59B7FF !important; }
  .select.is-cyan select:focus, .select.is-cyan select.is-focused, .select.is-cyan select:active, .select.is-cyan select.is-active {
    box-shadow: 0 0 0 1px #59B7FF, 0 0 0 2px #59B7FF; }
  .select.is-blue::after {
    border-color: #6166FF !important; }
  .select.is-blue select:focus, .select.is-blue select.is-focused, .select.is-blue select:active, .select.is-blue select.is-active {
    box-shadow: 0 0 0 1px #6166FF, 0 0 0 2px #6166FF; }
  .select.is-purple::after {
    border-color: #B042F5 !important; }
  .select.is-purple select:focus, .select.is-purple select.is-focused, .select.is-purple select:active, .select.is-purple select.is-active {
    box-shadow: 0 0 0 1px #B042F5, 0 0 0 2px #B042F5; }
  .select.is-pink::after {
    border-color: #FF3EA9 !important; }
  .select.is-pink select:focus, .select.is-pink select.is-focused, .select.is-pink select:active, .select.is-pink select.is-active {
    box-shadow: 0 0 0 1px #FF3EA9, 0 0 0 2px #FF3EA9; }

.input.is-light, .select select.is-light,
.select.is-light select {
  background-color: whitesmoke;
  color: #293846; }

.input.is-light:not(:active):not(:focus):hover, .select select.is-light:not(:active):not(:focus):hover {
  box-shadow: inset 0 0 0 2px rgba(172, 172, 172, 0.3); }

.toggle.is-light {
  background-color: whitesmoke; }

.field:not(:last-child) {
  margin-bottom: 1.5rem; }

.control + .control {
  margin-top: 0.5rem; }

.control.is-birthday {
  display: flex; }
  .control.is-birthday .select {
    width: auto; }
  .control.is-birthday .select {
    font-size: 0.875rem; }
    .control.is-birthday .select:not(:last-child) {
      margin-right: 0.5rem; }
    .control.is-birthday .select.is-month {
      flex-grow: 1; }

@media screen and (max-width: 768px) {
  .toggle {
    flex-grow: 1;
    flex-shrink: 1; }
  .form-duo .button {
    margin-top: 1em; }
  .label.is-empty {
    display: none; } }

@media screen and (min-width: 769px) {
  .form-duo {
    display: flex; }
    .form-duo .input, .form-duo .select select, .select .form-duo select {
      flex-grow: 1; }
    .form-duo .button {
      flex-shrink: 0;
      margin-left: 1em; } }

.header {
  background-color: #0F0438; }

.header-body {
  align-items: stretch;
  display: flex;
  justify-content: space-between;
  position: relative; }

.header-open .open-label {
  color: #fff; }

.header-link {
  font-family: "Quicksand", "Open Sans", BlinkMacSystemFont, -apple-system, "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-weight: 500; }
  .header-link:not(:last-child) {
    margin-right: 1em; }

.header-cart-label {
  margin-right: 0.5rem; }

.header-links {
  align-items: center;
  display: flex;
  padding: 0.25em; }
  .header-links a {
    color: rgba(255, 255, 255, 0.5); }
  .header-links .icon {
    color: #04d7ad; }

.header-nav {
  display: flex; }
  .header-nav li:not(:last-child) {
    margin-right: 1.5em; }
  .header-nav a {
    color: #fff;
    position: relative;
    transition-duration: 100ms;
    transition-property: color; }
    .header-nav a:hover {
      color: #B042F5; }
    .header-nav a.is-active::after {
      background-color: #B042F5;
      background-image: linear-gradient(45deg, rgba(176, 66, 245, 0.5), rgba(176, 66, 245, 0.5)), linear-gradient(45deg, #04d7ad, #59B7FF, #6166FF, #B042F5, #FF3EA9);
      border-radius: 2px;
      bottom: -12px;
      content: "";
      display: block;
      height: 4px;
      left: 0;
      position: absolute;
      right: 0; }

@media screen and (max-width: 399px) {
  .header-open .open-label {
    display: none; } }

@media screen and (max-width: 768px) {
  .header {
    padding: 1.25rem; }
  .header-nav,
  .header-link.is-account {
    display: none; }
  .header-body {
    min-height: 100px; }
  .header-logo {
    left: calc(50% - 40px);
    position: absolute;
    top: calc(50% - 40px); }
    .header-logo,
    .header-logo img {
      height: 80px;
      width: 80px; } }

@media screen and (min-width: 769px) {
  .header {
    padding: 1.25rem; }
  .header-open {
    display: none; }
  .header-logo {
    flex-shrink: 0;
    margin-right: 2.5rem; }
  .header-nav {
    align-items: center;
    margin-right: auto; } }

@media screen and (min-width: 992px) {
  .header {
    padding: 1.25rem 3.75rem; } }

.footer {
  background-color: #0F0438; }
  .footer a {
    color: #A39AC1;
    transition-duration: 100ms;
    transition-property: color; }
  .footer .title {
    color: #fff; }

.footer-column-title {
  font-size: 1.5rem; }

.footer-column-links {
  line-height: 1.5; }
  .footer-column-links li:not(:last-child) {
    margin-bottom: 0.5em; }
  .footer-column-links a {
    color: #A39AC1; }
    .footer-column-links a:hover {
      color: #fff; }

.footer-form p {
  color: rgba(255, 255, 255, 0.7); }
  .footer-form p strong {
    color: #fff; }

.footer-form .form-duo {
  margin-top: 1em; }

.footer-meta {
  margin-top: 2.5rem; }

.footer-payments img {
  margin: 0 5px; }

.footer-copyright {
  font-size: 0.875em; }
  .footer-copyright a:hover {
    color: #fff; }

@media screen and (max-width: 768px) {
  .footer-copyright {
    margin-top: 1.25rem;
    text-align: center; } }

@media screen and (max-width: 991px) {
  .footer {
    padding: 2.5rem;
    padding-bottom: 3.75rem; }
  .footer-column:not(:last-child) {
    margin-bottom: 2.5rem; } }

@media screen and (min-width: 769px) {
  .footer-columns {
    display: flex; }
  .footer-column {
    flex-basis: auto;
    flex-grow: 1; }
    .footer-column:not(:last-child) {
      margin-right: 2.5rem; }
  .footer-meta {
    align-items: center;
    display: flex;
    justify-content: space-between; } }

@media screen and (min-width: 992px) {
  .footer {
    padding: 3.75rem;
    padding-bottom: 7.5rem; }
  .footer-body {
    display: flex; }
  .footer-columns {
    flex-grow: 1;
    margin-right: 2.5rem; }
  .footer-about {
    flex-shrink: 0; } }

.menu.is-active .menu-background {
  display: block; }

.menu.is-active .menu-body {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  -webkit-transform: translateX(0);
          transform: translateX(0); }

.menu-background {
  background-color: black;
  display: none;
  opacity: 0.5;
  position: fixed;
  z-index: 100; }

.menu-body {
  background-color: #fff;
  bottom: 0;
  left: 0;
  max-width: 300px;
  position: fixed;
  top: 0;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  transition-duration: 100ms;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  width: 80vw;
  z-index: 100; }

.menu-close {
  background-color: whitesmoke;
  display: flex;
  padding: 1.25rem; }
  .menu-close .open-label {
    color: #B042F5; }

.menu-content {
  padding: 2.5rem; }

.menu-nav {
  font-size: 1.5rem; }
  .menu-nav a {
    color: #293846; }
  .menu-nav li:not(:last-child) {
    margin-bottom: 0.25em; }

.menu-links {
  font-family: "Quicksand", "Open Sans", BlinkMacSystemFont, -apple-system, "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  margin-top: 1.25rem; }
  .menu-links li:not(:last-child) {
    margin-bottom: 0.25em; }

@media screen and (min-width: 769px) {
  .menu {
    display: none; } }

.burger {
  background-color: transparent;
  cursor: pointer;
  display: block;
  height: 2rem;
  position: relative;
  width: 2rem; }
  .burger div {
    background-color: #fff;
    border-radius: 2px;
    height: 4px;
    left: calc(50% - 0.75rem);
    position: absolute;
    -webkit-transform-origin: center;
            transform-origin: center;
    transition-duration: 100ms;
    transition-property: background-color, opacity, -webkit-transform;
    transition-property: background-color, opacity, transform;
    transition-property: background-color, opacity, transform, -webkit-transform;
    transition-timing-function: ease-out;
    width: 1.5rem; }
    .burger div:nth-child(1) {
      top: calc(50% - 2px - 4px - 4px); }
    .burger div:nth-child(2) {
      top: calc(50% - 2px); }
    .burger div:nth-child(3) {
      top: calc(50% - 2px + 4px + 4px); }
  .burger.is-active div:nth-child(1) {
    -webkit-transform: translateY(8px) rotate(45deg);
            transform: translateY(8px) rotate(45deg); }
  .burger.is-active div:nth-child(2) {
    opacity: 0; }
  .burger.is-active div:nth-child(3) {
    -webkit-transform: translateY(-8px) rotate(-45deg);
            transform: translateY(-8px) rotate(-45deg); }
  .burger.is-light div {
    background-color: #B042F5; }

.cards {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: -1.25rem; }

.card {
  align-items: stretch;
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  margin: 1.25rem;
  max-width: 360px;
  overflow: hidden; }
  .card.is-pink .card-header {
    background-image: url("../images/backgrounds/Pink.png"); }
  .card.is-green .card-header {
    background-image: url("../images/backgrounds/Green.png"); }
  .card.is-yellow .card-header {
    background-image: url("../images/backgrounds/Yellow.png"); }

.card-header {
  align-items: flex-end;
  background-repeat: repeat-x;
  background-size: 100% 170px;
  height: 220px;
  margin-bottom: -30px; }

.card-title {
  color: #293846; }

.card-body {
  align-items: stretch;
  color: #767F88;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.25rem; }

.card-description {
  flex-grow: 1; }

.card-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: 1em; }

.card-price strong {
  color: #293846; }

@media screen and (max-width: 768px) {
  .card-footer {
    flex-direction: column; }
  .card-price {
    margin-top: 1em; } }

@media screen and (min-width: 1280px) {
  .cards {
    flex-wrap: none;
    justify-content: space-between; } }

.colors {
  flex-wrap: wrap; }

.color {
  border-radius: 2px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  display: block;
  height: 1em;
  margin: 0.5em;
  width: 1em; }
  .color.is-hair-black {
    background-color: #180501; }
  .color.is-hair-brown-dark {
    background-color: #8B572A; }
  .color.is-hair-brown-light {
    background-color: #C68E5C; }
  .color.is-hair-blond {
    background-color: #E9C590; }
  .color.is-hair-red {
    background-color: #EA7752; }
  .color.is-skin-dark {
    background-color: #845E3C; }
  .color.is-skin-beige {
    background-color: #DAC99D; }
  .color.is-skin-pink {
    background-color: #F7D6B8; }

.variables {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }
  .variables .variable {
    margin: 0 0.5em 1em; }

.variable {
  text-align: center;
  width: 7.5em; }

.variable-name {
  font-size: 0.875em;
  line-height: 1.25;
  margin-bottom: 1em;
  min-height: 2.5em;
  opacity: 0.7;
  padding: 0 0.5em; }

.variable-box {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  height: 7.5em;
  width: 7.5em; }

.art.is-cloud,
.art.is-cloud img {
  height: 332px;
  width: 1045px; }

.newsletter {
  position: relative; }
  .newsletter .float {
    display: none;
    left: 5%;
    top: calc(50% - 150px); }

.newsletter-form {
  margin-left: auto;
  margin-right: auto;
  max-width: 40em; }

@media screen and (max-width: 768px) {
  .newsletter {
    padding: 2.5rem 1.25rem; } }

@media screen and (min-width: 769px) {
  .newsletter {
    padding: 2.5rem; }
  .newsletter-form {
    display: flex; }
    .newsletter-form .field:not(:last-child) {
      flex-grow: 1;
      margin-right: 1em; } }

@media screen and (min-width: 992px) {
  .newsletter {
    padding: 7.5rem 2.5rem; } }

@media screen and (min-width: 1280px) {
  .newsletter .float {
    display: block; } }

.carousel-book {
  -webkit-perspective: 2200px;
          perspective: 2200px; }

@supports (transition: transform 0.9s ease) {
  .carousel-book .carousel-page {
    transition: -webkit-transform 0.9s ease;
    transition: transform 0.9s ease;
    transition: transform 0.9s ease, -webkit-transform 0.9s ease; } }

.carousel-book:not(.is-ready) * {
  transition: none !important; }

.carousel-book {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d; }
  .carousel-book::after {
    clear: both;
    content: "";
    display: table; }

.carousel-page {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  max-height: 100%;
  min-height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 50%;
  -webkit-transform: rotateY(0);
          transform: rotateY(0); }

.carousel-page:nth-child(2) {
  float: left;
  position: relative; }

.carousel-page:nth-child(even) {
  left: 0;
  -webkit-transform-origin: 100%;
          transform-origin: 100%; }

.carousel-page:nth-child(odd) {
  right: 0;
  -webkit-transform-origin: 0;
          transform-origin: 0;
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg); }
  .carousel-page:nth-child(odd):hover {
    cursor: auto; }
  .carousel-page:nth-child(odd):hover {
    cursor: auto; }

.carousel-page.is-active {
  z-index: 2; }

.carousel-page.is-active:nth-child(even) {
  -webkit-transform: rotateY(10deg);
          transform: rotateY(10deg); }
  .carousel-page.is-active:nth-child(even):hover {
    -webkit-transform: rotateY(15deg);
            transform: rotateY(15deg); }

.carousel-page.is-active:nth-child(odd) {
  -webkit-transform: rotateY(-10deg);
          transform: rotateY(-10deg); }
  .carousel-page.is-active:nth-child(odd):hover {
    -webkit-transform: rotateY(-15deg);
            transform: rotateY(-15deg); }

.carousel-page.is-active:nth-child(odd) ~ .carousel-page:nth-child(even) {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg); }

.carousel-page.is-active:nth-child(odd) ~ .carousel-page:nth-child(odd) {
  -webkit-transform: rotateY(0);
          transform: rotateY(0); }

.carousel-page.was-active {
  z-index: 1; }

.carousel-page.is-animating:nth-child(odd) {
  z-index: 4; }

.carousel-page.is-animating:nth-child(odd) ~ .carousel-page.is-animating {
  z-index: 3; }

.carousel-page.is-animating + .carousel-page:not(.is-animating):nth-child(odd) {
  z-index: 1; }

.carousel-book > .carousel-spread {
  display: none; }

.carousel-book > .carousel-spread:first-child {
  display: block;
  overflow: hidden;
  width: 100%; }

.no-csstransforms3d .carousel-page {
  display: none; }

.no-csstransforms3d .carousel-page.is-active {
  display: block;
  float: left;
  position: relative; }

.carousel-spread {
  position: absolute;
  top: 0;
  width: 200%; }

.carousel-page.with-spread:nth-child(odd) .carousel-spread {
  left: -100%; }

.no-csstransforms3d .carousel-page.with-spread.is-active + .carousel-page.with-spread.is-active .carousel-spread {
  left: -100%; }

.carousel-book[data-useragent*='MSIE 10.0'] .carousel-page {
  opacity: 0; }

.carousel-book[data-useragent*='MSIE 10.0'] .carousel-page.is-active {
  transition: opacity 0.9s ease, -webkit-transform 0.9s ease;
  transition: transform 0.9s ease, opacity 0.9s ease;
  transition: transform 0.9s ease, opacity 0.9s ease, -webkit-transform 0.9s ease;
  opacity: 1; }

.carousel-book[data-useragent*='MSIE 10.0'] .carousel-page.was-active {
  transition-delay: 2s;
  transition: opacity 0.9s ease, -webkit-transform 0.9s ease;
  transition: transform 0.9s ease, opacity 0.9s ease;
  transition: transform 0.9s ease, opacity 0.9s ease, -webkit-transform 0.9s ease;
  opacity: 0; }

.carousel-book {
  height: 0;
  padding-top: 36%;
  position: relative;
  width: 100%; }

.carousel-book:not(.with-spreads)::before {
  color: #ACACAC;
  content: "Click the cover to open";
  font-size: 1.25rem;
  line-height: 1;
  margin-top: -1.25rem;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 50%; }

.carousel-book img {
  width: 100%; }

.single-gallery {
  margin-left: auto;
  margin-right: auto;
  max-width: 720px; }

.single-meta {
  color: #293846; }

.single-description {
  margin-top: 0.5em; }

.single-jump {
  margin-top: 0.5em;
  opacity: 0.5; }
  .single-jump:hover {
    opacity: 1; }
  .single-jump a:hover {
    text-decoration: underline; }

.single-form {
  margin-top: 1rem; }

.single-form-submit {
  margin-top: 1rem; }

.single-quotes {
  align-items: center;
  display: flex;
  justify-content: center; }

.single-thumbnails {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: -60px; }

.single-thumbnail {
  flex-grow: 0;
  flex-shrink: 1;
  height: 120px;
  position: relative;
  width: 180px; }
  .single-thumbnail img {
    border-radius: 0.5em;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); }
  .single-thumbnail:not(:last-child) {
    margin-right: 1.25rem; }

.single-customization {
  padding: 2.5rem; }

.single-section {
  padding: 2.5rem; }

.single-header {
  text-align: center; }

.single-heading {
  font-size: 1.675em; }

.single-variables {
  margin-top: 2.5rem; }

.single-message {
  font-size: 1.125rem; }

.single-message-title {
  font-size: 2em; }

.single-media {
  flex-grow: 1;
  flex-shrink: 1; }

.single-characters {
  flex-wrap: wrap;
  max-width: 600px; }

.single-data-title {
  font-size: 1.75em; }

@media screen and (max-width: 768px) {
  .single-content {
    padding: 1.25rem; }
  .single-form-gender {
    margin-top: 1rem; }
  .single-form-submit .button {
    display: flex;
    width: 100%; }
  .single-header {
    font-size: 1.25rem; } }

@media screen and (max-width: 991px) {
  .single-quotes {
    flex-direction: column;
    padding: 1.25rem; }
  .single-thumbnails,
  .single-message-title br {
    display: none; }
  .single-media {
    margin-top: 2.5rem; }
  .single-data-title {
    margin-top: 1em; } }

@media screen and (min-width: 769px) and (max-width: 991px) {
  .single-content {
    margin-top: 2.5rem; } }

@media screen and (min-width: 769px) {
  .single-main {
    padding: 2.5rem;
    padding-bottom: 0; }
  .single-image {
    border-radius: 0.5em;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); }
  .single-title {
    font-size: 2.5rem; }
  .single-meta {
    font-size: 1.25rem; }
  .single-description {
    font-size: 1.125rem; }
  .single-form-fields {
    display: flex; }
  .single-form-name {
    flex-grow: 1;
    flex-shrink: 1;
    margin-right: 1em; }
  .single-section {
    padding: 5rem; }
  .single-header {
    font-size: 1.5rem; }
  .single-message {
    font-size: 1.25rem; } }

@media screen and (min-width: 992px) {
  .single-main {
    padding: 3.75rem 3.75rem 0; }
  .single-intro {
    display: flex; }
  .single-gallery {
    flex-grow: 0;
    flex-shrink: 0;
    width: 50%; }
  .single-content {
    flex-grow: 1;
    flex-shrink: 1;
    margin-left: 2.5rem; }
  .single-quotes {
    padding: 2.5rem 0; }
    .single-quotes .quote {
      width: 33.3333%; }
  .single-customization {
    padding-top: calc(2.5rem + 60px); }
  .single-body {
    align-items: center;
    display: flex; }
  .single-message {
    max-width: 16em;
    width: 35%; }
  .single-data {
    display: flex;
    justify-content: space-between; }
  .single-data-main,
  .single-data-side {
    width: calc(50% - 1.25rem); }
  .single-data-title:not(:first-child) {
    margin-top: 1em; } }

@media screen and (min-width: 1280px) {
  .single-title {
    font-size: 3rem; }
  .single-content {
    margin-left: 3.75rem; }
  .single-meta {
    font-size: 1.5rem; }
  .single-description {
    font-size: 1.25rem; }
  .single-customization {
    padding: 3.75rem;
    padding-top: calc(2.5rem + 120px); }
  .single-section {
    padding: 7.5rem 3.75rem; }
  .single-message {
    font-size: 1.5rem; }
  .single-data {
    font-size: 1.25rem; }
  .single-data-main {
    width: calc(60% - 2.5rem); }
  .single-data-side {
    width: calc(40% - 2.5rem); } }

@media screen and (min-width: 1360px) {
  .single-gallery {
    margin-left: -40px;
    width: 680px; } }

@media screen and (min-width: 1440px) {
  .single-gallery {
    margin-left: -80px;
    width: 720px; } }

.preview-main {
  background-color: #fafafa;
  box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.05); }

.preview-side {
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
  position: relative; }

.preview-fields {
  -webkit-overflow-scrolling: touch;
  padding: 1.25rem; }

.preview-header {
  text-align: center; }
  .preview-header .hr {
    display: inline-block; }

.preview-submit {
  background-color: #fff;
  box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.05);
  padding: 1.25rem; }

.preview-toggles {
  justify-content: space-between; }
  .preview-toggles .toggle {
    flex-grow: 1; }

.preview-carousel {
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px; }

@media screen and (max-width: 768px) {
  .preview-header {
    padding: 1.25rem; }
  .preview-continue {
    padding: 2.5rem; } }

@media screen and (min-width: 769px) {
  .preview-lead {
    padding: 2.5rem; }
  .preview-header {
    margin-bottom: 2.5rem; }
  .preview-title {
    font-size: 2.5rem; }
  .preview-subtitle {
    font-size: 1.125rem; }
  .preview-continue {
    margin-top: 2.5rem; } }

@media screen and (min-width: 992px) {
  .preview-main {
    min-height: 100vh;
    overflow: hidden;
    padding-left: 23.75rem;
    position: relative; }
  .preview-side {
    align-items: stretch;
    bottom: 0;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    left: 0;
    position: absolute;
    top: 0;
    width: 20rem; }
  .preview-fields {
    flex-grow: 1;
    flex-shrink: 1;
    overflow-x: hidden;
    overflow-y: auto; }
  .preview-lead {
    flex-grow: 1;
    flex-shrink: 1; }
  .preview-header {
    margin-bottom: 3.75rem; }
  .preview-title {
    font-size: 3rem; }
  .preview-subtitle {
    font-size: 1.25rem; } }

.index-main {
  background-color: #fff; }

.index-intro {
  position: relative; }
  .index-intro .art {
    position: absolute;
    right: 0;
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
    -webkit-transform-origin: center right;
            transform-origin: center right; }

.hello {
  max-width: 24em;
  position: relative; }

.hello-title {
  font-size: 2.5em; }

.hello-text {
  margin-top: 1em; }

.hello-button {
  margin-top: 2em; }
  .hello-button .button {
    font-size: 1.5em; }

.index-preview {
  background-color: whitesmoke; }
  .index-preview .input, .index-preview .select select, .select .index-preview select,
  .index-preview .toggle {
    background-color: #fff; }

.try {
  position: relative; }
  .try .float {
    right: -120px;
    top: -100px;
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1); }

.try-header {
  margin-bottom: 1.25rem; }

.try-form {
  margin: 0; }

.index-books {
  background-color: #0F0438;
  position: relative; }
  .index-books .heading {
    margin-bottom: 2.5rem; }
    .index-books .heading .title {
      color: #fff; }
  .index-books .float {
    left: -160px;
    top: -20px; }

.index-variables {
  overflow: hidden;
  position: relative; }

.index-variables-background {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  background-image: url("../images/backgrounds/open-book.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.2; }

.index-variables-content {
  position: relative; }

@media screen and (max-width: 768px) {
  .index-intro {
    padding: 2.5rem; }
    .index-intro .art {
      opacity: 0.3; }
    .index-intro .hello {
      font-size: 1.125rem; }
  .index-preview {
    padding: 2.5rem; }
  .index-books,
  .index-variables {
    padding: 2.5rem 1.25rem; } }

@media screen and (min-width: 769px) {
  .index-intro {
    padding: 2.5rem; }
    .index-intro .hello {
      font-size: 1.25rem; }
  .index-preview {
    padding: 2.5rem; }
  .try-form {
    display: flex;
    flex-wrap: wrap; }
  .try-field:not(:last-child) {
    margin-right: 1rem; }
  .try-story,
  .try-name {
    flex-grow: 1; }
  .index-books {
    padding: 2.5rem; }
  .index-variables {
    padding: 7.5rem 2.5rem; } }

@media screen and (min-width: 992px) {
  .index-intro {
    padding: 7.5rem 3.75rem; }
    .index-intro .art {
      -webkit-transform: none;
              transform: none; }
  .try-form {
    flex-wrap: nowrap; }
    .try-form .field:not(:last-child) {
      margin-bottom: 0; }
  .index-preview {
    padding: 2.5rem 3.75rem; }
  .index-books {
    padding: 7.5rem 3.75rem; }
  .index-variables {
    padding: 11.25rem 3.75rem; }
  .index-variables-content .heading {
    font-size: 1.5rem; } }