﻿/* 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*/
.btn-next-page {
  background: #FF941F;
  width: 35%;
}

.btn-next-page:hover {
  background: #FF941F;
}

@media (max-width: 989px) {
  .btn-next-page {
    width: 100%;
  }
}

.book-title {
  color: #FF941F;
}

.child-with-idol {
  margin-bottom: 40px;
}

.product-customization .flex-row {
  justify-content: center !important;
}

.choose-buttons button {
  background-color: #143BDE;
}

.choose-buttons .active {
  color: #143BDE;
}

#pageSticky .btn-gradient-green, #customizationFirstStep .btn-gradient-green {
  background-color: #FF941F;
  background-image: none;
  color: white;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  border: none;
}

#pageSticky .btn-gradient-green:hover, #pageSticky .btn-gradient-green:focus, #customizationFirstStep .btn-gradient-green:hover, #customizationFirstStep .btn-gradient-green:focus {
  background-image: none;
  color: white;
}

#pageSticky .btn-gradient-green:active, #customizationFirstStep .btn-gradient-green:active {
  -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.15);
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.15);
}

#customizationFirstStep {
  background-color: #143BDE;
  color: #ffffff;
}

@media (min-width: 1460px) {
  #customizationFirstStep .heading {
    max-width: 65%;
  }
}

#productHistory img {
  margin-bottom: 30px;
}

#bigPhrase, #testimonials {
  background-color: #143BDE;
  color: #ffffff;
}

#customizationFirstStep h1 {
  color: #ffffff;
}

#customizationFirstStep .swiper-pagination-bullet {
  background-color: #143BDE;
}

#customizationFirstStep .form-control:active, #customizationFirstStep .form-control:focus {
  border-color: #FF941F;
}

#customizationFirstStep .select-option:focus {
  border-color: #FF941F;
  border-width: 1px;
}

#customizationFirstStep .select-option.was-selected, #customizationFirstStep .select-option:active {
  border-color: #FF941F;
  background-color: #FFE3C5;
}

#customizationFirstStep .select-option.was-selected span, #customizationFirstStep .select-option:active span {
  color: #FF941F !important;
}

#customizationFirstStep .select-option.was-selected svg path, #customizationFirstStep .select-option:active svg path {
  stroke: #FF941F;
}

#customizationFirstStep .customization-box .carousel-control-next-btn:hover svg path, #customizationFirstStep .customization-box .carousel-control-next-btn:focus svg path,
#customizationFirstStep .customization-box .carousel-control-prev-btn:hover svg path,
#customizationFirstStep .customization-box .carousel-control-prev-btn:focus svg path {
  fill: #143BDE;
}

#customizationFirstStep .section-anchor {
  background-color: #ffffff;
}

#customizationFirstStep .section-anchor svg path {
  fill: #FF941F;
}

#pageSections .btn-group .btn {
  color: #FF941F !important;
  border: solid 1px #FF941F;
  background-color: #FFE3C5;
}

#pageSections .btn-group .btn:first-child {
  background-color: #FF941F !important;
  color: #ffffff !important;
}

#pageSections .btn-group .btn:first-child:hover {
  color: #eeeeee !important;
}

#pageSections .btn-group .btn:hover {
  color: #b86000 !important;
}

#productDetails h2, #productDetails h3,
#productHistory h2,
#productHistory h3,
#productDetailsSecondary h2,
#productDetailsSecondary h3,
#awesomePresent h2,
#awesomePresent h3 {
  color: #FF941F;
}

@media (min-width: 769px) {
  #productDetails h2 {
    max-width: 450px;
  }
}

@media (min-width: 769px) {
  #productHistory h2 {
    max-width: 500px;
  }
}

#bigPhrase p {
  max-width: 800px;
}

#testimonials .card {
  border-color: #ffffff;
}

#testimonials .btn svg path {
  fill: white;
}

.text-suggested-products span {
  color: #FF941F !important;
}

