/**************************************/
/***      General Page styles       ***/
/**************************************/
.scroller {
    font-family: 'Open Sans', sans-serif;
	background-color: #868686;
}

.main-container {
    background-color: #fff;
}

/**************************************/
/***       Brand Logo styles        ***/
/**************************************/

.brand-header img {
	max-width: 250px;
}


/***************************************/
/*** Desktop Brand Navigation styles ***/
/***************************************/

.nav-brand-wrapper-dt {
    background-color: #c7c7c7;
}

ul.dropdown-menu li {
	width: 100%;
}

/**************************************/
/*** Mobile Brand Navigation styles ***/
/**************************************/

.brandnav-mobile-wrapper {
	z-index: 1500;
	background: #fff;
	width: 100%;
	left: 0px;
}

.nav-brand {
	width: 100%;
	height: 2.5em;
	line-height: 2.5em;
	overflow: hidden;
	-ms-overflow-style: none;
	position: absolute;
	background: #fff;
	border-bottom: 2px solid #d2d2d2;
} 

.nav-brand.affix {
	position: fixed;
	top: 60px;
	right: 0px;
	z-index: 1500;
}

.nav-brand ul {
	list-style: none;
	
}

#brandnav-dropdown {
	display: none;
}

#brandnav-dropdown .item {
	min-height: 180px;
}

#brandnav-dropdown ul {
	padding: 0;
}

#brandnav-dropdown li {	
	font-weight: bold;
	color: #5D5E60;
	padding: 8px;
	padding-left: 20px;
	border-bottom: 1px solid #d2d2d2;
}

#brandnav-dropdown li a {
	color: #5D5E60;
}	

	
.nav-brand-wrapper-dt .navbar-collapse {
  text-align: center;	
}

.nav-brand-wrapper-dt li {
	display: inline-block;
}

ul.brand-nav-catg {
  float: none;
  display: inline-block;	
}

/* hide horizontal scrollbar */ 
.nav-brand ::-webkit-scrollbar {
	width: 0; 
}

/* 
Allow dropdown menus to be displayed below bar 
by allowing their tall containers to be visible 
*/
.nav--hovered, .nav--focused {
	overflow: visible;
}

.nav__placeholder {
	height: 2.5em;
}

.nav__outer-wrap {
	display: flex;
	justify-content: space-between;
	height: 65em;
	width: 1260px;
	max-width: 100%;
	margin: 0 auto;
	position: static;
}

/* Level 1 (header) */
.nav__inner-wrap {
	white-space: nowrap;
	height: 65em;
	display: flex;
}

.nav__item {
	height: 2.5em;    
	margin-right: 20px;
	flex-shrink: 0; /* for iOS */
}

.nav__item a {
	text-transform: uppercase;
	color: #5D5E60;
	font-weight: bold;
	font-size: 17px;
}

.caret {
    margin-left: 5px;
}

/* space on right edge of .nav__inner-wrap below .nav__scroll--right */
.nav__item--right-spacer {
	display: none;
	padding: 0 calc(2em / 2);
	background-color: transparent !important;
}
.nav--scrollable .nav__item--right-spacer {
	display: block;
}

.nav__link {
	display: block;
	padding: 0 10px;
	cursor: pointer; /* needed for all menu items, even dropdown, so iOS devices can hover over them */
	vertical-align: top; /* really only needed for children of .nav__heading so they line up with other links */
}


/* Brand navigation scroll buttons */
.nav__scroll {
	position: absolute;
	top: 0;
	z-index: inherit;
	padding: 0 0 .15em;
	width: calc(2em / 2);
	background-color: #eeeeee;
	font-family: Gill Sans, Futura, sans-serif;
	font-size: 200%;
	line-height: 0;
	height: calc( 2.5em / 2 ); /* b/c font-size is doubled */
	cursor: pointer;
	opacity: 0;
	transition: opacity .3s;
}

.nav__scroll--left {
	left: 0;
	border-right: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
}
.nav__scroll--right {
	right: 0;
	border-left: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
}
.nav__scroll--visible {
	opacity: .9;
	transition: opacity .3s;
}

/*Small Phones*/
@media only screen and (max-width: 479px) {
	/* entire site nav bar is scrollable */
	.nav__outer-wrap {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
	}
}

/*Large Phones on up*/
@media only screen and (min-width: 480px) {
	/* nav is scrollable EXCEPT for heading (first item) */
	.nav__inner-wrap {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
	}
}

/***************************************/
/*** Desktop Brand Navigation styles ***/
/***************************************/

.nav-brand-wrapper-dt .nav > li > a {
	text-transform: uppercase;
	color: #5D5E60;
	font-weight: bold;
	font-size: 17px;
}

.nav-brand-wrapper-dt .nav > li > a:hover,
.nav-brand-wrapper-dt .nav > li > a:focus {
    text-decoration: underline;
    background-color: inherit;
}

/* Override z-index of main container to allow desktop dropdown menus to display */
.main-container section {
	z-index: 500 !important;
}

/**************************************/
/***      Header Affix styles       ***/
/**************************************/

.brand-logo-wrap {
  text-align: center;	
  height: auto;
  transition: all .7s ease-in-out;
  margin-top: 0px;
  top: 0px;
}

.brand-logo-bkg {
  display: inline-block;
  top: 0px;
}
	
@media only screen and (max-width : 768px) {

	.brand-fixed {
	  position: fixed;
	  width: 100%;
	  z-index: 1008;
	  top: 86px;
	}
	
	.brand-logo-wrap {
	  background-color: #868686;
	}
	
	.brand-logo-bkg { 
	  border-top-left-radius: 8px;
	  border-top-right-radius: 8px;
	  padding-left: 5px;
      padding-right: 5px;
      padding-top: 5px;
	  position: relative;
	  background-color: #868686;
	  transition: all .7s ease-in-out;
	}

	.brand-logo {
	  display: inline-block;
	}
	
	.brand-head-wrapper .brand-logo {
	  width: 250px;	
	  transition: all .7s ease-in-out;
	}
	
	.brand-head-wrapper.brand-fixed .brand-logo {
	  width: 150px;	
	  transition: all .7s ease-in-out;
	}
	
	.brand-head-wrapper .brand-logo-wrap {
	  height: 120px;
	  transition: all .7s ease-in-out;
	}
	
	.brand-head-wrapper.brand-fixed .brand-logo-wrap {
	  height: 70px;
	  transition: all .7s ease-in-out;
	}
	
	.brand-fixed .brand-logo-bkg {
	  top: -41px;
	  /*margin-top: -250px;*/
      transition: all .7s ease-in-out;
	}
	
	.brand-fixed .brand-logo-bkg:before,
	.brand-fixed .brand-logo-bkg:after {
	  position: absolute;
	  top: 36px;
	  width: 6px;
	  height: 6px;
	  content: " ";
	}
	.brand-fixed .brand-logo-bkg:before {
	  left: -6px;
	  border-bottom-right-radius: 6px;
	  border-width: 0 1px 1px 0;
	  box-shadow: 2px 2px 0 #868686;
	}
	.brand-fixed .brand-logo-bkg:after {
	  right: -6px;  
	  border-bottom-left-radius: 6px;
	  border-width: 0 0 1px 1px;
	  box-shadow: -2px 2px 0 #868686;
	}	
}


/**************************************/
/***      Product Grid styles       ***/
/**************************************/
	
/* hide the "by brand" treatment by default on all brand pages.
   This can be overridden on a per-brand basis/ */
.brandline {
	display: none !important;
}


/**************************************/
/***       Hero Region styles       ***/
/**************************************/
/*
.region-hero {
	background-color: #fff;
}
*/

.region-hero h2 {	
	font-size: 24px;
	font-weight: bold;
}

.brand-hero-header {
	text-align: center;
}
/*
.brand-hero-header {
	font-family: 'Quicksand', sans-serif;
}
*/

.brand-hero-header h1 {
	font-size: 28px;
	font-weight: bold;
}

.brand-hero-text {
	padding-top: 40px;
}

.brand-hero-content {
	padding-bottom: 30px;
}


/**************************************/
/***   Brand Landing Page styles    ***/
/**************************************/

.brand-home-container {
	margin-top: 20px;
}

.brand-landing-cat {
	/*font-family: 'Quicksand', sans-serif;*/
	padding-left: 50px;
	padding-right: 50px;
	text-align: center;
	font-size: 20px;
}

@media(max-width:991px) {
	.brand-landing-cat {
		padding-left: 15px;
		padding-right: 15px;		
	}
}

@media (max-width: 768px) {
	.brand-landing-cat {
		padding-left: 5px;
		padding-right: 5px;
		font-size: 16px;
		margin-bottom: 10px;
	}	
}

.brand-featured-row {
	margin-bottom: 30px;
}

#carousel-brand-home {
	margin-bottom: 30px;
}