/* Background Color Selector */
.block-categories {
  background-color: rgba(60, 45, 237);
  background: linear-gradient(
    135deg,
    rgba(60, 45, 237, 1) 0%,
    rgba(130, 58, 182, 1) 50%,
    rgba(224, 71, 113, 1) 100%
  );
}

/* Typography */
.block-categories .heading {
  margin: 0;
  color: #ffffff;
  transition: all ease 0.3s;
}

.block-categories .category-heading p {
  color: #ffffff;
}

.block-categories .container .heading-container {
  margin-bottom: 2.5em;
}

.block-categories .container .heading-container .subheading {
  margin-top: 1em;
}

.block-categories .container .heading-container .heading,
.block-categories .container .heading-container .subheading {
  text-align: center;
}

.block-categories
  .container
  .categories-container
  .category-container
  .category-heading
  p {
  line-height: 22px;
}

.block-categories
  .container
  .categories-container
  .category-container
  .category-heading
  p
  em,
.block-categories
  .container
  .categories-container
  .category-container
  .category-heading
  p
  strong {
  font-weight: bold;
}

/* Column Grid Container */
.block-categories .container .categories-container.grid,
.block-categories .container .categories-container.grid-large {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 1em;
  width: 100%;
  transition: all ease 0.3s;
}

.block-categories .category-grid-1,
.block-categories .category-grid-2,
.block-categories .category-grid-3,
.block-categories .category-grid-4,
.block-categories .category-grid-5,
.block-categories .category-grid-6,
.block-categories .category-grid-7,
.block-categories .category-grid-8,
.block-categories .category-grid-9,
.block-categories .category-grid-10,
.block-categories .category-grid-11,
.block-categories .category-grid-12,
.block-categories .category-grid-13,
.block-categories .category-grid-14,
.block-categories .category-grid-15,
.block-categories .category-grid-16,
.block-categories .category-grid-17,
.block-categories .category-grid-18,
.block-categories .category-grid-19,
.block-categories .category-grid-20 {
  grid-column: span 12;
  transition: all ease 0.3s;
}

@media (min-width: 600px) {
  .block-categories .category-grid-2,
  .block-categories .category-grid-3,
  .block-categories .category-grid-4,
  .block-categories .category-grid-5,
  .block-categories .category-grid-6,
  .block-categories .category-grid-7,
  .block-categories .category-grid-8,
  .block-categories .category-grid-9,
  .block-categories .category-grid-10,
  .block-categories .category-grid-11,
  .block-categories .category-grid-12,
  .block-categories .category-grid-13,
  .block-categories .category-grid-14,
  .block-categories .category-grid-15,
  .block-categories .category-grid-16,
  .block-categories .category-grid-17,
  .block-categories .category-grid-18,
  .block-categories .category-grid-19,
  .block-categories .category-grid-20 {
    grid-column: span 6;
  }
}

@media (min-width: 900px) {
  /*-- Column 1 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-1 {
    grid-column: 4 / 10;
  }

  /*-- Column 2 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-2 {
    grid-column: span 6;
  }

  /*-- Column 3 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-3 {
    grid-column: span 4;
  }

  /*-- Column 4 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-4 {
    grid-column: span 4;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-4:nth-child(4) {
    grid-column: 4 / 10;
  }

  /*-- Column 5 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-5 {
    grid-column: span 4;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-5:nth-child(4) {
    grid-column: span 6;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-5:nth-child(5) {
    grid-column: span 6;
  }

  /*-- Column 6 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-6 {
    grid-column: span 4;
  }

  /*-- Column 7 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-7 {
    grid-column: span 4;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-7:nth-child(7) {
    grid-column: 4 / 10;
  }

  /*-- Column 8 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-8 {
    grid-column: span 4;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-8:nth-child(7) {
    grid-column: span 6;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-8:nth-child(8) {
    grid-column: span 6;
  }

  /*-- Column 9 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-9 {
    grid-column: span 4;
  }

  /*-- Column 10 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-10 {
    grid-column: span 4;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-10:nth-child(10) {
    grid-column: 4 / 10;
  }

  /*-- Column 11 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-11 {
    grid-column: span 4;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-11:nth-child(10) {
    grid-column: span 6;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-11:nth-child(11) {
    grid-column: span 6;
  }

  /*-- Column 12 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-12 {
    grid-column: span 4;
  }

  /*-- Column 13 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-13 {
    grid-column: span 4;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-13:nth-child(13) {
    grid-column: 4 / 10;
  }

  /*-- Column 14 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-14 {
    grid-column: span 4;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-14:nth-child(13) {
    grid-column: span 6;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-14:nth-child(14) {
    grid-column: span 6;
  }

  /*-- Column 15 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-15 {
    grid-column: span 4;
  }

  /*-- Column 16 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-16 {
    grid-column: span 4;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-16:nth-child(16) {
    grid-column: 4 / 10;
  }

  /*-- Column 17 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-17 {
    grid-column: span 4;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-17:nth-child(16) {
    grid-column: span 6;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-17:nth-child(17) {
    grid-column: span 6;
  }

  /*-- Column 18 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-18 {
    grid-column: span 4;
  }

  /*-- Column 19 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-19 {
    grid-column: span 4;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-19:nth-child(19) {
    grid-column: 4 / 10;
  }

  /*-- Column 20 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-20 {
    grid-column: span 4;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-20:nth-child(19) {
    grid-column: span 6;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-20:nth-child(20) {
    grid-column: span 6;
  }
}

@media (min-width: 1200px) {
  /*-- Column 1 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-1 {
    grid-column: 5 / 9;
  }

  /*-- Column 2 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-2:nth-child(1) {
    grid-column: 4/7;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-2:nth-child(2) {
    grid-column: 7/10;
  }

  /*-- Column 3 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-3 {
    grid-column: span 4;
  }

  /*-- Column 4 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-4 {
    grid-column: span 3;
  }

  /*-- Column 5 --*/
  .block-categories
    .container
    .categories-container.grid-large
    .category-container.category-grid-5 {
    grid-column: span 3;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-5:nth-child(5) {
    grid-column: 5 / 9;
  }

  /*-- Column 6 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-6 {
    grid-column: span 3;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-6:nth-child(5) {
    grid-column: 4/7;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-6:nth-child(6) {
    grid-column: 7/10;
  }

  /*-- Column 7 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-7 {
    grid-column: span 3;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-7:nth-child(5) {
    grid-column: span 4;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-7:nth-child(6) {
    grid-column: span 4;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-7:nth-child(7) {
    grid-column: span 4;
  }

  /*-- Column 8 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-8 {
    grid-column: span 3;
  }

  /*-- Column 9 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-9 {
    grid-column: span 3;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-9:nth-child(9) {
    grid-column: 5 / 9;
  }

  /*-- Column 10 --*/
  .block-categories
    .container
    .categories-container.grid-large
    .category-container.category-grid-10 {
    grid-column: span 3;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-10:nth-child(9) {
    grid-column: 4/7;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-10:nth-child(10) {
    grid-column: 7/10;
  }

  /*-- Column 11 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-11 {
    grid-column: span 3;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-11:nth-child(9) {
    grid-column: span 4;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-11:nth-child(10) {
    grid-column: span 4;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-11:nth-child(11) {
    grid-column: span 4;
  }

  /*-- Column 12 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-12 {
    grid-column: span 3;
  }

  /*-- Column 13 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-13 {
    grid-column: span 3;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-13:nth-child(13) {
    grid-column: 5 / 9;
  }

  /*-- Column 14 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-14 {
    grid-column: span 3;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-14:nth-child(13) {
    grid-column: 4/7;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-14:nth-child(14) {
    grid-column: 7/10;
  }

  /*-- Column 15 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-15 {
    grid-column: span 3;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-15:nth-child(13) {
    grid-column: span 4;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-15:nth-child(14) {
    grid-column: span 4;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-15:nth-child(15) {
    grid-column: span 4;
  }

  /*-- Column 16 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-16 {
    grid-column: span 3;
  }

  /*-- Column 17 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-17 {
    grid-column: span 3;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-17:nth-child(17) {
    grid-column: 5 / 9;
  }

  /*-- Column 18 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-18 {
    grid-column: span 3;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-18:nth-child(17) {
    grid-column: 4/7;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-18:nth-child(18) {
    grid-column: 7/10;
  }

  /*-- Column 19 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-19 {
    grid-column: span 3;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-19:nth-child(17) {
    grid-column: span 4;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-19:nth-child(18) {
    grid-column: span 4;
  }

  .block-categories
    .container
    .categories-container
    .category-container.category-grid-19:nth-child(19) {
    grid-column: span 4;
  }

  /*-- Column 20 --*/
  .block-categories
    .container
    .categories-container
    .category-container.category-grid-20 {
    grid-column: span 3;
  }
}

.block-categories
  .container
  .categories-container
  .category-container
  .category-content
  .category-heading {
  margin-top: 0.63em;
}
.block-categories
  .container
  .categories-container
  .category-container
  .category-heading
  p {
  margin: 0;
}

/* Image Starts */

.block-categories .container .categories-container .category-container {
  padding: 1em;
  min-height: 10em;
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #8c5fd1;
  text-align: center;
  border: 1px solid #ffffff;
  border-radius: 4px;
  transition: all ease 0.3s;
}

@media (min-width: 900px) {
  .block-categories .container .categories-container .category-container {
    min-height: 12em;
  }
}

@media (min-width: 1200px) {
  .block-categories .container .categories-container .category-container {
    padding: 1em;
    min-height: 10em;
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-color: #8c5fd1;
    text-align: center;
    border: 1px solid #ffffff;
    border-radius: 4px;
  }
}

.category-button {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.category-tooltip {
  padding: 1em;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -1px;
  left: -1px;
  background: rgba(99, 53, 207, 1);
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 4px;
  opacity: 0;
  transition: all ease 0.3s;
  z-index: 9999;
}

.category-container:hover .category-tooltip.no-tooltip {
  display: none;
  opacity: 0;
}

.category-container:hover .category-tooltip.has-tooltip {
  opacity: 1;
  transition: all ease 0.3s;
}

.category-container:active .category-tooltip.has-tooltip {
  opacity: 1;
  transition: all ease 0.3s;
}

.category-container:focus.category-tooltip.has-tooltip {
  opacity: 1;
  transition: all ease 0.3s;
}

.block-categories
  .container
  .categories-container
  .category-container
  .category-icon {
  margin-bottom: 0.25em;
  width: 100%;
  height: 40px;
  display: block;
}

.block-categories
  .container
  .categories-container
  .category-container.icon-top
  .category-icon,
.block-categories
  .container
  .categories-container
  .category-container.icon-top
  .category-icon
  img,
.block-categories
  .container
  .categories-container
  .category-container.icon-top
  .category-content {
  transition: all ease 0.3s;
}

.block-categories
  .container
  .categories-container
  .category-container
  .category-icon
  img {
  margin: 0 auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}