/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./sfra-webpack-builder/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./sfra-webpack-builder/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./sfra-webpack-builder/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./code/app_tanishq/cartridge/client/default/scss/experience/components/commerce_assets/shopByGender.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.all-gender {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 2rem; }
  @media (max-width: 1023.98px) {
    .all-gender {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      margin: 0; } }
  .all-gender .female-div {
    margin: 0 1.5rem; }
    @media (max-width: 1023.98px) {
      .all-gender .female-div {
        margin: 0; } }

.male-female {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  @media (max-width: 1023.98px) {
    .male-female {
      margin-bottom: 0.5625rem; } }
  @media (max-width: 1023.98px) {
    .male-female .male-div {
      margin-right: 0; } }

.gender-div {
  padding: 0;
  margin: 0.625rem;
  width: 100%;
  height: 23.125rem;
  border: 0.0625rem solid #dad9d8;
  border-radius: 0.3125rem; }
  @media (max-width: 1023.98px) {
    .gender-div {
      margin: 0.1875rem;
      height: auto; } }

.gender-div:hover {
  background: #fff 0% 0% no-repeat padding-box;
  -webkit-box-shadow: 0 0.625rem 0.9375rem #83272933;
          box-shadow: 0 0.625rem 0.9375rem #83272933;
  border: 0.0625rem solid #dad9d8;
  opacity: 1; }
  .gender-div:hover .explore-icon {
    padding-top: 1.563rem; }
    @media (max-width: 1023.98px) {
      .gender-div:hover .explore-icon {
        padding-top: 0.75rem; } }

@media (max-width: 1023.98px) {
  .info-kid {
    border: 0.0625rem solid #dad9d8;
    border-top: none;
    border-bottom-right-radius: 0.3125rem;
    border-bottom-left-radius: 0.3125rem; } }

.kids-div {
  padding: 0;
  width: 23.3125rem;
  height: 23.125rem;
  border: 0.0625rem solid #dad9d8;
  border-radius: 0.3125rem; }
  @media (max-width: 1023.98px) {
    .kids-div {
      width: auto;
      height: 11.6875rem;
      margin-bottom: 2.375rem; } }
  @media (max-width: 1023.98px) {
    .kids-div .kids-image {
      -o-object-fit: cover;
         object-fit: cover;
      -o-object-position: center;
         object-position: center; } }

.kids-div:hover {
  background: #fff 0% 0% no-repeat padding-box;
  -webkit-box-shadow: 0 0.625rem 0.9375rem #83272933;
          box-shadow: 0 0.625rem 0.9375rem #83272933;
  border: 0.0625rem solid #dad9d8;
  opacity: 1; }

.gender-image {
  width: 100%;
  height: 19.375rem; }
  @media (max-width: 1023.98px) {
    .gender-image {
      height: auto; } }
  .gender-image .kid-image {
    width: 23.25rem;
    height: auto; }
    @media (max-width: 1023.98px) {
      .gender-image .kid-image {
        min-width: 21.4375rem; } }

.gender-text {
  color: #832729;
  font: 1.25rem/1.6875rem "nunito_sansbold"; }
  @media (max-width: 1023.98px) {
    .gender-text {
      font: 0.875rem/1.1875rem "nunito_sansbold"; } }

.explore-more {
  font: 0.875rem/1.1875rem "nunito_sansregular";
  letter-spacing: 0.0262rem;
  color: #000;
  text-transform: capitalize; }
  @media (max-width: 1023.98px) {
    .explore-more {
      font: 300 0.625rem/0.875rem "nunito_sansregular";
      letter-spacing: 0.0187rem; } }

.info-div {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  padding: 16px; }
  @media (max-width: 1023.98px) {
    .info-div {
      padding: 8px; } }
  .info-div .explore-more {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: 99%;
    width: auto; }
    .info-div .explore-more span,
    .info-div .explore-more figure {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      position: absolute;
      opacity: 0.8;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      -webkit-transition: opacity 0.35s ease-out, width 0.3s ease-out, margin-left 0.3s ease-out;
      transition: opacity 0.35s ease-out, width 0.3s ease-out, margin-left 0.3s ease-out;
      line-height: 1.25em;
      height: 100%; }
    .info-div .explore-more span {
      margin-left: calc(100% - 120px);
      width: 100px;
      background-color: #fff; }
      @media (max-width: 1023.98px) {
        .info-div .explore-more span {
          margin-left: calc(100% - 100px); } }
    .info-div .explore-more figure {
      margin-left: calc(100% - 25px);
      width: 10px; }
      @media (max-width: 1023.98px) {
        .info-div .explore-more figure {
          margin-left: calc(100% - 15px); }
          .info-div .explore-more figure img {
            width: 4px; } }

.gender-div:hover .gender-text {
  opacity: 0; }

.gender-div:hover .explore-more {
  width: 100%;
  color: #832729;
  text-align: left;
  -webkit-transition: width 0.3s ease-in;
  transition: width 0.3s ease-in; }
  .gender-div:hover .explore-more span {
    margin-left: 10px; }
    @media (max-width: 1023.98px) {
      .gender-div:hover .explore-more span {
        margin-left: 0; } }


/*# sourceMappingURL=default\css\experience\components\commerce_assets\shopByGender.css.map*/