@font-face {
  src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
  font-family: open-sans;
  font-weight: 400; }
@font-face {
  src: url("../fonts/OpenSans-SemiBold.ttf") format("truetype");
  font-family: open-sans;
  font-weight: 700; }
@font-face {
  src: url("../fonts/OpenSans-Bold.ttf") format("truetype");
  font-family: open-sans;
  font-weight: 900; }
@font-face {
  src: url("../fonts/OpenSans-Light.ttf") format("truetype");
  font-family: open-sans;
  font-weight: 100; }
@font-face {
  src: url("../fonts/BRANDON_REG.OTF") format("opentype");
  font-family: Brandon;
  font-weight: 400; }
@font-face {
  src: url("../fonts/BRANDON_THIN.OTF") format("opentype");
  font-family: Brandon;
  font-weight: 100; }
@font-face {
  src: url("../fonts/BRANDON_BLD.OTF") format("opentype");
  font-family: Brandon;
  font-weight: 900; }
body {
  background-color: #E6E7E8; }
  body.non-scrollable {
    overflow: hidden; }

.dark-overlay {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100vh;
  align-items: flex-end;
  z-index: 20; }
  .dark-overlay .sort-container {
    background-color: white;
    width: 100%; }
    .dark-overlay .sort-container h5 {
      padding: 10px 0;
      text-align: center;
      background-color: #e6e7e8;
      font-size: 18px;
      font-family: Brandon; }
    .dark-overlay .sort-container ul {
      width: 100%; }
      .dark-overlay .sort-container ul li {
        border-bottom: 1px solid #BEC0C2;
        padding: 15px 0;
        text-align: center; }
  .dark-overlay.active {
    display: flex; }

#content-header {
  width: 85%;
  margin: 0 auto;
  color: #C6C7C9;
  font-weight: bold;
  font-size: 14px;
  height: 15vh;
  display: flex;
  align-items: center; }
  @media screen and (max-width: 1023px) {
    #content-header {
      width: 100%;
      height: 8vh;
      border-bottom: 1px solid #bfbfc0; }
      #content-header .grid {
        border-right: 1px solid #bfbfc0;
        width: 12%;
        height: 100%;
        display: flex;
        align-items: center; }
        #content-header .grid.active-grid img:nth-of-type(1) {
          display: none; }
        #content-header .grid.active-grid img:nth-of-type(2) {
          display: block; }
        #content-header .grid img {
          width: 16px;
          height: 16px;
          margin: 0 auto; }
          #content-header .grid img:nth-of-type(1) {
            display: block; }
          #content-header .grid img:nth-of-type(2) {
            display: none; }
      #content-header .filter,
      #content-header .sort {
        height: 100%;
        display: flex;
        align-items: center;
        width: 12%; }
        #content-header .filter img,
        #content-header .sort img {
          display: block;
          margin: 0 auto;
          width: 16px;
          height: 16px; }
      #content-header .filter {
        border-left: 1px solid #bfbfc0; }
      #content-header .sort {
        display: none;
        border-left: 1px solid #bfbfc0; }
      #content-header .heading {
        width: 75%;
        font-family: Brandon;
        color: #414042;
        letter-spacing: 1px;
        font-weight: 400;
        font-size: 16px; }
        #content-header .heading span:nth-of-type(1) {
          display: none; } }
  #content-header span:nth-of-type(2) {
    color: #414042;
    padding-left: 8px; }

@media screen and (min-width: 1023px) {
  .product-collection {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px; }
    .product-collection .product {
      width: 100%; } }
.product-collection.grid-layout .product {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end; }
  .product-collection.grid-layout .product:nth-of-type(2) {
    margin-top: 0; }
  .product-collection.grid-layout .product .product-image {
    width: 75%;
    margin: 0; }
    .product-collection.grid-layout .product .product-image img {
      object-fit: cover;
      object-fit: center top; }
  .product-collection.grid-layout .product .user-product-details {
    margin-left: 15px; }
  .product-collection.grid-layout .product .product-availibity {
    top: 50%;
    transform: rotate(90deg) translate(-12%, 10vw);
    width: 20%; }

.grid,
.sort,
.filter {
  display: none; }
  @media screen and (max-width: 1023px) {
    .grid,
    .sort,
    .filter {
      display: block; } }

.block-content {
  display: flex;
  justify-content: space-between;
  width: 85%;
  margin: 0 auto; }
  @media screen and (max-width: 1023px) {
    .block-content {
      width: calc(100% - 5px); } }
  .block-content .side-content {
    width: 23.3%;
    border: 4px solid #F1F1F1;
    align-self: flex-start; }
    .block-content .side-content header {
      display: none; }
    .block-content .side-content .inner-container {
      height: 100vh;
      background-color: white; }
      @media screen and (min-width: 1023px) {
        .block-content .side-content .inner-container {
          height: auto; } }
    @media screen and (max-width: 1023px) {
      .block-content .side-content {
        display: none; }
        .block-content .side-content.active {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          display: block;
          z-index: 10;
          max-height: 100vh;
          overflow: auto;
          border: none; }
          .block-content .side-content.active header {
            display: flex;
            background-color: #F1F1F1;
            height: 8vh;
            align-items: center;
            justify-content: space-between; }
            .block-content .side-content.active header h5 {
              font-size: 18px;
              margin-left: 15px; }
              .block-content .side-content.active header h5 .back-icon {
                width: 20px;
                margin-right: 5px; }
            .block-content .side-content.active header .clear {
              height: 100%;
              background-color: #414042;
              color: white;
              font-size: 18px;
              padding: 0 10px;
              font-weight: 600; }
          .block-content .side-content.active .box {
            padding: 25px 0; }
          .block-content .side-content.active .apply-filter {
            width: 100%;
            display: block;
            position: fixed;
            bottom: 0;
            font-size: 18px;
            font-weight: 600;
            left: 0;
            padding: 14px 0; } }
    .block-content .side-content .apply-filter {
      display: none; }
    .block-content .side-content ul {
      list-style: none; }
      .block-content .side-content ul li {
        background-color: white;
        cursor: pointer; }
        .block-content .side-content ul li.active .drop-down-icon {
          transform: rotate(180deg); }
        .block-content .side-content ul li.active ul {
          height: auto;
          transform: scaleY(1);
          padding: 15px 0;
          max-height: 40vh;
          overflow: auto; }
        .block-content .side-content ul li .box {
          padding: 14px 0;
          border-bottom: 1.2px solid #E6E7E8;
          display: flex;
          justify-content: space-between;
          align-items: center; }
          .block-content .side-content ul li .box .label {
            margin-left: 19px;
            font-size: 14px;
            font-weight: bold;
            color: #414042; }
          .block-content .side-content ul li .box .drop-down-icon {
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid #BEC0C2;
            margin-right: 8px;
            transition: transform 500ms ease; }
        .block-content .side-content ul li ul {
          background-color: #F1F1F1;
          height: 0;
          overflow: hidden;
          transform: scaleY(0);
          transform-origin: top;
          padding: 0;
          transition: transform 300ms ease, padding 500ms ease; }
          .block-content .side-content ul li ul li {
            background-color: #F1F1F1;
            margin-left: 19px;
            padding: 2px 0; }
            .block-content .side-content ul li ul li label {
              position: relative; }
              .block-content .side-content ul li ul li label input[type=checkbox],
              .block-content .side-content ul li ul li label input[type=radio] {
                opacity: 0;
                cursor: pointer; }
              .block-content .side-content ul li ul li label input:checked ~ .checkmark {
                background-color: #F7C452; }
              .block-content .side-content ul li ul li label .checkmark {
                position: absolute;
                width: 11px;
                height: 11px;
                border-radius: 50%;
                overflow: hidden;
                border: 2px solid #F7C452;
                top: 50%;
                transform: translateY(-50%);
                left: 0; }
              .block-content .side-content ul li ul li label span {
                font-size: 14px;
                line-height: 25px;
                margin-left: 10px;
                color: #808285; }

/*# sourceMappingURL=collection.css.map */