/*------------------------------------*\
  #Root
\*------------------------------------*/

:root{
  --Primary-color:  /* Primary color */;
  --Secondary-color:  /* Secondary color */;
  
  --Tertiary-color:  /* Extra color */;
  --Accent-color:  /* Extra colors */;

  --Button-color:  /* Button colors */;
  --Button-hover-color: /* Button hover colors */;
  
  /* Neutral Colors */
  --White-color: #fff;
  --Black-color: #333;

  --Danger-color: #cf4646;
  --Danger-hover-color: #cc3c3c;
}


/* Video Banner */
section.video-banner {
  text-align: center;
  background-size: cover;
  background-position: center;
  position: relative;
}

section.video-banner > .container{
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  z-index: 2;
}


.video-container-fill {
  min-width: 100%;
  min-height: 100%;
  display: flex;
  justify-content: center;
  z-index: 0;
  height: 100%;
}

.video-container-fill video{
  object-fit: cover;
  display: inline-block;
  max-width: 100%;
  height: 50vh;
}

@media screen and (min-width: 1441px) {
  .video-container-fill video{
    height: 95vh;
  }
}

@media screen and (max-width: 750px) and (min-width: 426px) {
  .video-banner{
    background-image: none !important;
  }

  section.video-banner > .container{
    top: 85%;
  }
  
  .video-container-fill{
    height: 50vh;
  }
  .video-container-fill video{
    height: 70%;
  }
}

@media screen and (max-width: 425px) {
  .video-banner{
    background-image: none !important;
  }

  section.video-banner > .container{
    top: 75%;
  }
  
  .video-container-fill{
    height: 25vh;
  }
  .video-container-fill video{
    height: 50%;
  }
}


/* Product Card */
@media screen and (min-width: 1088px) {
  .sub-category-grid,
  .homePageCategories{

    .listWrapper .listItem{
      width: 33.33333%;
    }
  }
}

@media screen and (max-width: 500px) {
  .sub-category-grid,
  .homePageCategories{

    .listWrapper .listItem{
      width: 100%;
    }
  }
}

/*------------------------------------*\
  #BASE
\*------------------------------------*/

/*------------------------------------*\
  #UTILITIES
\*------------------------------------*/

/*------------------------------------*\
  #COMPONENTS
\*------------------------------------*/

/*------------------------------------*\
  #LAYOUTS
\*------------------------------------*/

/*------------------------------------*\
  #ADMIN PAGES
\*------------------------------------*/

/*------------------------------------*\
 #CHECKOUT STEPS
\*------------------------------------*/

/*------------------------------------*\
 #MY ACCOUNT PAGES
\*------------------------------------*/

/*------------------------------------*\
    #TOPIC PAGES
\*------------------------------------*/