html,body {
    overflow-x: hidden;
    }
    .breadcrumb a{
      color: #fff;
    }
    .breadcrumb.is-active a span{
      color: #fff;   
     }
     .product-page .breadcrumb a{
      color: #757575;
    }
    .product-page .breadcrumb.is-active a span{
      color: #757575;   
     }
    .productView-details table tbody tr th{
      vertical-align: top;
    }
    .cart-page table.cart .form-input--incrementTotal {
       text-align: center;
     }



     .options-modal .steps-wrapper .button-wrapper button {
         margin-top: 15px;
      }

      .page.kd-brand-page {
         margin: 45px 0 0;
         padding: 0 24px;
      }

      .card .card-figure .card-image {
         object-fit: contain;
      }
    @media only screen and (min-width: 2000px) {
        .kd-banner-section .kd-banner-video img{
            max-width: unset;
            width: 100%;
        }
        .hair-systems-wrapper .image-wrapper .hair-systems-image img{
            max-width: unset;
            width: 100%;
        }
        .newsletter-section .newsletter-inner {
          padding: 3rem 10px !important;
        }
    }
    @media only screen and (min-width: 1200px){
        .heroCarousel-slide .heroCarousel-image{
            object-fit: unset !important;
        }
        .heroCarousel-slide .heroCarousel-image-wrapper{
            height: 56.25vw !important;
        } 
        .kd-banner-section .kd-banner-info {
           padding: 50px 0px;
        }
        .kd-banner-info .heading {
          font-size: 38px !important;
        }
        .hair-systems-section .hair-systems-info {
          padding: 50px 12% !important;
        }
        .newsletter-section .newsletter-inner {
          padding: unset;
          padding-bottom: 8px;
          padding-top: 35px;
        }


        .product-page .productView-images .productView-thumbnails {
           grid-template-columns: 1fr 1fr 1fr;
        }
        .product-page .productView-images {
          width: 65% ;
        }
        .product-page .productView-details-wrapper {
          width: 35%;
        }
        .product-page .options-wrapper .form-option {
          min-height: 81px !important;
        }
        .product-page .productView-details-wrapper .set-rectangle label.form-option{
          min-height: 81px;
        }

        .account.account--fixedSmall{
           width: 40% !important;
        }
    }
    @media only screen and (min-width: 992px){
        .form-field .form-prefixPostfix wrap .form-prefixPostfix-button--postfix{
            margin: unset;
        }
        .form-field .form-prefixPostfix .form-input, .form-prefixPostfix .button {
           width: auto;
        }
        .form-field .form-prefixPostfix-button--postfix {
           margin:unset;
           margin-left: -15px !important;
        }
        .heroCarousel-slide .heroCarousel-image{
            object-fit: contain;
        }
        .heroCarousel-slide .heroCarousel-image-wrapper{
            height: unset;
        } 
        .kd-banner-section .kd-banner-info {
           padding: 20px 0px !important;
        }
        .kd-banner-info .heading {
          font-size: 25px !important;
        }
        .newsletter-section .newsletter-inner {
          padding: unset;
          padding-bottom: 8px;
        }
        .need-help-section h1{
            font-size: 36px !important;
        }
        :is(.hair-systems-section, .best-replacement-system-section, .hair-system-reviews-section, .why-lordhair-section, lordhair-partners-section) .hair-systems-desc  h1{
            font-size: 36px !important;
        }
        .why-lordhair-section .lordhair-reasons {
           padding: 30px 7% !important;
        }
        .newsletter-section .button {
          margin-left: -15px !important;
        }
        .header .navPages-list .navPages-action {
           padding: 11px 16px !important;
        }
        .product-page .productView-images {
          width: 60%;
        }
        .product-page .productView-details-wrapper {
          width: 40%;
        }
        .product-page .options-wrapper .form-option {
          min-height: 60px !important;
        }
        .product-page .productView-details-wrapper .set-rectangle label.form-option{
          min-height: 60px !important;
        }
        .options-modal .step .step-content {
           height: 450px !important;
         }

         .breadcrumbs .breadcrumb {
            font-size: 13px !important;
        }



         .cart-total{
          border-bottom: 0 !important;
        }
        .cart-page table.cart .cart-item-title {
           padding-top: 0.5rem;
        }
        .cart-item-quantity {
          padding-top: 0.5rem;
        }

        .account-wrapper, .header-cart-wrapper {
           width: 400px !important;
        }



        #quickSearch {
           height: 125px;
        }

        .account.account--fixed {
          margin: 0 auto !important;
          width: 66.66667% !important;
        }

        .login-row{
          width: 100% !important;
        }

        .previewCart .previewCartAction {
           position: fixed;
           bottom: 0;
        }
     }  
     @media only screen and (min-width: 1024px) and (max-width: 1439px){
        .category-page .category-desc {
             max-width: 425px;
             height: calc(100% - 16px);
             top: 10px;
             padding: 10px;
          }
         .category-page .category-header-image { 
            height: auto;
         }
         .category-page .kd-banner {
           height: auto;
         }
        .category-page .category-desc h2{
          font-size: 20px;
        }
        .category-page .category-desc p{
          font-size: 15px;
        }
        :is(.category-page, .search-page) .filter-wrapper {
          padding: 15px 8px;
        }
        :is(.category-page, .search-page) .productGrid {
          grid-template-columns: 1fr 1fr 1fr;
        }
     }
     @media only screen and (min-width: 600px) and (max-width: 1023px){
        .category-page .category-header-image { 
            height: auto;
         }
         .category-page .kd-banner {
           height: auto;
         }
         .category-page .category-desc {
           max-width: 355px;
           height: calc(100% - 14px);
           padding: 4px;
           border-radius: 10px;
           top: 8px;
        }
        .category-page .category-desc h2{
          font-size: 16px;
        }
        .category-page .category-desc p{
          font-size: 11px;
        }
        .category-page .category-page-wrapper {
           grid-template-columns: 0.5fr 1fr;
        }
        :is(.category-page, .search-page) .productGrid {
          grid-template-columns: 1fr 1fr;
        }





        
        .cart-page .cart-totals{
          width: 536px !important;
        }
     }
    @media only screen and (min-width: 600px){
        .slick-next {
            top: 35%;
        }
        .slick-prev {
            top: 35%;
        }
        .md-btn {
          min-width: 144px;
          height: 48px;
          line-height: 48px;
        }
        .kd-banner-section .kd-banner-info{
            padding: 50px 0px !important;
        }
        .kd-banner-info .heading {
          font-size: 20px !important;
          margin: 0 0 20px !important;
        }
        .kd-banner-section .kd-banner-info {
           padding: 6px 0px;
        }
        .hair-systems-section .hair-systems-wrapper  .hair-systems-info{
            padding: 6px 3%;
        }
        .hair-systems-section .hair-systems-info h3 {
           font-size:20px;
        }
       .hair-systems-section .hair-systems-info p {
           margin: unset;
          font-size:14px;
        }
        .need-help-section h1{
            font-size: 30px;
        }
        :is(.hair-systems-section, .best-replacement-system-section, .hair-system-reviews-section, .why-lordhair-section, lordhair-partners-section) .hair-systems-desc  h1{
            font-size: 30px;
        }
        .why-lordhair-section .lordhair-reasons {
           padding: 30px 0%;
        }
        .newsletter-section .button {
          margin-left: unset;
        }
        .modal-close{
            top: 0.5rem !important;
        }
        .quick-search-wrapper h6{
            margin-top: 10px;
        }
        .header .navPages-list .navPages-action {
           padding: 0.78571rem 0;
        }
        .product-page .productView-images {
          width: 55%;
        }
        .product-page .productView-details-wrapper {
          width: 45%;
        }
        .product-page .options-wrapper .form-option {
          min-height: 55px;
        }
        .product-page .productView-details-wrapper .set-rectangle label.form-option{
           min-height: 55px;
         }
         .options-modal {
            max-width: 685px;
         }
        .options-modal button {
           max-width: 316px;
           height: 50px;
        }
        .options-modal .step .step-content {
           height: 424px;
         }

         .breadcrumbs .breadcrumb {
            font-size: 10px;
         }



         .cart-total-value {
           width: 50%;
         }
         .cart-total-label {
            text-align: left;
        }
        .cart-total{
          border-bottom: 1px solid #e5e5e5;
        }
        #checkout-app .layout-main {
          width: 100%;
        }


        .account-wrapper, .header-cart-wrapper {
           width: 300px;
        }

        .form-actions .forgot-password{
          margin-top: 10px !important;
        }

        .account.account--fixedSmall{
          width: 50%;
          margin: 0 auto;
        }

        .account.account--fixed {
           width: 70%;
           margin: 0 auto;
        }
        .login-row{
          width: 90%;
        }
        #product-listing-container .actionBar{
              margin:unset;
        }
        .kd-brand-page .kd-brand-page-sidebar{
            width:25%;
         }
       .kd-brand-page .kd-brand-page-content{
           width:75%;
         }

         
        .login .breadcrumbs{
            display:none;
        }
        .forgotpassword-page .breadcrumbs{
            display: none;
        }
        .createaccount-page .breadcrumbs{
            display: none;
        }
    }
    @media only screen and (max-width: 600px){
        .best-replacement-system-wrapper .replacement-card-wrapper a img{
            height: 23vh;
        }
        .best-replacement-system-wrapper {
           display: unset;
        }
        .kd-banner-video img{
          height: 38vh;
          max-width: none;
          width: 100%;
         object-fit: cover;
        }
        .footer .footer-info .footer-info-col--small {
          width: 50%;
          text-align: left;
        }
        .footer .footer-copyright-wrapper {
           display: unset;
        }
        .footer .footer-info {
           display: unset;
           margin: 0 auto;
         }
        .slick-next {
          right: 8px;
          top: 25%;
        }
        .slick-prev{
            top: 25%;
            left: 8px;
        }
        .why-lordhair-section .lordhair-reasons {
          column-count: unset;
        }
        .newsletter-section .button {
          margin-left: unset;
        }
        :is(.hair-systems-section, .best-replacement-system-section, .hair-system-reviews-section) .hair-systems-desc {
         width: 80%;
        }
        :is(.hair-systems-section, .best-replacement-system-section, .hair-system-reviews-section, .why-lordhair-section, lordhair-partners-section) .hair-systems-desc h1 {
          font-size: 26px;
        }
        .hair-systems-section .hair-systems-wrapper {
           grid-template-columns: unset;
        }
        .hair-systems-section .hair-systems-info {
          padding: 0px;
          padding-bottom: 5px;
        }
       .hair-systems-section .hair-systems-info h3 {
          font-size: 20px;
        }
        .hair-systems-section .hair-systems-info p {
            font-size: 13px;
        }
        .need-help-section h1 {
            font-size: 34px;
            font-weight: 600; 
         }
        .md-btn {
          min-width: 110px;
          height: 38px;
          line-height: 38px;
          margin-bottom: 10px;
        }
        .kd-banner-info .heading {
          font-size: 16px;
          margin: 0 0 8px;
        }
        .kd-banner-section .kd-banner-info{
            padding: unset;
        }
        .modal-close{
            top: 0.5rem !important;
        }
        .quick-search-wrapper h6{
            margin-top: 10px;
        }
        .header .navPages-list .navPages-action {
           padding: 0.78571rem 0;
        }



        .category-page .category-header-image {
          height: 10vh;
        }
        .category-page .kd-banner {
          height: auto;
        }
        .category-page .category-desc {
            max-width: 200px;
           height: calc(100% - 11px);
           overflow: auto;
           padding: 3px;
           border-radius: 5px;
           position: absolute;
           right: 6px;
           top: 7px;
       }
      .category-page .category-desc h2{
        font-size: 13px;
      }
     .category-page .category-desc p{
        font-size: 8px;
      }
      :is(.category-page, .search-page) .productGrid {
        grid-template-columns: 1fr;
      }
      .category-page .category-page-wrapper {
        grid-template-columns: 2fr;
      }
     .card-image {
       object-fit: contain !important;
       height: 61vh;
     }




      .product-page .productView-images {
        width: 100% !important;
      }
      .product-page .productView-details-wrapper {
        width: 100% !important;
        padding-right: unset;
      }
     .product-page .productView {
        flex-direction: column;
        gap: unset;
      }
      .product-page .options-wrapper .form-option {
        min-height: 60px;
      }
      .product-page .productView-details-wrapper .set-rectangle label.form-option{
        min-height: 60px;
      }
      .options-modal {
         max-width: 685px;
      }
      .options-modal button {
         max-width: 316px;
         height: 50px;
      }
     .options-modal {
        max-width: 298px;
      }
     .options-modal .options-wrapper {
        grid-template-columns: unset;
        margin: 1.5rem 13px 0;
      }
      .options-modal .modal-inner {
          max-width: 250px;
       }
       .options-modal .step .step-content {
           height: 416px;
         }


      .cart-item-block.cart-item-info.cart-price-total{
        margin-top: 25px;
      }
      .cart-total-label {
        width: 50%;
        text-align: left;
      }
     .cart-total-value {
        width: 50%;
      }
      .cart-total{
          border-bottom: 1px solid #e5e5e5;
        }
        .cart-page .cart-totals {
           width: unset !important;
        }  
        .cart-total-value {
          text-align: unset;
        }
        .cart-item-quantity{
          margin-top: 65px;
        }


        .account-wrapper, .header-cart-wrapper {
           width: -webkit-fill-available;
        }

        .account.account--fixedSmall{
          margin: 0 auto;
          width: 71%; 
        }
        .account.account--fixed {
          width: 70%;
          margin: 0 auto;
        }
        .login-row{
          width: 90%;
        }
        .actionBar-section .form-select {
           text-align: right;
         }
         #kd-base-size-box-base-meterial-color ul li {
         width: 100%;
        }

   #kd-base-size-box-base-meterial-color ul {
    display: block;
  
}
#kd-base-size-box-front-contour ul {
     display: block;
}
#kd-base-size-box-front-contour ul li {
  width: 100%;
}
#kd-base-size-box-hair-direction ul {
 display: block;
}
#kd-base-size-box-hair-direction ul li {
     width: 100%;
}
#kd-base-size-box-hair-length ul {
    display: block;
}
#kd-base-size-box-hair-length ul li {
    width: 100%;
}
#kd-base-size-box-hair-density ul {
   display: block;
}
#kd-base-size-box-hair-density ul li {
   width: 100%;
}
.kd-custom-page-product-content-wrap {
 
    flex-direction: column;

}
.kd-custom-page-product-main-img {
   
    width: 100%;
    
}
.kd-common-grid-content ul li .kd-base-size-images {
   width: 166px;
    height: 198px;
}
.kd-common-list-content ul li .kd-base-size-images {
       max-width: 290px;
    width: 290px;
    position: relative;
    height: 290px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e9e6ec;
    border-radius: 14px;
}
.kd-common-list-content ul li .kd-base-size-images img {
        border-radius: 5px;
    cursor: pointer;
    width: 100%;
    height: 100%;
    object-fit: contain;
         min-width: none !important; 
     min-height: none !important;
         border: none;
}
#kd-base-size-box-base-design ul li {
     width: 100%; 
}
#kd-base-size-box-haircolor ul li{
     width: 100%; 
}
.header-logo-image-container img{
         width: 60px;
    
}
.header .navUser {
    display: flex;
    justify-content: space-between;
    padding: 0 0;
}
.product-page .price-bar .add-to-cart {

    min-width: 155px;
 
}
#kd-pills-Men ul li {
    width: 100%;
    /* justify-content: center; */
} 
.kd-modal{
    width: 97%;
    padding: 7px;
}
.slick-next::before,.slick-prev::before {
  
    height: 14px;
    width: 15px;
}
.heroCarousel-slide .heroCarousel-image {
    object-fit: contain;
    object-position: center;
}
.heroCarousel  {
   margin-top: -55px;
}
    }
    
    @media only screen and (max-width: 424px){
        .category-page .category-desc {
            max-width: 163px;
       }
       .category-page .category-header-image {
           height: 9vh;
       }
       .category-page .category-desc h2 {
          font-size: 11px;
       }


       .cart-item-quantity{
          margin-top: 120px;
        }

        .account.account--fixedSmall{
           width: 95%;
        }
        .account.account--fixed {
          width: 85%;
        }
    }
    @media only screen and (min-width: 1025px) and (min-width:1440px){
    .category-page .kd-banner {
       position: relative;
       height: 200px;
    }
    .category-page .category-header-image {
      height: 200px;
     }
     .category-page .category-desc {
       height: calc(100% - 49px);
       top: 24px;
     }
   }  
   @media only screen and (min-width: 601px) and (max-width:768px){
           .slick-next::before,.slick-prev::before {
  
    height: 14px;
    width: 15px;
}
.heroCarousel-slide .heroCarousel-image {
    object-fit: contain;
    object-position: center;
}
.heroCarousel  {
   margin-top: -78px !important;
}
.header-logo-image-container img{
         width: 60px;
    
}
           
       }