.nav-item{
	padding-left: 20px;
	padding-right: 20px;	
}
.hero {
  height: 100vh;
  /* make hero cover full viewport width even if inside a centered container */
  width: 100vw;
  max-width: none;
  /* push out of parent's horizontal centering so it spans edge-to-edge */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat; }

/* Add same full-bleed behavior for the home page hero section used in start.php */
.home-hero {
  height: 100vh;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Ensure the home page hero (id="home-hero") is full-bleed and its images cover the area */
/* Break out of parent 1400px container to span full viewport width */
#home-hero {
  position: relative !important;
  overflow: hidden !important;
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  left: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
#home-hero .hero-slide {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  max-width: none !important;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  z-index: 0;
}
#home-hero .hero-slide.active {
  opacity: 1;
  z-index: 1;
}

/* Header */
header {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 5;
  padding: 0px 0; }
.hero_overlay {
	background-color: #c2c6c6;
	opacity: 0.85;
	position: absolute;
	bottom: 10px;
	right: 10px;
	/* width: 90%; */
	padding: 50px 60px 50px 60px;
	border-bottom-left-radius: 25px;
	z-index: 100;
	margin-left: 10px;
	border-bottom-right-radius: 25px;
}
.header_cart_circle {
	color: #ececec;
	position: absolute;
	bottom: 27px;
	left: 52px;
}
.header_cart_circle_number{
	position: relative;
	font-size: 12px;
	color: #6cb9ff;
	right: -6px;
	bottom: 22px;
	
}
@media (max-width: 768px) {
.header_xs_bg {
	background: rgb(81, 147, 224);
	margin-right: -40px;
	padding-bottom: 20px;
	border-bottom-right-radius: 15px;
	opacity: 0.85;
	}	
}
  @media (min-width: 768px) {
    header {
      padding: 0px 0; }
	.hero_overlay {
	background-color: #c2c6c6;
	opacity: 0.85;
	/* position: absolute; */
	bottom: 150px;
	right: 10%;
	width: 50%;
	padding: 50px 60px 50px 60px;
	border-bottom-left-radius: 25px;
	z-index: 100;
}
	.header_cart_circle{
	top: 0px;
		}
	}
  header .navbar-brand {
    text-transform: uppercase;
    letter-spacing: .2em;
    font-weight: 800;
    font-size: 2rem; }
    header .navbar-brand.absolute {
      position: absolute; }
      @media (max-width: 991.98px) {
        header .navbar-brand.absolute {
          position: relative; } }
    header .navbar-brand span {
      color: #fff; }
      @media (min-width: 768px) {
        header .navbar-brand span {
          color: #ced4da; } }
  header .navbar {
    padding-top: .5rem;
    padding-bottom: .5rem; }
    @media (min-width: 768px) {
      header .navbar {
        padding-top: 0;
        padding-bottom: 0;
        background: none !important;
        position: relative; } }
    header .navbar .nav-link {
      padding: 1.7rem 2rem;
      outline: none !important;
      font-size: 1.3rem;
	  font-weight:800;
      color: rgba(255, 255, 255, 1) !important; }
      @media (max-width: 1199.98px) {
        header .navbar .nav-link {
          padding: .5rem 1rem; } }
		  
      header .navbar .nav-link.active {
        color: #fff !important; }
		
    header .navbar .dropdown-menu {
      font-size: 14px;
      border-radius: 4px;
      border: none;
      -webkit-box-shadow: 0 2px 30px 0px rgba(0, 0, 0, 0.2);
      box-shadow: 0 2px 30px 0px rgba(0, 0, 0, 0.2);
      min-width: 1em;
      margin-top: -10px;
	  padding-left: 15px;
	  padding-right: 15px
	   }
      header .navbar .dropdown-menu:before {
        bottom: 100%;
        left: 10%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-bottom-color: #fff;
        border-width: 7px; }
        @media (max-width: 991.98px) {
          header .navbar .dropdown-menu:before {
            display: none; } }
      header .navbar .dropdown-menu .dropdown-item:hover {
        background: #007bff;
        color: #fff; 
		text-decoration: underline;
		}
		
      header .navbar .dropdown-menu .dropdown-item.active {
        background: #007bff;
        color: #fff; 
		text-decoration: underline;
		}
      header .navbar .dropdown-menu a {
        padding-top: 7px;
        padding-bottom: 7px; }
    header .navbar .cta-btn a {
      background: #007bff;
      color: #fff !important;
      text-transform: uppercase;
      font-size: .8rem;
      padding: 15px 20px !important;
      line-height: 1;
      font-weight: bold;
      -webkit-transition: .3s all ease;
      -o-transition: .3s all ease;
      transition: .3s all ease; }
      header .navbar .cta-btn a:hover {
        background: #fff;
        color: #007bff !important;
        -webkit-box-shadow: 2px 0 30px -5px rgba(0, 0, 0, 0.2);
        box-shadow: 2px 0 30px -5px rgba(0, 0, 0, 0.2); 
		text-decoration: underline;
		}

/* Make hamburger menu expand instantly on small screens */
@media (max-width: 991.98px) {
  .navbar-collapse {
    transition: none !important;
  }

}