/*--- standard variables ---*/
/*--- switch themes ---*/
/* #####################################################################################################
   VARIABLES - 4 - VELTHUIS SCHOENEN
   ##################################################################################################### */
/*--- product item ratio (thumb + content) ---*/
/* set ProductImageRatio in productOverview! */
/*--- media queries. When using responsive ---*/
/* Range breakpoints */
/*--- media queries. When using responsive: only mobile & desktop ---
@responsive:	false;
@largePhone:	~"only screen and (min-width: 480px)";
@tablet:		~"only screen and (min-width: 999999999px)";
@tabletLand:	~"only screen and (min-width: 768px)";
@desktop:		~"only screen and (min-width: 768px)";

@upToTablet:	~"only screen and (max-width: 767px)";
@upToDesktop:	~"only screen and (max-width: 767px)";*/
/*--- media queries. When not using responsive ---
@responsive:	false;
@largePhone:	~"only screen and (min-width: 1px)";
@tablet:		~"only screen and (min-width: 1px)";
@tabletLand:	~"only screen and (min-width: 1px)";
@desktop:		~"only screen and (min-width: 1px)";

@upToTablet:	~"only screen and (max-width: 1px)";
@upToDesktop:	~"only screen and (max-width: 1px)";*/
/*----- Default functions -----*/
/*----- Default Crossbrowser functions -----*/
/*----- CSS3 functions -----*/
/*----- CSS3 Animation functions -----*/
/*----- Buttons -----*/
/*----- Responsive functions -----*/
#branchSelector li {
  height: 40px;
  line-height: 40px;
  background-color: #ebebeb;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
}
html.no-flexbox #branchSelector li {
  display: block;
}
#branchSelector li.active {
  background-color: #f8f8f8;
}
#branchSelector li div {
  padding: 0 2%;
  -webkit-flex-grow: 1;
  -ms-flex-grow: 1;
  flex-grow: 1;
}
#branchSelector li div html.no-flexbox {
  float: left;
  height: 100%;
  padding: 4px;
}
#branchSelector li div.last {
  text-align: center;
  color: white;
  font-size: 20px;
  padding: 0;
}
#branchSelector li div.last html.no-flexbox {
  float: right;
}
#branchSelector li div.last {
  text-align: center;
  flex: 0 1 5%;
}
#branchSelector li div.green {
  background-color: #5cb85c;
}
#branchSelector li div.orange {
  background-color: #f0ad4e;
}
#branchSelector li div.red {
  background-color: #e6575a;
}
#branchSelector ul.branchselector-group {
  margin-bottom: 10px;
}
