/* override default breakpoints */
/* function to convert the calc function in to rem based
$first- should be in % */
/** Slick Carousel Starts **/
/** Slick Carousel Ends **/
@media (min-width: 768px) {
  #dynamicKitModal .modal-dialog {
    max-width: 28.25rem;
    margin-left: auto;
    margin-right: auto;
    height: auto; } }

#dynamicKitModal .modal-dialog .modal-content {
  overflow-x: hidden; }
  #dynamicKitModal .modal-dialog .modal-content .display-content,
  #dynamicKitModal .modal-dialog .modal-content .romance-text-all {
    display: inline;
    text-align: center; }
  #dynamicKitModal .modal-dialog .modal-content .close {
    line-height: inherit; }
  #dynamicKitModal .modal-dialog .modal-content .text-show-less {
    margin-left: -0.625rem; }
  #dynamicKitModal .modal-dialog .modal-content .content-wrapper {
    margin: 0 auto; }
    #dynamicKitModal .modal-dialog .modal-content .content-wrapper .title, #dynamicKitModal .modal-dialog .modal-content .content-wrapper .romance-content, #dynamicKitModal .modal-dialog .modal-content .content-wrapper .description {
      margin: 0 auto;
      text-align: center; }
      @media (max-width: 991.98px) {
        #dynamicKitModal .modal-dialog .modal-content .content-wrapper .title, #dynamicKitModal .modal-dialog .modal-content .content-wrapper .romance-content, #dynamicKitModal .modal-dialog .modal-content .content-wrapper .description {
          max-width: 20rem; } }
    #dynamicKitModal .modal-dialog .modal-content .content-wrapper .romance-content {
      margin-bottom: 0.25rem; }

#dynamicKitModal .modal-body {
  background: #fff; }

@media (min-width: 768px) {
  #dynamicKitModal .screen {
    width: 28.25rem; } }

#dynamicKitModal .screen.get-started-screen .img-wrapper {
  width: 15.9375rem;
  margin: 0 auto; }
  @media (max-width: 767.98px) {
    #dynamicKitModal .screen.get-started-screen .img-wrapper {
      width: 12.5rem; } }
  #dynamicKitModal .screen.get-started-screen .img-wrapper img {
    width: 100%; }

#dynamicKitModal .screen.get-started-screen .price {
  margin-bottom: 3.25rem; }
  @media (min-width: 576px) {
    #dynamicKitModal .screen.get-started-screen .price {
      margin-bottom: 1.75rem; } }

#dynamicKitModal .screen.review-screen .img-wrapper {
  width: 15.9375rem;
  margin: 0 auto; }
  @media (max-width: 767.98px) {
    #dynamicKitModal .screen.review-screen .img-wrapper {
      width: 12.5rem; } }
  #dynamicKitModal .screen.review-screen .img-wrapper img {
    width: 100%; }

@media (min-width: 768px) {
  #dynamicKitModal .screen.review-screen .d-kit-review-msg {
    margin-top: -3.75rem; } }

#dynamicKitModal .screen.review-screen .d-kit-review-msg .d-kit-review-error-msg {
  border: 0.0625rem solid #d0021b;
  background-color: #f9f6f6; }
  #dynamicKitModal .screen.review-screen .d-kit-review-msg .d-kit-review-error-msg svg.circle-info-red {
    fill: #d0021b; }

#dynamicKitModal .screen .img-wrapper {
  min-height: 12.5rem;
  margin: 0 auto; }
  #dynamicKitModal .screen .img-wrapper img {
    width: 12.5rem; }

#dynamicKitModal .screen .select-fragrance {
  background-color: #f7f7f7; }

#dynamicKitModal .screen .custom-select-wrapper {
  max-width: 100%; }

#dynamicKitModal .screen .slick-carousel {
  margin-left: -0.25rem; }
  #dynamicKitModal .screen .slick-carousel .carousel-tile-link .carousel-tile-card {
    border: 0.0625rem solid #696158;
    min-height: 3.5rem; }
  #dynamicKitModal .screen .slick-carousel .carousel-tile-link .carousel-tile-cta:focus::after {
    border: none;
    -webkit-box-shadow: none;
            box-shadow: none; }
  #dynamicKitModal .screen .slick-carousel .slick-slide {
    padding: 0 0.25rem; }
    #dynamicKitModal .screen .slick-carousel .slick-slide.selected .carousel-tile-card {
      border: 0.25rem solid #4e616a; }
  #dynamicKitModal .screen .slick-carousel.custom-carousel .custom-arrow.custom-next {
    top: 2.5rem;
    right: -2.5rem;
    background: transparent;
    border: none;
    -webkit-box-shadow: none;
            box-shadow: none; }
    #dynamicKitModal .screen .slick-carousel.custom-carousel .custom-arrow.custom-next:hover, #dynamicKitModal .screen .slick-carousel.custom-carousel .custom-arrow.custom-next:focus {
      border: none; }
      #dynamicKitModal .screen .slick-carousel.custom-carousel .custom-arrow.custom-next:hover::after, #dynamicKitModal .screen .slick-carousel.custom-carousel .custom-arrow.custom-next:focus::after {
        border: none; }
  #dynamicKitModal .screen .slick-carousel.custom-carousel .custom-arrow.custom-prev {
    top: 2.5rem;
    left: -2.5rem;
    background: transparent;
    border: none;
    -webkit-box-shadow: none;
            box-shadow: none; }
    #dynamicKitModal .screen .slick-carousel.custom-carousel .custom-arrow.custom-prev:hover, #dynamicKitModal .screen .slick-carousel.custom-carousel .custom-arrow.custom-prev:focus {
      border: none; }
      #dynamicKitModal .screen .slick-carousel.custom-carousel .custom-arrow.custom-prev:hover::after, #dynamicKitModal .screen .slick-carousel.custom-carousel .custom-arrow.custom-prev:focus::after {
        border: none; }

#dynamicKitModal .screen .fragrance-list-wrapper {
  background-color: #f7f7f7; }
  #dynamicKitModal .screen .fragrance-list-wrapper .edit {
    background-color: transparent; }

#dynamicKitModal .screen .d-kit-quantity .form-control + label {
  font-size: 0.75rem;
  font-weight: bold;
  left: 0.625rem;
  top: 0.25rem; }

#dynamicKitModal .screen .total .price {
  color: #000; }