/* Breakpoint viewport sizes and media queries.*/
/**/
/* Breakpoints are defined as a map of (name: minimum width), order from small to large:*/
/**/
/*    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)*/
/**/
/* The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.*/
/* Name of the next breakpoint, or null for the last breakpoint.*/
/**/
/*    >> breakpoint-next(sm)*/
/*    md*/
/*    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))*/
/*    md*/
/*    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))*/
/*    md*/
/* Minimum breakpoint width. Null for the smallest (first) breakpoint.*/
/**/
/*    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))*/
/*    576px*/
/* Maximum breakpoint width. Null for the largest (last) breakpoint.*/
/* The maximum value is calculated as the minimum of the next one less 0.1.*/
/**/
/*    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))*/
/*    767px*/
/* Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.*/
/* Useful for making responsive utilities.*/
/**/
/*    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))*/
/*    ""  (Returns a blank string)*/
/*    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))*/
/*    "-sm"*/
/* Media of at least the minimum breakpoint width. No query for the smallest breakpoint.*/
/* Makes the @content apply to the given breakpoint and wider.*/
/* Media of at most the maximum breakpoint width. No query for the largest breakpoint.*/
/* Makes the @content apply to the given breakpoint and narrower.*/
/* Media that spans multiple breakpoint widths.*/
/* Makes the @content apply between the min and max breakpoints*/
/* Media between the breakpoint's minimum and maximum widths.*/
/* No minimum for the smallest breakpoint, and no maximum for the largest one.*/
/* Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.*/
/* Image Mixins*/
/* - Responsive image*/
/* - Retina image*/
/* Responsive image*/
/**/
/* Keep images from scaling beyond the width of their parents.*/
/* Retina image*/
/**/
/* Short retina mixin for setting background-image and -size.*/
/* Resize anything*/
/* Only display content to screen readers*/
/**/
/* See: https://a11yproject.com/posts/how-to-hide-content*/
/* See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/*/
/* Use in conjunction with .sr-only to only display content when it's focused.*/
/**/
/* Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1*/
/**/
/* Credit: HTML5 Boilerplate*/
/* Sizing shortcuts*/
/* scss-lint:disable DuplicateProperty*/
/* Typography*/
/* CSS image replacement*/
/* Text truncate*/
/* Requires inline-block or block for proper styling*/
/* Visibility*/
/* Button variants*/
/**/
/* Easily pump out default styles, as well as :hover, :focus, :active,*/
/* and disabled options for all buttons*/
/* Button sizes*/
/* Lists*/
/* Unstyled keeps list items block level, just removes default browser padding and list-style*/
/* Contextual backgrounds*/
/* Single side border-radius*/
/* Framework grid generation*/
/**/
/* Used only by Bootstrap to generate the correct number of grid classes given*/
/* any value of `$grid-columns`.*/
/*/ Grid system*/
/**/
/* Generate semantic grid columns with these mixins.*/
/* For each breakpoint, define the maximum width of the container in a media query*/
@media (max-width: 479px) {
  #nextStepMain {
    width: 230px !important;
  }
}

.character::before {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 6vh;
  background-image: url("/Assets/Product/Shared/shadow-black-full.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  -webkit-transform: scale(1.4, 1);
  transform: scale(1.4, 1);
  opacity: .1;
}

@media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
  .character::before {
    background-image: url("/Assets/Product/Shared/shadow-black-full@2x.png");
  }
}

@media (max-width: 479px) {
  .character::before {
    -webkit-transform: translateY(-130%) scale(1);
    transform: translateY(-130%) scale(1);
  }
}

.character-preview .character.child img {
  transform-origin: bottom center;
  -webkit-transform: translateY(43%) translateX(1%) scale(1.6);
  transform: translateY(43%) translateX(1%) scale(1.6);
}

@media (max-width: 479px) {
  .character-preview .character.child img {
    -webkit-transform: translateY(24%) translateX(4%) scale(1.5);
    transform: translateY(24%) translateX(4%) scale(1.5);
  }
}

.character-preview .character.adult img {
  transform-origin: bottom center;
  -webkit-transform: translateY(10%) translateX(0%) scale(1.3);
  transform: translateY(10%) translateX(0%) scale(1.3);
}

@media (max-width: 479px) {
  .character-preview .character.adult img {
    -webkit-transform: translateY(-9%) translateX(0%) scale(1.1);
    transform: translateY(-9%) translateX(0%) scale(1.1);
  }
}

.character-customization {
  background-color: #FF890B;
}

.character-customization .character-preview {
  background-image: url("/Assets/Product/LoveGrandpa/bg-avatar-mobile.png");
  background-size: cover;
  background-position: center;
}

@media only screen and (min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
  .character-customization .character-preview {
    background-image: url("/Assets/Product/LoveGrandpa/bg-avatar-mobile@2x.png");
  }
}

@media (min-width: 480px) {
  .character-customization .character-preview {
    background: none;
  }
}

@media (min-width: 480px) {
  .character-customization {
    background-color: transparent;
    background-image: url("/Assets/Product/LoveGrandpa/bg-avatar.png");
  }
}

@media only screen and (min-width: 480px) and (min-device-pixel-ratio: 2), only screen and (min-width: 480px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 480px) and (min-resolution: 192dpi) {
  .character-customization {
    background-image: url("/Assets/Product/LoveGrandpa/bg-avatar@2x.png");
  }
}

.option.was-selected::before {
  border-color: #069CC1;
}

#personalizationMenu .btn-gradient-green {
  background-color: #02C05D;
  background-image: none;
  color: white;
}

#personalizationMenu .btn-gradient-green svg path {
  fill: white;
}

#personalizationMenu .personalization-menu-back:hover svg,
#personalizationMenu .personalization-menu-back:focus svg {
  fill: #02C05D;
}

#personalizationMenu .personalization-menu-step.current {
  color: #02C05D;
}

#personalizationMenu .personalization-menu-step.current::after {
  background: #02C05D;
}

#customizationOptions .intro .intro-step {
  max-width: 330px;
}

@media (min-width: 1225px) {
  #customizationOptions .intro .intro-step {
    max-width: 360px;
  }
}

@media (min-width: 1460px) {
  #customizationOptions .intro .intro-step {
    max-width: 380px;
  }
}

#customizationOptions .categories, #customizationOptions .categories .option::after {
  background-color: #02C05D !important;
}

#customizationOptionsMobile .subcategories .option {
  margin: 0 .17em;
}

.customization-options-mobile {
  background-color: #b1d131;
}