/*
 Theme Name:   VAULT 2024
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Adrian Tirante
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.2
 Text Domain:  bricks
*/

/*  Normal Elements */
b, strong {
  font-weight: 500;
}

code {
  font-size: 12px;
}


/* 
  Main Navigation
*/
.main-nav__item {
  border-bottom: 2px solid transparent;
  transition-duration: 0.15s;
}

.main-nav__item:hover,
.main-nav__item--active {
  border-color: var(--vault-red);
}

.main-nav__item .icon { transition-duration: 0.15s; }
.main-nav__item--chevron.main-nav__item--active .icon { transform: rotate(180deg); }

/* Mega Menu */
.main-megamenu {
  position: absolute;
  top: -9999px !important;
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity cubic-bezier(0.19, 1, 0.22, 1) 0.2s, transform cubic-bezier(0.19, 1, 0.22, 1) 0.2s, top 0s 0.2s;
  z-index: 10;
}
.main-megamenu--open {
  top: 100% !important;
  opacity: 1;
  transform: translateY(0px);
  transition: opacity cubic-bezier(0.19, 1, 0.22, 1) 0.3s, transform cubic-bezier(0.19, 1, 0.22, 1) 0.2s;
}

/* 
  Featured Product Section
  A collection of products displayed in a 6x1 grid. Overflowing items will be scroll snapped to
*/

.featured-products__image,
.product-grid__image {
  width: 100%;
  padding-bottom: 100%;
  border-radius: 4px;
  background-color: var(--vault-gray-10);
  border: 1px solid var(--vault-gray-30) !important;
}

.featured-products > div,
.featured-products > span, 
.featured-products > a,
.featured-products > p,
.featured-products > .brxe-div,
.featured-products > .brxe-block,
.featured-products > .brxe-container,
.featured-products > .brxe-section,
.featured-products__item {
  flex: 0 0 calc(16.6666666667% - 25px);
  padding-bottom: 18px;
}

@media (max-width: 768px) {
  .featured-products > div,
  .featured-products > span, 
  .featured-products > a,
  .featured-products > p,
  .featured-products > .brxe-div,
  .featured-products > .brxe-block,
  .featured-products > .brxe-container,
  .featured-products > .brxe-section,
  .featured-products__item {
    flex: 0 0 calc(50% - 25px);
  } 
}