/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose Custom Dropdown
 ============

 standard dropdown
 -------


 ```
<a class="bose-dropdown" href="javascript:;">Link</a>
<a class="bose-dropdown bose-dropdown--up" href="javascript:;">Link</a>
 ```
 */
.bose-dropdown {
  margin: 20px 30px;
  text-transform: uppercase;
  display: inline-block;
  cursor: pointer;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-dropdown {
    margin: 20px 20px;
  }
}
.bose-dropdown--fullWidth {
  margin: 20px 0;
}
.bose-dropdown__label {
  line-height: 12px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-dropdown__label {
    line-height: 24px;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-dropdown__label {
    line-height: 24px;
  }
}
.bose-dropdown .bose-dropdown__flag {
  float: left;
  margin-right: 10px;
}
.bose-dropdown .bose-dropdown__label:after {
  content: "\f107";
  margin-left: 7px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-dropdown .bose-dropdown__label:after {
    display: none;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-dropdown .bose-dropdown__label:after {
    display: none;
  }
}
.bose-dropdown--up .bose-dropdown__label:after {
  content: "\f106";
}
.bose-dropdown__list {
  position: absolute;
  background-color: #1b1b1b;
  border: solid 1px #343434;
  padding: 10px;
}
.bose-dropdown__list li {
  display: block;
  padding: 5px 0px 5px 0px;
}
.bose-dropdown__list li a {
  display: block;
}
.bose-dropdown__list--autoShowOnMobile .bose-dropdown__list {
  position: absolute;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-dropdown__list--autoShowOnMobile .bose-dropdown__list {
    position: static;
    background-color: transparent;
    border: none;
    padding: 0;
    display: block;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-dropdown__list--autoShowOnMobile .bose-dropdown__list {
    position: static;
    background-color: transparent;
    border: none;
    padding: 0;
    display: block;
  }
}

@charset "UTF-8";
/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 TODO
 ============

 TODO
 -------


 ```
<div>TODO</div>
 ```
 */
.bose-inputFieldContainer {
  height: 24px;
  line-height: 24px;
  background-image: url("../../../designs/bose/base/clientlibs/images/inputbox_background.png");
  background-repeat: no-repeat;
  background-position: 0px -2px;
  float: left;
  text-indent: 10px;
  display: inline-block;
}
.bose-inputFieldContainer input[type="text"] {
  display: inline-block;
  height: 11px;
  border: 0px none;
  box-shadow: none;
  transition: none;
  background-color: transparent;
  margin: 0px;
  padding: 0px;
  text-align: left;
  border-radius: 0px;
  width: 100%;
}
.bose-inputFieldContainer input[type=text].inputBright {
  border: 0px solid #dddddd;
  background-color: #dddddd;
  display: inline-block;
  height: 11px;
}

.bose-inputFieldContainer--bright {
  background-image: url("../../../designs/bose/base/clientlibs/images/inputbox_background_bright.png");
}

input[type='submit'].submit {
  text-indent: -9999px;
  width: 30px;
  height: 24px;
  background-image: url("../../../designs/bose/base/clientlibs/images/inputbox_background.png");
  background-repeat: no-repeat;
  background-position: right -62px;
  border: 0px none;
  background-color: transparent;
  padding: 0px;
}

input[type="submit"].submitBright {
  background-image: url("../../../designs/bose/base/clientlibs/images/inputbox_background_bright.png");
}

input[type="submit"].searchIcon {
  background-position: right -32px;
}

input[type="submit"].submitIcon {
  background-position: right -62px;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
Bose Link list
============

Standard linklist
-------
```
<div class="bose-linkList"><a href="#">About us</a> <a href="#">Our values </a> <a href="#">Contact us</a> <a href="#">Careers</a> <a href="#">Site map</a><a href="#">1-800-999-2673</a></div>
```

All caps modifier
-------
```
<div class="bose-linkList bose-linkList--allCaps"><a href="#">About us</a> <a href="#">Our values </a> <a href="#">Contact us</a> <a href="#">Careers</a> <a href="#">Site map</a><a href="#">1-800-999-2673</a></div>
```

Align right modifier
-------
```
<div class="bose-linkList bose-linkList--alignRight"><a href="#">About us</a> <a href="#">Our values </a> <a href="#">Contact us</a> <a href="#">Careers</a> <a href="#">Site map</a><a href="#">1-800-999-2673</a></div>
```
*/
.bose-linkList {
  margin: 20px 30px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-linkList {
    margin: 20px 20px;
  }
}
.bose-linkList--fullWidth {
  margin: 20px 0;
}
.bose-linkList a:link, .bose-linkList a:hover, .bose-linkList a:visited, .bose-linkList a:active {
  display: inline-block;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-linkList a:link, .bose-linkList a:hover, .bose-linkList a:visited, .bose-linkList a:active {
    display: block;
    padding: 5px 0px 5px 0px;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-linkList a:link, .bose-linkList a:hover, .bose-linkList a:visited, .bose-linkList a:active {
    display: block;
    padding: 5px 0px 5px 0px;
  }
}
.bose-linkList a:link:last-child, .bose-linkList a:hover:last-child, .bose-linkList a:visited:last-child, .bose-linkList a:active:last-child {
  margin-right: 0;
}
.bose-linkList a:link:before, .bose-linkList a:link:after, .bose-linkList a:hover:before, .bose-linkList a:hover:after, .bose-linkList a:visited:before, .bose-linkList a:visited:after, .bose-linkList a:active:before, .bose-linkList a:active:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.bose-linkList a:link:after, .bose-linkList a:hover:after, .bose-linkList a:visited:after, .bose-linkList a:active:after {
  clear: both;
}
.bose-linkList--alignRight a:link, .bose-linkList--alignRight a:hover, .bose-linkList--alignRight a:visited, .bose-linkList--alignRight a:active {
  margin-right: 0;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-linkList--alignRight a:link, .bose-linkList--alignRight a:hover, .bose-linkList--alignRight a:visited, .bose-linkList--alignRight a:active {
    margin-left: 0;
    padding: 5px 0px 5px 0px;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-linkList--alignRight a:link, .bose-linkList--alignRight a:hover, .bose-linkList--alignRight a:visited, .bose-linkList--alignRight a:active {
    margin-left: 0;
    padding: 5px 0px 5px 0px;
  }
}
.bose-linkList--alignRight a:link:first-child, .bose-linkList--alignRight a:hover:first-child, .bose-linkList--alignRight a:visited:first-child, .bose-linkList--alignRight a:active:first-child {
  margin-left: 0;
}
.bose-linkList--allCaps {
  text-transform: uppercase;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
.bose-storeLocator {
  padding: 0px;
  width: 100%;
}
.bose-storeLocator .bose-storeLocator__iframeContainer {
  overflow: hidden;
  width: 100%;
  height: 1140px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-storeLocator .bose-storeLocator__iframeContainer {
    height: 1195px;
  }
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
.bose-searchFilters {
  *zoom: 1;
}
.bose-searchFilters:after {
  content: "";
  display: table;
  clear: both;
}
.bose-searchFilters .bose-searchFilters__filterItem {
  min-height: 40px;
}
@media screen and (min-width: 901px) {
  .bose-searchFilters .bose-searchFilters__filterItem {
    padding-left: 10px;
  }
}
.bose-searchFilters .bose-searchFilters__filterColumn.-center {
  text-align: center;
}
.bose-searchFilters .bose-searchFilters__filterColumn.-right {
  text-align: right;
}
.bose-searchFilters .bose-searchFilters__filterColumn.-centerLarge {
  text-align: center;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-searchFilters .bose-searchFilters__filterColumn.-centerLarge {
    text-align: left;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-searchFilters .bose-searchFilters__filterColumn.-centerLarge {
    text-align: left;
  }
}
@media screen and (min-width: 901px) {
  .bose-searchFilters .bose-searchFilters__filterColumn.-rightLarge {
    text-align: right;
  }
}
.bose-searchFilters .bose-searchFilters__mobCollapse {
  *zoom: 1;
}
.bose-searchFilters .bose-searchFilters__mobCollapse:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-searchFilters .bose-searchFilters__mobCollapse {
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-searchFilters .bose-searchFilters__mobCollapse {
    margin-bottom: 20px;
  }
}
.bose-searchFilters .bose-searchFilters__title {
  text-transform: uppercase;
}
.bose-searchFilters .bose-searchFilters__title span.ui-accordion-header-icon {
  position: absolute;
  right: 5px;
  top: 10px;
  left: auto;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-searchFilters .bose-searchFilters__mobCollapsePart {
    padding: 20px;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-searchFilters .bose-searchFilters__mobCollapsePart {
    padding: 20px;
  }
}

.bose-searchNumResults {
  margin: 20px 30px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-searchNumResults {
    margin: 20px 20px;
  }
}
.bose-searchNumResults--fullWidth {
  margin: 20px 0;
}

.bose-searchResults {
  margin: 20px 30px;
  *zoom: 1;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-searchResults {
    margin: 20px 20px;
  }
}
.bose-searchResults--fullWidth {
  margin: 20px 0;
}
.bose-searchResults:after {
  content: "";
  display: table;
  clear: both;
}

.bose-searchResult {
  margin-bottom: 10px;
}
.bose-searchResult .bose-searchResult__title {
  font-family: Bose_Medium;
  color: #0066a1;
  margin-bottom: 5px;
  display: block;
}
.bose-searchResult .bose-searchResult__description {
  line-height: 23px;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
.bose-searchResultSetSwitcher {
  *zoom: 1;
}
.bose-searchResultSetSwitcher:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-searchResultSetSwitcher {
    border-bottom: 0 none transparent;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-searchResultSetSwitcher {
    border-bottom: 0 none transparent;
  }
}
.bose-searchResultSetSwitcher .bose-searchResultSetSwitcher__item {
  float: left;
  text-transform: uppercase;
  margin-right: 25px;
  padding: 10px 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.bose-search {
  *zoom: 1;
  margin: 0 auto;
  max-width: 1000px;
}
.bose-search:after {
  content: "";
  display: table;
  clear: both;
}
.bose-search .bose-search__numResults {
  margin: 0 20px;
  line-height: 50px;
}
.bose-search .bose-search__resultSetSwitcher {
  margin: 20px 30px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-search .bose-search__resultSetSwitcher {
    margin: 20px 20px;
  }
}
.bose-search .bose-search__resultSetSwitcher--fullWidth {
  margin: 20px 0;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-search .bose-search__resultSetSwitcher {
    margin-bottom: 5px;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-search .bose-search__resultSetSwitcher {
    margin-bottom: 5px;
  }
}
.bose-search .bose-search__filters {
  display: none;
  margin: 0 30px 20px 20px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-search .bose-search__filters {
    margin: 0 0 20px 0;
  }
}
.bose-search .bose-search__filters.-active {
  display: block;
}
.bose-search .bose-search__results {
  display: none;
}
.bose-search .bose-search__results.-active {
  display: block;
}
.bose-search .bose-search__loadingIcon {
  margin: 35px;
  display: none;
}
.bose-search .bose-search__nextPageLink {
  display: block;
}
.bose-search .bose-search__showMoreButton {
  display: none;
  margin: 30px auto;
  width: 200px;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
Bose Textfield
============

standard textfield
---------

 ```
<div class="bose-textField">
  <input class="bose-textField__input" type="text" id="foo" value="" />
  <label for="foo">This is the label</label>
</div>
 ```

*/
.bose-textField {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  position: relative;
  border-top: 2px solid transparent;
  margin-bottom: 10px;
}
.bose-textField .bose-textField__input {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: transparent;
  position: absolute;
  top: 17px;
  padding-left: 10px;
  width: 100%;
  font-size: 17px;
  font-family: "Bose_Regular", verdana;
  outline: none;
  border: 0 none;
}
.bose-textField.bose-textField--active .bose-textField__label, .bose-textField.bose-textField--error .bose-textField__label, .bose-textField.bose-textField--valid .bose-textField__label {
  font-size: 11px;
  font-family: "Bose_Medium", verdana;
  top: 6px;
  line-height: 1;
}
.bose-textField .bose-textField__label {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  top: 15px;
  padding-left: 10px;
  font-size: 14px;
  font-family: "Bose_Regular", verdana;
  cursor: text;
  -moz-transition: top 0.1s ease-out, font 0.1s ease-out;
  -o-transition: top 0.1s ease-out, font 0.1s ease-out;
  -webkit-transition: top 0.1s ease-out, font 0.1s ease-out;
  transition: top 0.1s ease-out, font 0.1s ease-out;
}
.bose-textField .bose-textField__label span {
  display: inline-block;
  padding-right: 10px;
  max-width: 100%;
  white-space: nowrap;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.bose-textField .bose-textField__label span.bose-textField__error-message {
  display: none;
}
.bose-textField .bose-textField__cvvSpacing {
  position: absolute;
  left: 0;
  right: 40px;
}
.bose-textField.bose-textField--error {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.bose-textField.bose-textField--error .bose-textField__label {
  padding-right: 5px;
}
.bose-textField.bose-textField--error .bose-textField__label span.bose-textField__label-title {
  display: none;
}
.bose-textField.bose-textField--error .bose-textField__label span.bose-textField__error-message {
  display: inline;
}
.bose-textField.bose-textField--readOnly {
  opacity: 0.5;
}
.bose-textField.bose-textField--readOnly .bose-textField__label {
  cursor: default;
}
.bose-textField.bose-textField--required {
  /*only for Javascript*/
}
.bose-textField.bose-textField--cvv .bose-icon {
  font-size: 8px;
  position: absolute;
  right: 12px;
  top: 12px;
}

.bose-tooltipContent--cvv {
  width: 190px;
  padding: 15px 5px;
  margin: 0;
  position: relative;
}
.bose-tooltipContent--cvv .bose-icon {
  font-size: 32px;
}
.bose-tooltipContent--cvv .bose-tooltipContent__text {
  text-align: right;
  line-height: 1em;
  position: absolute;
  padding-left: 10px;
  padding-right: 10px;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
Bose TextArea
============

standard TextArea
---------

 ```
<div class="bose-textArea">
  <textarea class="bose-textArea__input" id="foo"></textarea>
  <label for="foo">This is the label</label>
</div>
 ```

*/
.bose-textArea {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  border-top: 2px solid transparent;
  margin-bottom: 25px;
}
.bose-textArea .bose-textArea__input {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: transparent;
  position: relative;
  top: 17px;
  padding-left: 10px;
  width: 100%;
  font-size: 17px;
  font-family: "Bose_Regular", verdana;
  outline: none;
  border: 0 none;
}
.bose-textArea.bose-textArea--active .bose-textArea__label, .bose-textArea.bose-textArea--error .bose-textArea__label, .bose-textArea.bose-textArea--valid .bose-textArea__label {
  font-size: 11px;
  font-family: "Bose_Medium", verdana;
  top: 6px;
  left: 10px;
  line-height: 1;
}
.bose-textArea .bose-textArea__label {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  top: 15px;
  left: 10px;
  font-size: 14px;
  font-family: "Bose_Regular", verdana;
  cursor: text;
  -moz-transition: top 0.1s ease-out, font 0.1s ease-out;
  -o-transition: top 0.1s ease-out, font 0.1s ease-out;
  -webkit-transition: top 0.1s ease-out, font 0.1s ease-out;
  transition: top 0.1s ease-out, font 0.1s ease-out;
}
.bose-textArea .bose-textArea__label span {
  display: inline-block;
  padding-right: 10px;
  max-width: 100%;
  white-space: nowrap;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.bose-textArea .bose-textArea__label span.bose-textArea__error-message {
  display: none;
}
.bose-textArea.bose-textArea--error {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.bose-textArea.bose-textArea--error .bose-textArea__label {
  padding-right: 5px;
}
.bose-textArea.bose-textArea--error .bose-textArea__label span.bose-textArea__label-title {
  display: none;
}
.bose-textArea.bose-textArea--error .bose-textArea__label span.bose-textArea__error-message {
  display: inline;
}
.bose-textArea.bose-textArea--readOnly {
  opacity: 0.5;
}
.bose-textArea.bose-textArea--readOnly .bose-textArea__label {
  cursor: default;
}
.bose-textArea.bose-textArea--required {
  /*only for Javascript*/
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
.bose-select {
  *zoom: 1;
  box-sizing: border-box;
  position: relative;
  margin-bottom: 10px;
}
.bose-select:after {
  content: "";
  display: table;
  clear: both;
}
.bose-select.-left {
  text-align: left;
}
.bose-select.-center {
  text-align: center;
}
.bose-select.-right {
  text-align: right;
}
.bose-select.bose-select--quantityChanger {
  margin: 20px 30px;
  width: 61px;
  border-top: none;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-select.bose-select--quantityChanger {
    margin: 20px 20px;
  }
}
.bose-select.bose-select--quantityChanger--fullWidth {
  margin: 20px 0;
}
.bose-select.bose-select--quantityChanger .bose-select__select {
  border: 1px solid #cccccc;
  height: 35px;
}
.bose-select.bose-select--quantityChanger .bose-select__select .ui-selectmenu-text {
  padding: 8px 40px 0px 11px;
}
.bose-select.-lowVertCompSpacing {
  margin: 10px 30px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-select.-lowVertCompSpacing {
    margin: 10px 20px;
  }
}
.bose-select.-lowVertCompSpacing--fullWidth {
  margin: 10px 0;
}
.bose-select.bose-select--valid .bose-select__label, .bose-select.bose-select--active .bose-select__label, .bose-select.bose-select--error .bose-select__label {
  top: 6px;
  line-height: 1;
  cursor: default;
  -moz-transition: top 0.1s ease-out, font 0.1s ease-out;
  -o-transition: top 0.1s ease-out, font 0.1s ease-out;
  -webkit-transition: top 0.1s ease-out, font 0.1s ease-out;
  transition: top 0.1s ease-out, font 0.1s ease-out;
}
.bose-select .bose-select__label {
  display: inline-block;
  z-index: 2;
  position: absolute;
  top: 15px;
  cursor: pointer;
}
.bose-select .bose-select__label i.bose-icon.bose-icon--ok {
  margin-left: 5px;
}
.bose-select .bose-select__label span {
  display: inline-block;
  margin-left: 9px;
}
.bose-select .bose-select__label span.bose-select__errorMessage {
  display: none;
}
.bose-select.bose-select--error .bose-select__label span.bose-select__labelTitle {
  display: none;
}
.bose-select.bose-select--error .bose-select__label span.bose-select__errorMessage {
  display: inline;
}
.bose-select .bose-select__native {
  width: 100%;
  display: none;
}
.bose-select .bose-select__select {
  width: 100% !important;
  border-radius: 0;
  font-family: "Bose_Regular", verdana;
  outline: none;
  height: 40px;
  /*overrides for jQuery ui*/
}
.bose-select .bose-select__select.ui-selectmenu-disabled, .bose-select .bose-select__select.bose-select__select--disabled:hover {
  cursor: default;
}
.bose-select .bose-select__select .ui-selectmenu-text {
  padding: 17px 40px 0px 9px;
}
.bose-select .bose-select__select span.ui-icon {
  text-indent: 0;
  margin-top: -6px;
  /*half of height of icon*/
  top: 50%;
  font-size: 7px;
  right: 6px;
}

.ui-selectmenu-menu .bose-selectFoldout {
  max-height: 220px;
}
.ui-selectmenu-menu .bose-selectFoldout .ui-menu-item {
  padding-left: 9px;
}
.ui-selectmenu-menu .bose-selectFoldout .ui-menu-item.ui-state-focus {
  margin: 0px;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
Bose Hiddenfield
============

Hidden input field
---------

 ```
  <span class="bose-richText bose-hiddenField bose-hiddenField__errorMessage">${formFieldHelper.validation.errorMessage}</span>
  <input class="bose-hiddenField bose-hiddenField__input" type="hidden" id="foo" value="" />
 ```

*/
.bose-hiddenField {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "Bose_Regular", verdana;
  cursor: text;
}
.bose-hiddenField.bose-hiddenField__errorMessage {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-right: 10px;
  max-width: 100%;
  white-space: nowrap;
  color: #ba2d26;
  display: inline;
}
.bose-hiddenField.bose-hiddenField--required {
  /*only for Javascript*/
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose Checkout Page
 ============

 Form Flow
 -------

 ```
  <div class="bose-formFlow">
      <section class="bose-formFlow__panel bose-formFlowPanel bose-formFlowPanel--completed">
          <header class="bose-formFlowPanel__header">
              <span class="bose-formFlowPanel__headerPrefix">1</span>

              <h3 class="bose-formFlowPanel__headerTitle">
                  Completed state
              </h3>
              <a class="bose-formFlowPanel__headerLink">Edit</a>
          </header>

          <p class="bose-formFlowPanel__content">
              ABC
          </p>
      </section>
      <section class="bose-formFlow__panel bose-formFlowPanel bose-formFlowPanel--active">
          <header class="bose-formFlowPanel__header">
              <span class="bose-formFlowPanel__headerPrefix">2</span>

              <h3 class="bose-formFlowPanel__headerTitle">
                  Active state
              </h3>
              <a class="bose-formFlowPanel__headerLink">Edit</a>
          </header>

          <p class="bose-formFlowPanel__content">
              ABC
          </p>
      </section>
      <section class="bose-formFlow__panel bose-formFlowPanel bose-formFlowPanel--loading">
          <header class="bose-formFlowPanel__header">
              <span class="bose-formFlowPanel__headerPrefix">3</span>

              <h3 class="bose-formFlowPanel__headerTitle">
                  Loading state
              </h3>
              <a class="bose-formFlowPanel__headerLink">Edit</a>
          </header>

          <p class="bose-formFlowPanel__content">
              ABC
          </p>
      </section>
      <section class="bose-formFlow__panel bose-formFlowPanel">
          <header class="bose-formFlowPanel__header">
              <span class="bose-formFlowPanel__headerPrefix">4</span>

              <h3 class="bose-formFlowPanel__headerTitle">
                  Normal state
              </h3>
              <a class="bose-formFlowPanel__headerLink">Edit</a>
          </header>

          <p class="bose-formFlowPanel__content">
              ABC
          </p>
      </section>
  </div>
 ```
 */
.bose-formFlow {
  padding-left: 10px;
  padding-right: 10px;
}
.bose-formFlow .bose-formFlow__container {
  width: 100%;
  border: 1px solid #dddddd;
  border-top: none;
}
.bose-formFlow .bose-formFlow__container.bose-formFlow__container--noHeaders {
  border-top: 1px solid #dddddd;
}

.bose-formFlowPanel {
  /*completed state*/
  /*loading state*/
}
.bose-formFlowPanel__header {
  padding: 15px;
  border-top: 1px solid #dddddd;
}
.bose-formFlowPanel__headerPrefix {
  width: 17px;
  display: inline-block;
  text-align: center;
  padding: 5px;
}
.bose-formFlowPanel__headerTitle {
  font-family: "Bose_Light";
  font-size: 16px;
  padding-left: 15px;
  margin: 0px;
  display: inline-block;
  text-transform: uppercase;
}
.bose-formFlowPanel__headerLink {
  float: right;
  line-height: 27px;
  display: none;
  font-family: "Bose_Medium";
  font-size: 13px;
  text-decoration: underline;
}
.bose-formFlowPanel__headerLink:hover {
  font-family: "Bose_Medium";
  cursor: pointer;
  text-decoration: none;
}
.bose-formFlowPanel--active .bose-formFlowPanel__header {
  background-color: #00cece;
  border-bottom: 1px solid #dddddd;
}
.bose-formFlowPanel--active .bose-formFlowPanel__headerPrefix {
  background-color: #ffffff;
}
.bose-formFlowPanel--active .bose-formFlowPanel__content {
  display: block;
}
.bose-formFlowPanel--completed .bose-formFlowPanel__headerLink {
  display: block;
}
.bose-formFlowPanel--completed .bose-formFlowPanel__headerPrefix {
  background-color: #00d96d;
}
.bose-formFlowPanel--loading .bose-formFlowPanel__header {
  background-color: #00cece;
  border-bottom: 1px solid #dddddd;
}
.bose-formFlowPanel--loading .bose-formFlowPanel__content {
  background-image: url("");
  background-repeat: no-repeat;
  background-color: #ffffff;
  display: block;
}
.bose-formFlowPanel--loading .bose-formFlowPanel__content:before {
  content: "loading - loading animation still to create";
}
.bose-formFlowPanel__content {
  padding: 15px;
  margin: 0;
  color: #000000;
  display: none;
  background-color: #ffffff;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
Bose Form
============

*/
.bose-form .bose-form__errorTitle {
  font-family: Bose_Bold;
  color: #ba2d26;
  display: none;
}
.bose-form .bose-form__errorMessage {
  color: #ba2d26;
  display: none;
}
.bose-form.bose-form--showErrors .bose-form__errorTitle {
  display: block;
}
.bose-form.bose-form--showErrors .bose-form__errorMessage {
  display: block;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose Fieldset
 =============

 Fieldset
 -------

 ```
<fieldset class="bose-fieldSet">
  <legend class="bose-fieldSet__legend">
    <i class="bose-fieldSet__icon"></i>
  </legend>
  <div class="bose-fieldSet__content">

  </div>
</fieldset>

 ```
 */
.bose-fieldSet {
  *zoom: 1;
  position: relative;
}
.bose-fieldSet:after {
  content: "";
  display: table;
  clear: both;
}
.bose-fieldSet .bose-fieldSet__legend {
  width: 42px;
  height: 42px;
  float: left;
  background: #000000;
  position: absolute;
  left: 0;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-fieldSet .bose-fieldSet__legend {
    display: none;
  }
}
.bose-fieldSet .bose-fieldSet__legend.bose-fieldSet__legend--noIcon {
  background: transparent;
}
.bose-fieldSet .bose-fieldSet__legend .bose-fieldSet__icon {
  font-size: 9px;
  position: relative;
  left: 1.3em;
  top: 1.3em;
}
.bose-fieldSet .bose-fieldSet__content {
  float: left;
  box-sizing: border-box;
  width: 100%;
  padding-left: 42px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-fieldSet .bose-fieldSet__content {
    padding: 0;
  }
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
Bose Checkbox
============

standard checkbox
---------

 ```
    <div class="bose-checkbox">
        <input class="bose-checkbox__input" id="foo" type="checkbox" value="" />
        <label class="bose-checkbox__label" for="foo"><span></span>This is the label</label>
    </div>
 ```

 readonly checkbox
---------

 ```
    <div class="bose-checkbox bose-checkbox--readOnly">
        <input class="bose-checkbox__input" id="foo" type="checkbox" value=""/>
        <label class="bose-checkbox__label" for="foo"><span></span>This is the label</label>
    </div>
 ```

*/
.bose-checkbox {
  min-height: 20px;
}
.bose-checkbox.bose-checkbox--readOnly {
  opacity: 0.5;
}
.bose-checkbox .bose-checkbox__input {
  display: none;
}
.bose-checkbox .bose-checkbox__label {
  font-size: 16px;
  position: relative;
}
.bose-checkbox .bose-checkbox__label .bose-checkbox__text {
  display: block;
  margin-left: 30px;
  padding-top: 1px;
}
.bose-checkbox .bose-checkbox__label .bose-checkbox__icon {
  position: absolute;
  font-size: 10px;
  display: inline-block;
  margin: 0 5px 0 0;
  vertical-align: middle;
  float: left;
}
.bose-checkbox .bose-checkbox__errorMessage {
  font-size: 11px;
  color: #ba2d26;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose Address
 ============

 address
 -------

 ```
<div class="bose-address">
    <div class="bose-address__row">
    </div>
    <div class="bose-address bose-address--summary">
    </div>
</div>

 ```
 */
.bose-address {
  *zoom: 1;
  margin-bottom: 15px;
}
.bose-address:after {
  content: "";
  display: table;
  clear: both;
}
.bose-address--checkbox {
  *zoom: 1;
}
.bose-address--checkbox:after {
  content: "";
  display: table;
  clear: both;
}
.bose-address--summary {
  *zoom: 1;
  display: block;
  margin-left: 40px;
}
.bose-address--summary:after {
  content: "";
  display: table;
  clear: both;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose Social Media
 ============

 ```
  <div class="bose-socialMedia">...</div>
 ```
 */
.bose-socialMedia {
  padding-top: 20px;
  font-size: 16px;
}
html.bose-highContrastMode .bose-socialMedia .bose-socialMedia__icon.bose-icon .bose-screenReaderText {
  width: auto;
  min-width: 100px;
  margin: 2px;
  height: auto;
  position: relative;
  display: block;
  overflow: visible;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-socialMedia {
    font-size: 14px;
  }
}
.bose-socialMedia .bose-socialMedia__title {
  text-transform: uppercase;
  font-family: "Bose_Medium", verdana;
  font-size: 14px;
  color: #aaaaaa;
  display: block;
  margin-bottom: 14px;
}

@media screen and (min-width: 0px) and (max-width: 600px) {
  div.socialMedia {
    position: absolute;
    right: 12px;
    bottom: 0px;
  }
}
div.socialMedia .bose-socialMedia.bose-socialMedia--compact {
  margin: 20px 30px;
  width: 135px;
  padding-top: 0px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  div.socialMedia .bose-socialMedia.bose-socialMedia--compact {
    margin: 20px 20px;
  }
}
div.socialMedia .bose-socialMedia.bose-socialMedia--compact--fullWidth {
  margin: 20px 0;
}
div.socialMedia .bose-socialMedia.bose-socialMedia--compact .bose-socialMedia__icon {
  margin-right: 10px;
  margin-bottom: 10px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  div.socialMedia .bose-socialMedia.bose-socialMedia--verticallyStacked .bose-socialMedia__icon {
    display: block;
    padding-bottom: 10px;
  }
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
Bose incentive choice overlay
============

```
<div class="bose-incentiveOverlay">
      ...
</div>
```
*/
.bose-incentiveOverlay {
  max-width: 800px;
}
.bose-incentiveOverlay .bose-incentiveOverlay__title {
  margin: 10px 10px;
}
.bose-incentiveOverlay .bose-promo__descr {
  margin: 15px 10px;
}
.bose-incentiveOverlay .bose-incentiveOverlay__image {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 15px;
}
.bose-incentiveOverlay .bose-incentiveOverlay__productContainer {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  background: #F7F7F7;
  border: 1px solid #dddddd;
  margin: 5px auto;
  padding: 20px 10px;
}
.bose-incentiveOverlay .bose-incentiveOverlay__productContainer.bose-incentiveOverlay__productContainer--selected {
  background: #daeff0;
  border: 1px solid #aacbd7;
}
.bose-incentiveOverlay .bose-incentiveOverlay__productContainer .bose-incentiveOverlay__productTitle {
  font-family: Bose_Bold;
}
.bose-incentiveOverlay .bose-incentiveOverlay__buttons {
  text-align: center;
  line-height: 30px;
  margin: 10px 0px;
}
.bose-incentiveOverlay .bose-incentiveOverlay__buttons .bose-incentiveOverlay__continue {
  margin-top: 15px;
}
.bose-incentiveOverlay .bose-incentiveOverlay__buttons .bose-incentiveOverlay__continue.bose-incentiveOverlay__continue--disabled {
  background: #666666;
  color: #F7F7F7;
  border: 1px solid #dddddd;
  cursor: default;
}
.bose-incentiveOverlay .bose-incentiveOverlay__buttons .bose-incentiveOverlay__noThanks {
  margin-top: 15px;
  display: block;
  text-decoration: underline;
  cursor: pointer;
}

#shoppingCart {
  /* I know this isn't according our coding conventions. Done this because of timepressure and no time to refactor */
  padding: 0 20px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  #shoppingCart {
    padding: 0px;
  }
}

.bose-shoppingCart {
  *zoom: 1;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 1000px;
  width: 100%;
  border: 1px solid #dddddd;
  padding: 25px 15px;
  margin: 0 auto;
  display: block;
  /* because gridle makes is inline-block when putting grid-** on it. inline-block doens't work for margin-left/right: auto */
}
.bose-shoppingCart:after {
  content: "";
  display: table;
  clear: both;
}
.bose-shoppingCart.bose-shoppingCart--noborder {
  border: 0;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-shoppingCart {
    padding-left: 5px;
    padding-right: 5px;
    border: 0 none;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-shoppingCart {
    padding-left: 5px;
    padding-right: 5px;
    border: 0 none;
  }
}
.bose-shoppingCart .bose-shoppingCart__title {
  padding: 0 0 20px 0;
  margin: 0;
  font-family: "Bose_Regular", verdana;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-shoppingCart .bose-shoppingCart__title {
    padding-bottom: 10px;
  }
}
.bose-shoppingCart .bose-shoppingCart__editLink {
  margin-top: 3px;
  text-decoration: underline;
}
.bose-shoppingCart .bose-shoppingCart__editLink:hover {
  text-decoration: none;
}
.bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__product {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 12px;
  position: relative;
}
.bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__product:first-child {
  margin-top: 0;
}
.bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__productContainer .bose-shoppingCart__productContainerImage {
  display: inline-block;
  vertical-align: top;
  padding-right: 5px;
}
.bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__productContainer .bose-shoppingCart__productContainerImage img {
  margin: 0 auto;
  width: 100%;
  height: auto;
}
.bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__productContainer .bose-shoppingCart__productContainerDescription {
  padding: 20px 20px 20px 0;
}
.bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__productContainer .bose-shoppingCart__productContainerDescription section {
  margin-left: 10px;
}
.bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__productContainer .bose-shoppingCart__productContainerDescription .bose-shoppingCart__productContainerDescriptionTitle {
  margin-top: 0;
}
.bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__productContainer .bose-shoppingCart__productContainerDescription .bose-shoppingCart__productContainerDescriptionIcon {
  display: block;
  position: absolute;
  top: 11px;
  right: 11px;
  font-size: 6px;
  background-image: url(../../../designs/bose/base/clientlibs/images/icons/GD_iconset.svg);
  background-repeat: no-repeat;
  background-size: 87.5em 86.5em;
  /* 1400 (width)/16 | 1384 (height)/16 -> =width/height in px of the SVG   |    16 = the body fontsize in px (100%) */
  line-height: 1em;
  width: 2em;
  /* 32/16 -> 2 = width in px of the image we want from the sprite   |    16 = the body fontsize in px */
  height: 2em;
  /* 32/16 -> 2 = height in px of the image we want from the sprite   |    16 = the body fontsize in px */
  background-position: -34.5em -21em;
}
.bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__productContainer .bose-shoppingCart__productContainerDescription .bose-shoppingCart__productContainerDescriptionIcon:hover {
  cursor: pointer;
  background-position: -34.5em -25em;
}
.bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__productContainer .bose-shoppingCart__productContainerDescription .bose-shoppingCart__productContainerDescriptionIcon.bose-shoppingCart__productContainerDescriptionIcon--disabled {
  display: none;
}
.bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__productContainer .bose-shoppingCart__productContainerDescription .bose-shoppingCart__productContainerDescriptionProperties {
  display: inline-block;
}
.bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__productContainer .bose-shoppingCart__productContainerDescription .bose-shoppingCart__productContainerDescriptionColor {
  display: block;
  margin-bottom: 5px;
}
.bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__productContainer .bose-shoppingCart__productContainerDescription .bose-shoppingCart__productContainerDescriptionColor--inline {
  display: inline;
  font-style: italic;
}
.bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__productContainer .bose-shoppingCart__productContainerDescription .bose-shoppingCart__productContainerDescriptionInStock {
  text-transform: uppercase;
  margin-bottom: 5px;
}
.bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__productContainer .bose-shoppingCart__productContainerDescription .bose-shoppingCart__productContainerDescriptionExtra {
  display: inline-block;
  vertical-align: top;
}
.bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__productContainer .bose-shoppingCart__productContainerDescription .bose-shoppingCart__productContainerDescriptionExtra .bose-shoppingCart__productContainerDescriptionExtraInfo {
  font-weight: bold;
}
.bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__productContainer .bose-shoppingCart__productContainerDescription .bose-shoppingCart__productContainerDescriptionExtra .bose-shoppingCart__productContainerDescriptionExtraInfo.bose-shoppingCart__productContainerDescriptionExtraInfo--offer {
  display: block;
  padding-bottom: 10px;
}
.bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__productContainer .bose-shoppingCart__productContainerDescription .bose-shoppingCart__productContainerDescriptionExtra .bose-shoppingCart__productContainerDescriptionExtraInfo.bose-shoppingCart__productContainerDescriptionExtraInfo--promotion {
  display: block;
  padding-bottom: 10px;
}
.bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__priceContainer {
  border-top: 2px solid #dddddd;
  padding-top: 5px;
  padding-right: 10px;
  margin-bottom: 12px;
  margin-top: 20px;
}
.bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__priceContainer hr {
  border: 1px solid #dddddd;
}
.bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__priceContainer .bose-shoppingCart__priceContainerQtySelect {
  display: inline-block;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__priceContainer .bose-shoppingCart__priceContainerQtySelect .bose-shoppingCart__priceContainerQuantity {
    display: none;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__priceContainer .bose-shoppingCart__priceContainerQtySelect .bose-shoppingCart__priceContainerQty {
    display: none;
  }
}
@media screen and (min-width: 901px) {
  .bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__priceContainer .bose-shoppingCart__priceContainerQtySelect .bose-shoppingCart__priceContainerQty {
    display: none;
  }
}
.bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__priceContainer .bose-shoppingCart__priceContainerPrice {
  font-weight: bold;
  display: inline-block;
  text-align: right;
  padding-right: 10px;
}
.bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart_quantityInput {
  display: inline-block;
  vertical-align: middle;
}
.bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart_quantityInput.bose-shoppingCart_quantityInput--disabled {
  display: none;
}
.bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart_quantityInputIncentive.bose-shoppingCart_quantityInputIncentive--disabled {
  display: none;
}
.bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__quantityModifier, .bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__quantityModifier.bose-shoppingCart__quantityModifier--min, .bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__quantityModifier.bose-shoppingCart__quantityModifier--plus {
  display: inline-block;
  border: 1px solid #cccccc;
  padding: 4px;
  vertical-align: middle;
}
.bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__quantityModifier:hover {
  text-decoration: none;
}
.bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__quantityModifier--min.bose-shoppingCart__quantityModifier {
  -moz-border-radius-bottomleft: 5px;
  -webkit-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -webkit-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
}
.bose-shoppingCart .bose-shoppingCart__orderContainer .bose-shoppingCart__quantityModifier--plus.bose-shoppingCart__quantityModifier {
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  -webkit-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
}
.bose-shoppingCart .bose-shoppingCart__paymentContainer {
  padding-right: 12px;
  margin-top: 50px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-shoppingCart .bose-shoppingCart__paymentContainer {
    margin-top: 10px;
    padding: 0 20px;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-shoppingCart .bose-shoppingCart__paymentContainer {
    margin-top: 10px;
    padding: 0 20px;
  }
}
.bose-shoppingCart .bose-shoppingCart__paymentOptionsContainer {
  display: inline-block;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-shoppingCart .bose-shoppingCart__paymentOptionsContainer {
    padding: 0 10px;
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-shoppingCart .bose-shoppingCart__paymentOptionsContainer {
    padding: 0 10px;
    margin-bottom: 20px;
  }
}
.bose-shoppingCart .bose-shoppingCart__paymentSubTotalContainer {
  display: inline-block;
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-shoppingCart .bose-shoppingCart__paymentSubTotalContainer--pushedRight {
    margin-left: 66.66667%;
  }
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-shoppingCart .bose-shoppingCart__paymentSubTotalContainer--pushedRight {
    margin-left: 66.66667%;
  }
}
.bose-shoppingCart .bose-shoppingCart__paymentSubTotalContainer .bose-shoppingCart__paymentSubTotalRow {
  margin-bottom: 10px;
  padding: 0 10px;
}
.bose-shoppingCart .bose-shoppingCart__paymentSubTotalContainer .bose-shoppingCart__paymentSubTotalRow .bose-shoppingCart__paymentSubTotalRowLabel {
  text-align: left;
  font-weight: bold;
}
.bose-shoppingCart .bose-shoppingCart__paymentSubTotalContainer .bose-shoppingCart__paymentSubTotalRow .bose-shoppingCart__paymentSubTotalRowLabel.bose-shoppingCart__paymentSubTotalRowLabel--promo {
  text-align: left;
  font-weight: bold;
}
.bose-shoppingCart .bose-shoppingCart__paymentSubTotalContainer .bose-shoppingCart__paymentSubTotalRow .bose-shoppingCart__paymentSubTotalRowPrice {
  text-align: right;
  font-weight: bold;
}
.bose-shoppingCart .bose-shoppingCart__paymentSubTotalContainer .bose-shoppingCart__paymentSubTotalRow .bose-shoppingCart__paymentSubTotalRowPrice.bose-shoppingCart__paymentSubTotalRowPrice--promo {
  text-align: right;
  font-weight: bold;
}
.bose-shoppingCart .bose-shoppingCart__paymentTotalContainer {
  border-top: 2px solid #dddddd;
  padding-top: 5px;
  padding-top: 20px;
  margin-top: 20px;
}
.bose-shoppingCart .bose-shoppingCart__paymentTotalContainer .bose-shoppingCart__paymentTotalRow {
  *zoom: 1;
  padding: 0 10px;
}
.bose-shoppingCart .bose-shoppingCart__paymentTotalContainer .bose-shoppingCart__paymentTotalRow:after {
  content: "";
  display: table;
  clear: both;
}
.bose-shoppingCart .bose-shoppingCart__paymentTotalContainer .bose-shoppingCart__paymentTotalRow .bose-shoppingCart__paymentTotalRowLabel {
  text-align: left;
}
.bose-shoppingCart .bose-shoppingCart__paymentTotalContainer .bose-shoppingCart__paymentTotalRow .bose-shoppingCart__paymentTotalRowPrice {
  text-align: right;
}
.bose-shoppingCart .bose-shoppingCart__paymentTotalContainer .bose-shoppingCart__paymentTotalFlavourText {
  margin-top: 15px;
  text-align: right;
}
.bose-shoppingCart .bose-shoppingCart__paymentOptionsContainer .bose-shoppingCart__paymentOptionsTitle {
  margin-top: 0;
}
.bose-shoppingCart .bose-shoppingCart__paymentOptionsContainer .bose-shoppingCart__paymentOptionsFlavourText {
  display: inline-block;
  margin-top: 5px;
}
.bose-shoppingCart .bose-shoppingCart__orderInformation {
  border: 1px solid #dddddd;
  padding: 12px;
}
.bose-shoppingCart .bose-shoppingCart__orderInformation .bose-shoppingCart__orderInformationInfo, .bose-shoppingCart .bose-shoppingCart__orderInformation .bose-shoppingCart__orderInformationLabel {
  display: block;
  margin-top: 5px;
}
.bose-shoppingCart .bose-shoppingCart__orderInformation .bose-shoppingCart__orderInformationLabel {
  font-weight: bold;
  margin-top: 12px;
}
.bose-shoppingCart .bose-shoppingCart__orderInformation .bose-shoppingCart__orderInformationLabel:first-child {
  margin-top: 0;
}
.bose-shoppingCart .bose-shoppingCart__printArea .bose-shoppingCart__thankYouMsg {
  margin-bottom: 12px;
}
.bose-shoppingCart .bose-shoppingCart__printArea .bose-shoppingCart_confirmationNote {
  display: inline-block;
  margin-top: 12px;
}
.bose-shoppingCart .bose-shoppingCart__printActionArea .bose-shoppingCart__printBtn, .bose-shoppingCart .bose-shoppingCart__printActionArea .bose-shoppingCart__printBtn:hover {
  width: 100%;
  padding: 10px;
}
.bose-shoppingCart .bose-shoppingCart__printActionArea .bose-shoppingCart_returnBtn {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
}

.bose-shoppingCartSummaryNote {
  color: #dc5c18;
  border: none;
  text-align: right;
  margin-top: 6px;
  margin-bottom: 6px;
}

.bose-shoppingCartActionContainer {
  *zoom: 1;
  border: 1px solid #dddddd;
  border-top: none;
  padding: 0 30px 0 25px;
  margin-bottom: 50px;
}
.bose-shoppingCartActionContainer:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-shoppingCartActionContainer {
    margin-bottom: 0;
    background: transparent;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-shoppingCartActionContainer {
    margin-bottom: 0;
    background: transparent;
  }
}
.bose-shoppingCartActionContainer .bose-shoppingCartActionContainer__continueButton {
  margin: 25px 0;
  float: left;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-shoppingCartActionContainer .bose-shoppingCartActionContainer__continueButton {
    display: none;
  }
}
.bose-shoppingCartActionContainer .bose-shoppingCartActionContainer__continueButtonSmallMedium {
  margin: 0 0 25px 0;
  float: left;
  display: none;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-shoppingCartActionContainer .bose-shoppingCartActionContainer__continueButtonSmallMedium {
    display: block;
  }
}
.bose-shoppingCartActionContainer .bose-shoppingCartActionContainer__checkoutButton {
  float: right;
  margin: 20px 0;
}

/*
bose-shoppingCartTitle
*/
.bose-shoppingCartTitle {
  *zoom: 1;
  max-width: 960px;
  margin: 80px auto 0 auto;
  padding: 0 20px;
}
.bose-shoppingCartTitle:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-shoppingCartTitle {
    margin: 0;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-shoppingCartTitle {
    margin: 0;
  }
}
.bose-shoppingCartTitle .bose-shoppingCartTitle__title {
  float: left;
}
.bose-shoppingCartTitle .bose-shoppingCartTitle__cta {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  margin: 20px 0;
  padding: 12px;
  text-align: center;
  float: right;
  margin-right: 30px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-shoppingCartTitle .bose-shoppingCartTitle__cta {
    margin-right: 0px;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-shoppingCartTitle .bose-shoppingCartTitle__cta {
    margin-right: 0px;
  }
}
.bose-shoppingCartTitle.bose-shoppingCart--cart_summary .bose-shoppingCart__orderContainer .bose-shoppingCart__productContainer .bose-shoppingCart__productContainerDescriptionColor {
  display: inline;
  margin-top: 0;
}
.bose-shoppingCartTitle.bose-shoppingCart--cart_summary .bose-shoppingCart__orderContainer .bose-shoppingCart__productContainer .bose-shoppingCart__productContainerDescriptionColor:before {
  content: "-";
}
.bose-shoppingCartTitle.bose-shoppingCart--cart_summary .bose-shoppingCart__orderContainer .bose-shoppingCart__productContainer .bose-shoppingCart__productContainerDescriptionInStock {
  margin-top: 10px;
}

.bose-shoppingCart--cart_summary .bose-shoppingCart__title {
  width: 85%;
}
.bose-shoppingCart--cart_summary .bose-shoppingCart__orderContainer .bose-shoppingCart__priceContainer {
  margin-top: 10px;
  padding-top: 10px;
}
.bose-shoppingCart--cart_summary .bose-shoppingCart__orderContainer .bose-shoppingCart__priceContainer .bose-shoppingCart__priceContainerPrice {
  padding-right: 0px;
}
.bose-shoppingCart--cart_summary .bose-shoppingCart__paymentContainer .bose-shoppingCart__paymentTotalContainer {
  padding-top: 14px;
  margin-top: 8px;
}

.bose-shoppingCart__actionContainer {
  border: 1px solid #dddddd;
  border-top: none;
  padding: 0 12px 0 12px;
  margin-bottom: 10px;
}
.bose-shoppingCart__actionContainer .bose-shoppingCart__actionContainerContinueButton {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  margin: 16px 0 16px 0;
  padding: 8px;
  text-align: center;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-shoppingCart__actionContainer .bose-shoppingCart__actionContainerContinueButton {
    display: none;
  }
}
.bose-shoppingCart__actionContainer .bose-shoppingCart--cart_summary .bose-shoppingCart__title {
  width: 85%;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
@media print {
  .bose-header {
    display: none;
  }

  .bose-shoppingCart .bose-shoppingCart__printActionArea {
    display: none;
  }
  .bose-shoppingCart .bose-shoppingCart__orderInformation {
    width: 100%;
  }
  .bose-shoppingCart .bose-shoppingCart__paymentSubTotalContainer--pushedRight {
    margin-left: 66%;
  }

  .bose-footer__container {
    display: none;
  }
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 TODO
 ============

 TODO
 -------


 ```
<div>TODO</div>
 ```
 */
.bose-productContent {
  margin: 20px 30px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-productContent {
    margin: 20px 20px;
  }
}
.bose-productContent--fullWidth {
  margin: 20px 0;
}
.bose-productContent ul, .bose-productContent ol {
  list-style: inherit;
  list-style-position: inside;
}
.bose-productContent ul li p, .bose-productContent ol li p {
  display: inline;
}

.bose-categoryContent ul, .bose-categoryContent ol {
  list-style: inherit;
  list-style-position: inside;
}
.bose-categoryContent ul li p, .bose-categoryContent ol li p {
  display: inline;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
.bose-ratingsAndReviews {
  margin: 20px 30px;
  padding-top: 30px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-ratingsAndReviews {
    margin: 20px 20px;
  }
}
.bose-ratingsAndReviews--fullWidth {
  margin: 20px 0;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose Promo
 ============

 standard promo
 -------

 ```
<div class="bose-promo">
  <div class="bose-promo__descr">
    <strong>This product is eligible for interest free payments.</strong>
    <p>Payments as low as $24.99 (excl. P&P) per month.</p>
  </div>
</div>
 ```

 offerTitleOnly promo
 -------

 ```
<div class="bose-promo bose-promo--offerTitleOnly">
  <div class="bose-promo__title">Save 10% when you order by 1/31/15</div>
</div>
 ```

 offerWithImage promo
 -------

 ```
<div class="bose-promo bose-promo--offerWithImage">
  <div class="bose-promo__title">Special Offer</div>
  <div class="bose-promo__descr">
    <strong>Premium + unlimited music</strong>
    <p>Get a free trial and 12 months at 50% off.</p>
  </div>
  <img class="bose-promo__img" src="http://lorempixel.com/90/90/" title="dummy image" />
  <a href="javascript:;" class="bose-promo__cta bose-link bose-link--arrowRight">More information</a>
</div>
 ```

 shipment promo
 -------

 ```
<div class="bose-promo bose-promo--shipmentpromo">
  <div class="bose-promo__title">Free shipping</div>
</div>
 ```
*/
.bose-promo {
  margin: 20px 30px;
  display: block;
  text-align: center;
  padding-bottom: 10px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-promo {
    margin: 20px 20px;
  }
}
.bose-promo--fullWidth {
  margin: 20px 0;
}
.bose-promo.bose-promo--leftAlign {
  text-align: left;
}
.bose-promo .bose-promo__header {
  padding-bottom: 3px;
}
.bose-promo .bose-promo__descr p {
  margin: 0;
  padding: 0 0 5px 0;
}
.bose-promo.bose-promo--shipmentpromo {
  padding: 0;
  text-align: left;
}
.bose-promo .bose-promo__title {
  padding: 5px 0;
}
.bose-promo.bose-promo--offerTitleOnly .bose-promo__title {
  padding: 5px 0;
}
.bose-promo.bose-promo--offer {
  margin-bottom: 20px;
}
.bose-promo.bose-promo--default {
  padding: 15px 20px;
}
.bose-promo.bose-promo--offerWithImage {
  text-align: left;
  padding: 15px 20px;
  position: relative;
  min-height: 90px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-promo.bose-promo--offerWithImage {
    margin-left: 0;
    margin-right: 0;
  }
}
.bose-promo.bose-promo--offerWithImage .bose-promo__title {
  padding-bottom: 5px;
  margin-right: 90px;
}
.bose-promo.bose-promo--offerWithImage .bose-promo__descr {
  padding-bottom: 5px;
  margin-right: 90px;
}
.bose-promo.bose-promo--offerWithImage .bose-promo__cta {
  clear: both;
}
.bose-promo.bose-promo--offerWithImage .bose-promo__img {
  position: absolute;
  top: 15px;
  right: 10px;
  width: 90px;
}
.bose-promo.-centerTitle .bose-promo__title {
  text-align: center;
}
.bose-promo.-noDescr .bose-promo__descr {
  display: none;
}
.bose-promo.-lowVertCompSpacing {
  margin: 10px 30px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-promo.-lowVertCompSpacing {
    margin: 10px 20px;
  }
}
.bose-promo.-lowVertCompSpacing--fullWidth {
  margin: 10px 0;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose Product Status
 ============

 General product Status
 -------

 ```
<div class="bose-productStatus">
    Limited Edition
</div>
 ```
 */
.bose-productStatus {
  min-height: 15px;
  display: inline-block;
  padding: 10px;
  text-transform: uppercase;
  position: absolute;
  display: none;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-productStatus {
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
  }
}
.bose-productStatus.bose-productStatus--show {
  display: inline-block;
}
.bose-productStatus.bose-productStatus--absPos {
  position: absolute;
  z-index: 1000;
}

.bose-cartProductReferences__reference__container .bose-productStatus, .bose-cartProductReferences__reference__container .bose-productStatus--show {
  position: absolute;
  top: 0;
  left: 0;
}

.bose-productReferences__reference__container .bose-productStatus, .bose-productReferences__reference__container .bose-productStatus--show {
  position: absolute;
  top: 0;
  left: 0;
}

@charset "UTF-8";
.bose-productReference {
  display: inline-block;
  min-height: 1px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
  Bose Product References
 ============

 Product Reference
 -------


 ```
<div class="bose-productReferences">
    <section class="bose-productReference bose-productReferences__reference">
        <div class="bose-productReferences__reference__container grid-4 grid-medium-4 grid-small-12">
            <img class="bose-productReference__image" src="/content/dam/bose/consumer-electronics/products/wms_III_bluetooth.thumbnail.319.319.jpg" alt="" title="">

              <div class="bose-colorSelectorContainer">
                  <div class="bose-colorSelector" data-product-code="wms_III_bluetooth">
                      <ul class="bose-colorSelector__colorList bose-colorSelector__colorList--floatLeft">
                        <li>
                            <a class="bose-colorSelector__colorItem bose-colorItem bose-colorItem--selected" href="javascript:;" title="Grey" data-variant-code="wms_III_bluetooth_grey" data-variant-path="/etc/commerce/products/consumer/Staged/website_ce_us/b2c/wave_systems/wave_music_systems/wms_III_bluetooth/wms_III_bluetooth_grey">
                                <span class="bose-colorItem__colorField" style="background-color: grey">&nbsp;</span>
                            </a>
                        </li>
                        <li>
                            <a class="bose-colorSelector__colorItem bose-colorItem " href="javascript:;" title="Black" data-variant-code="wms_III_bluetooth_black" data-variant-path="/etc/commerce/products/consumer/Staged/website_ce_us/b2c/wave_systems/wave_music_systems/wms_III_bluetooth/wms_III_bluetooth_black">
                                <span class="bose-colorItem__colorField" style="background-color: black">&nbsp;</span>
                            </a>
                        </li>
                        <li>
                            <a class="bose-colorSelector__colorItem bose-colorItem " href="javascript:;" title="White" data-variant-code="wms_III_bluetooth_white" data-variant-path="/etc/commerce/products/consumer/Staged/website_ce_us/b2c/wave_systems/wave_music_systems/wms_III_bluetooth/wms_III_bluetooth_white">
                                <span class="bose-colorItem__colorField" style="background-color: white">&nbsp;</span>
                            </a>
                        </li>
                      </ul>
                      <div class="bose-colorSelector__label bose-colorSelector__label--floatleft"><span class="bose-colorSelector__colorName">Grey</span></div>

                      <input type="hidden" name=":product-variantCode" value="wms_III_bluetooth_grey">
                      <input type="hidden" name=":product-path" value="/etc/commerce/products/consumer/Staged/website_ce_us/b2c/wave_systems/wave_music_systems/wms_III_bluetooth/wms_III_bluetooth_grey">
                  </div>
              </div>

              <div class="bose-productReference__description">
                  <a class="bose-productReference__title" href="/etc/commerce/products/consumer/Staged/website_ce_us/b2c/wave_systems/wave_music_systems/wms_III_bluetooth">Wave Music System III with Bluetooth adapter</a>

                  <div class="bose-price " data-product-code="wms_III_bluetooth" data-price-productcodemapping="{&quot;wms_III_bluetooth_grey&quot;:{&quot;promotionalPrice&quot;:null,&quot;originalPrice&quot;:&quot;$679.95&quot;,&quot;empty&quot;:false,&quot;showPromotionalPrice&quot;:false},&quot;wms_III_bluetooth_black&quot;:{&quot;promotionalPrice&quot;:null,&quot;originalPrice&quot;:&quot;$679.95&quot;,&quot;empty&quot;:false,&quot;showPromotionalPrice&quot;:false},&quot;wms_III_bluetooth_white&quot;:{&quot;promotionalPrice&quot;:null,&quot;originalPrice&quot;:&quot;$679.95&quot;,&quot;empty&quot;:false,&quot;showPromotionalPrice&quot;:false}}">
                      <div class="bose-price__price">$679.95</div>
                      <div class="bose-price__price bose-price__price--old"></div>
                  </div>

                  <div class="bose-cta" data-product-code="wms_III_bluetooth" data-cta-productcodemapping="{&quot;wms_III_bluetooth_grey&quot;:[{&quot;type&quot;:&quot;buy&quot;,&quot;show&quot;:false,&quot;disabled&quot;:false},{&quot;type&quot;:&quot;reserve_and_collect&quot;,&quot;show&quot;:false,&quot;disabled&quot;:false}],&quot;wms_III_bluetooth_black&quot;:[{&quot;type&quot;:&quot;buy&quot;,&quot;show&quot;:false,&quot;disabled&quot;:false},{&quot;type&quot;:&quot;reserve_and_collect&quot;,&quot;show&quot;:false,&quot;disabled&quot;:false}],&quot;wms_III_bluetooth_white&quot;:[{&quot;type&quot;:&quot;buy&quot;,&quot;show&quot;:false,&quot;disabled&quot;:false},{&quot;type&quot;:&quot;reserve_and_collect&quot;,&quot;show&quot;:false,&quot;disabled&quot;:false}]}">

                    <a class="bose-button bose-button--buy bose-button--hide" title="buy" onclick="return Bose.Forms.submitForm(this);"><span class="bose-button__label">buy</span></a>
                    <a class="bose-button bose-button--reserve_and_collect bose-button--hide" title="reserve_and_collect" onclick="return Bose.Forms.submitForm(this);"><span class="bose-button__label">reserve_and_collect</span></a>
                  </div>

                  <div class="bose-productATP" data-product-code="wms_III_bluetooth" data-atp-productcodemapping="{&quot;wms_III_bluetooth_grey&quot;:null,&quot;wms_III_bluetooth_black&quot;:null,&quot;wms_III_bluetooth_white&quot;:null}">

                  </div>
              </div>
        </div>
    </section>
    <section class="bose-productReference bose-productReferences__reference">
        <div class="bose-productReferences__reference__container grid-4 grid-medium-4 grid-small-12">
            <img class="bose-productReference__image" src="/content/dam/bose/consumer-electronics/products/wms_soundtouch.thumbnail.319.319.jpg" alt="" title="">

            <div class="bose-colorSelectorContainer">
              <div class="bose-colorSelector" data-product-code="wms_soundtouch">
                  <ul class="bose-colorSelector__colorList bose-colorSelector__colorList--floatLeft">
                    <li>
                        <a class="bose-colorSelector__colorItem bose-colorItem bose-colorItem--selected" href="javascript:;" title="Black" data-variant-code="wms_soundtouch_black" data-variant-path="/etc/commerce/products/consumer/Staged/website_ce_us/b2c/wifi_systems/wave_soundtouch_music_systems/wms_soundtouch/wms_soundtouch_black">
                            <span class="bose-colorItem__colorField" style="background-color: black">&nbsp;</span>
                        </a>
                    </li>
                    <li>
                        <a class="bose-colorSelector__colorItem bose-colorItem " href="javascript:;" title="White" data-variant-code="wms_soundtouch_white" data-variant-path="/etc/commerce/products/consumer/Staged/website_ce_us/b2c/wifi_systems/wave_soundtouch_music_systems/wms_soundtouch/wms_soundtouch_white">
                            <span class="bose-colorItem__colorField" style="background-color: white">&nbsp;</span>
                        </a>
                    </li>
                  </ul>
                  <div class="bose-colorSelector__label bose-colorSelector__label--floatleft"><span class="bose-colorSelector__colorName">Black</span></div>

                  <input type="hidden" name=":product-variantCode" value="wms_soundtouch_black">
                  <input type="hidden" name=":product-path" value="/etc/commerce/products/consumer/Staged/website_ce_us/b2c/wifi_systems/wave_soundtouch_music_systems/wms_soundtouch/wms_soundtouch_black">
              </div>
            </div>

            <div class="bose-productReference__description">
                <a class="bose-productReference__title" href="/etc/commerce/products/consumer/Staged/website_ce_us/b2c/wifi_systems/wave_soundtouch_music_systems/wms_soundtouch">Wave Soundtouch Music System</a>

                <div class="bose-price " data-product-code="wms_soundtouch" data-price-productcodemapping="{&quot;wms_soundtouch_black&quot;:{&quot;promotionalPrice&quot;:null,&quot;originalPrice&quot;:&quot;$669.95&quot;,&quot;empty&quot;:false,&quot;showPromotionalPrice&quot;:false},&quot;wms_soundtouch_white&quot;:{&quot;promotionalPrice&quot;:null,&quot;originalPrice&quot;:&quot;$679.95&quot;,&quot;empty&quot;:false,&quot;showPromotionalPrice&quot;:false}}">
                    <div class="bose-price__price">$669.95</div>
                    <div class="bose-price__price bose-price__price--old"></div>
                </div>

                <div class="bose-cta" data-product-code="wms_soundtouch" data-cta-productcodemapping="{&quot;wms_soundtouch_black&quot;:[{&quot;type&quot;:&quot;buy&quot;,&quot;show&quot;:true,&quot;disabled&quot;:false},{&quot;type&quot;:&quot;reserve_and_collect&quot;,&quot;show&quot;:false,&quot;disabled&quot;:false}],&quot;wms_soundtouch_white&quot;:[{&quot;type&quot;:&quot;buy&quot;,&quot;show&quot;:false,&quot;disabled&quot;:false},{&quot;type&quot;:&quot;reserve_and_collect&quot;,&quot;show&quot;:false,&quot;disabled&quot;:false}]}">
                  <a class="bose-button bose-button--buy bose-button--show" title="buy" onclick="return Bose.Forms.submitForm(this);"><span class="bose-button__label">buy</span></a>
                  <a class="bose-button bose-button--reserve_and_collect bose-button--hide" title="reserve_and_collect" onclick="return Bose.Forms.submitForm(this);"><span class="bose-button__label">reserve_and_collect</span></a>
                </div>

                <div class="bose-productATP" data-product-code="wms_soundtouch" data-atp-productcodemapping="{&quot;wms_soundtouch_black&quot;:{&quot;message&quot;:&quot;eeeeee&quot;,&quot;numberOfDays&quot;:50,&quot;empty&quot;:false},&quot;wms_soundtouch_white&quot;:null}">
                    eeeeee
                </div>
            </div>
        </div>
    </section>
</div>
 ```
 */
.bose-productReference {
  background-color: #ffffff;
  float: left;
  direction: ltr;
  padding-left: 0px;
  padding-right: 0px;
  width: 33.33333%;
  float: left;
  direction: ltr;
  padding-left: 0px;
  padding-right: 0px;
  float: left;
  direction: ltr;
  padding-left: 0px;
  padding-right: 0px;
  border-right: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-productReference {
    float: left;
    direction: ltr;
    padding-left: 0px;
    padding-right: 0px;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-productReference {
    float: left;
    direction: ltr;
    padding-left: 0px;
    padding-right: 0px;
  }
}
@media screen and (min-width: 901px) {
  .bose-productReference {
    float: left;
    direction: ltr;
    padding-left: 0px;
    padding-right: 0px;
  }
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-productReference {
    float: left;
    direction: ltr;
    padding-left: 0px;
    padding-right: 0px;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-productReference {
    float: left;
    direction: ltr;
    padding-left: 0px;
    padding-right: 0px;
  }
}
@media screen and (min-width: 901px) {
  .bose-productReference {
    float: left;
    direction: ltr;
    padding-left: 0px;
    padding-right: 0px;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-productReference {
    width: 50%;
  }
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-productReference {
    float: left;
    direction: ltr;
    padding-left: 0px;
    padding-right: 0px;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-productReference {
    float: left;
    direction: ltr;
    padding-left: 0px;
    padding-right: 0px;
  }
}
@media screen and (min-width: 901px) {
  .bose-productReference {
    float: left;
    direction: ltr;
    padding-left: 0px;
    padding-right: 0px;
  }
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-productReference {
    width: 100%;
  }
}
.bose-productReference.-odd .bose-productReference__image {
  background-color: #e9e9e9;
}
.bose-productReference.-even .bose-productReference__image {
  background-color: #f8f8f6;
}
@media screen and (min-width: 901px) {
  .bose-productReference.-large0 {
    border-left: 1px solid #cccccc;
  }
  .bose-productReference.-topLarge {
    border-top: 1px solid #cccccc;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-productReference.-med0 {
    border-left: 1px solid #cccccc;
  }
  .bose-productReference.-topMedium {
    border-top: 1px solid #cccccc;
  }
  .bose-productReference .bose-productReference__container {
    min-height: 460px;
  }
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-productReference {
    border: 1px solid #cccccc;
    border-top: 0 none;
  }
  .bose-productReference:first-child {
    border-top: 1px solid #cccccc;
  }
  .bose-productReference .bose-productReference__container {
    border: 0;
    min-height: 500px;
    margin-left: 0;
    margin-top: 0;
  }
}
.bose-productReference .bose-productReference__container {
  min-height: 520px;
  width: 100%;
  position: relative;
}
.bose-productReference .bose-productReference__image {
  position: relative;
  display: block;
}
.bose-productReference .bose-productReference__image img {
  width: 100%;
  height: auto;
  min-height: 110px;
  display: block;
}
.bose-productReference .bose-productReference__colorSelectorContainer {
  margin: 10px 30px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-productReference .bose-productReference__colorSelectorContainer {
    margin: 10px 20px;
  }
}
.bose-productReference .bose-productReference__colorSelectorContainer--fullWidth {
  margin: 10px 0;
}
.bose-productReference .bose-productReference__description {
  width: 98%;
  margin: 0 auto;
}
.bose-productReference .bose-productReference__promoGroup {
  overflow: auto;
}
.bose-productReference .bose-productReference__ctaHolder {
  overflow: auto;
}
.bose-productReference .bose-productReference__title {
  margin: 10px 30px;
  display: block;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-productReference .bose-productReference__title {
    margin: 10px 20px;
  }
}
.bose-productReference .bose-productReference__title--fullWidth {
  margin: 10px 0;
}
.bose-productReference .bose-productReference__ratings {
  margin: 10px 30px;
  display: block;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-productReference .bose-productReference__ratings {
    margin: 10px 20px;
  }
}
.bose-productReference .bose-productReference__ratings--fullWidth {
  margin: 10px 0;
}
.bose-productReference .bose-productReference__price {
  margin: 10px 30px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-productReference .bose-productReference__price {
    margin: 10px 20px;
  }
}
.bose-productReference .bose-productReference__price--fullWidth {
  margin: 10px 0;
}

.bose-productReferences {
  *zoom: 1;
}
.bose-productReferences:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-productReferences {
    padding: 20px 30px;
  }
}
@media screen and (min-width: 0px) and (max-width: 600px) and (min-width: 0px) and (max-width: 600px) {
  .bose-productReferences {
    padding: 20px 20px;
  }
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-productReferences--fullWidth {
    padding: 20px 0;
  }
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
.bose-productRatings {
  margin: 20px 30px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-productRatings {
    margin: 20px 20px;
  }
}
.bose-productRatings--fullWidth {
  margin: 20px 0;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose Price
 ============

 Standard Price
 -------
 ```
<div class="bose-price">
    <div class="bose-price__price">$200.00</div>
</div>
 ```
Price with promo
 -------
 ```
<div class="bose-price bose-price--withPromo">
    <div class="bose-price__price">$200.00</div>
    <div class="bose-price__price bose-price__price--old">$500.00</div>
</div>
 ```
 */
.bose-price {
  margin: 20px 30px;
  padding: 0;
  text-align: left;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-price {
    margin: 20px 20px;
  }
}
.bose-price--fullWidth {
  margin: 20px 0;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
.bose-productList {
  *zoom: 1;
}
.bose-productList:after {
  content: "";
  display: table;
  clear: both;
}

.bose-productImageSlider {
  margin: 10px auto 30px auto;
}
.bose-productImageSlider img {
  margin: 0 auto 0 auto;
  width: inherit;
  max-width: 450px;
}
.bose-productImageSlider .slider-nav {
  margin: 20px auto 20px auto;
  width: 250px;
  position: relative;
}
.bose-productImageSlider .slider-nav .slick-dots {
  position: relative;
  margin-bottom: 0;
  bottom: 0;
}
.bose-productImageSlider .slider-nav .slick-dots li.slick-active button:before {
  color: #0066a1;
}
.bose-productImageSlider .slider-nav .slick-prev, .bose-productImageSlider .slider-nav .slick-next {
  z-index: 1;
}
.bose-productImageSlider .slider-nav .slick-prev:before, .bose-productImageSlider .slider-nav .slick-next:before {
  color: #cccccc;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
.bose-cta {
  margin: 20px 30px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-cta {
    margin: 20px 20px;
  }
}
.bose-cta--fullWidth {
  margin: 20px 0;
}
.bose-cta.-lowVertCompSpacing {
  margin: 10px 30px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-cta.-lowVertCompSpacing {
    margin: 10px 20px;
  }
}
.bose-cta.-lowVertCompSpacing--fullWidth {
  margin: 10px 0;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose Product ATP Message
 ============

 ```
  <div class="bose-productATP">Available in 3 days</div>
 ```
 */
.bose-productATP {
  *zoom: 1;
  margin: 20px 30px;
  display: block;
}
.bose-productATP:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-productATP {
    margin: 20px 20px;
  }
}
.bose-productATP--fullWidth {
  margin: 20px 0;
}
.bose-productATP.-center {
  text-align: center;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose Payment Control
 ============

 state changes are done by JavaScript

 paymentcontrol
 -------

 ```
  <div class="bose-paymentControl">
    <div class="bose-icon bose-paymentControl__icon bose-paymentControl__icon--paymentvisa">&nbsp;</div>
    <div class="bose-icon bose-paymentControl__icon bose-paymentControl__icon--paymentamex">&nbsp;</div>
    <div class="bose-icon bose-paymentControl__icon bose-paymentControl__icon--paymentdiscover">&nbsp;</div>
  </div>
 ```

 paymentcontrol inactive icons
 -------

 ```
  <div class="bose-paymentControl">
    <div class="bose-icon bose-paymentControl__icon bose-paymentControl__icon--paymentvisa bose-paymentControl__icon--inactive">&nbsp;</div>
    <div class="bose-icon bose-paymentControl__icon bose-paymentControl__icon--paymentamex bose-paymentControl__icon--inactive">&nbsp;</div>
    <div class="bose-icon bose-paymentControl__icon bose-paymentControl__icon--paymentdiscover bose-paymentControl__icon--inactive">&nbsp;</div>
  </div>
 ```

 paymentcontrol selected icons
 -------

 ```
  <div class="bose-paymentControl">
    <div class="bose-icon bose-paymentControl__icon bose-paymentControl__icon--paymentvisa bose-paymentControl__icon--selected">&nbsp;</div>
    <div class="bose-icon bose-paymentControl__icon bose-paymentControl__icon--paymentamex bose-paymentControl__icon--selected">&nbsp;</div>
    <div class="bose-icon bose-paymentControl__icon bose-paymentControl__icon--paymentdiscover bose-paymentControl__icon--selected">&nbsp;</div>
  </div>
 ```

 */
.bose-paymentControlTitle {
  color: #666;
  margin-bottom: 15px;
}

div.creditcard-details {
  margin-top: 15px;
}

.bose-paymentControl {
  *zoom: 1;
  font-size: 30px;
}
.bose-paymentControl:after {
  content: "";
  display: table;
  clear: both;
}
.bose-paymentControl.bose-paymentControl--readonly .bose-paymentControl__icon {
  cursor: default;
}
.bose-paymentControl.bose-paymentControl--small {
  font-size: 15px;
}
.bose-paymentControl .bose-paymentControl__label {
  font-family: Bose_Medium;
  font-size: 16px;
  color: #666666;
  display: block;
}
.bose-paymentControl .bose-paymentControl__title {
  font-family: Bose_Medium;
  font-size: 14px;
  color: #333333;
  display: block;
  margin: 0;
  padding: 0 0 8px 0;
}
.bose-paymentControl .bose-paymentControl__note {
  clear: left;
  font-family: Bose_Medium;
  padding-top: 20px;
  font-size: 13px;
  color: #555555;
  display: block;
}
.bose-paymentControl .bose-paymentControl__note a, .bose-paymentControl .bose-paymentControl__note a:link, .bose-paymentControl .bose-paymentControl__note a:hover, .bose-paymentControl .bose-paymentControl__note a:visited, .bose-paymentControl .bose-paymentControl__note a:active {
  color: #0066a1;
}
.bose-paymentControl .bose-paymentControl__note a:hover {
  text-decoration: underline;
}
.bose-paymentControl .bose-paymentControl__icon {
  float: left;
  margin-left: 10px;
  text-decoration: none;
  cursor: pointer;
}
.bose-paymentControl .bose-paymentControl__icon:first-child {
  margin-left: 0;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose login page
 ============

 General Login component
 -------

 This file contains all styling rules for the login area

 ```

 ```
 */
.bose-login__container {
  position: relative;
  margin-top: 80px;
  margin-left: 40%;
}

.bose-login__container input {
  display: block;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose Inline Ratings
 ============

 General Inline Ratings
 -------

 This file contains all styling rules for the inline ratings from bazaarVoice

 ```

 ```
 */
.bose-inlineRatings {
  margin: 0 10px;
  height: 20px;
}

@charset "UTF-8";
/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
  Bose Featured Products (Top Rated, etc)
 ============

 Featured Product
 -------


 ```
<div class="bose-featuredProducts">
    <section class="bose-featuredProduct bose-featuredProducts__reference">
        <div class="bose-featuredProducts__referenceContainer grid-4 grid-medium-4 grid-small-12">
            <img class="bose-featuredProduct__image" src="/content/dam/bose/consumer-electronics/products/wms_III_bluetooth.thumbnail.319.319.jpg" alt="" title="">

              <div class="bose-colorSelectorContainer">
                  <div class="bose-colorSelector" data-product-code="wms_III_bluetooth">
                      <ul class="bose-colorSelector__colorList bose-colorSelector__colorList--floatLeft">
                        <li>
                            <a class="bose-colorSelector__colorItem bose-colorItem bose-colorItem--selected" href="javascript:;" title="Grey" data-variant-code="wms_III_bluetooth_grey" data-variant-path="/etc/commerce/products/consumer/Staged/website_ce_us/b2c/wave_systems/wave_music_systems/wms_III_bluetooth/wms_III_bluetooth_grey">
                                <span class="bose-colorItem__colorField" style="background-color: grey">&nbsp;</span>
                            </a>
                        </li>
                        <li>
                            <a class="bose-colorSelector__colorItem bose-colorItem " href="javascript:;" title="Black" data-variant-code="wms_III_bluetooth_black" data-variant-path="/etc/commerce/products/consumer/Staged/website_ce_us/b2c/wave_systems/wave_music_systems/wms_III_bluetooth/wms_III_bluetooth_black">
                                <span class="bose-colorItem__colorField" style="background-color: black">&nbsp;</span>
                            </a>
                        </li>
                        <li>
                            <a class="bose-colorSelector__colorItem bose-colorItem " href="javascript:;" title="White" data-variant-code="wms_III_bluetooth_white" data-variant-path="/etc/commerce/products/consumer/Staged/website_ce_us/b2c/wave_systems/wave_music_systems/wms_III_bluetooth/wms_III_bluetooth_white">
                                <span class="bose-colorItem__colorField" style="background-color: white">&nbsp;</span>
                            </a>
                        </li>
                      </ul>
                      <div class="bose-colorSelector__label bose-colorSelector__label--floatleft"><span class="bose-colorSelector__colorName">Grey</span></div>

                      <input type="hidden" name=":product-variantCode" value="wms_III_bluetooth_grey">
                      <input type="hidden" name=":product-path" value="/etc/commerce/products/consumer/Staged/website_ce_us/b2c/wave_systems/wave_music_systems/wms_III_bluetooth/wms_III_bluetooth_grey">
                  </div>
              </div>

              <div class="bose-featuredProduct__description">
                  <a class="bose-featuredProduct__title" href="/etc/commerce/products/consumer/Staged/website_ce_us/b2c/wave_systems/wave_music_systems/wms_III_bluetooth">Wave Music System III with Bluetooth adapter</a>

                  <div class="bose-price " data-product-code="wms_III_bluetooth" data-price-productcodemapping="{&quot;wms_III_bluetooth_grey&quot;:{&quot;promotionalPrice&quot;:null,&quot;originalPrice&quot;:&quot;$679.95&quot;,&quot;empty&quot;:false,&quot;showPromotionalPrice&quot;:false},&quot;wms_III_bluetooth_black&quot;:{&quot;promotionalPrice&quot;:null,&quot;originalPrice&quot;:&quot;$679.95&quot;,&quot;empty&quot;:false,&quot;showPromotionalPrice&quot;:false},&quot;wms_III_bluetooth_white&quot;:{&quot;promotionalPrice&quot;:null,&quot;originalPrice&quot;:&quot;$679.95&quot;,&quot;empty&quot;:false,&quot;showPromotionalPrice&quot;:false}}">
                      <div class="bose-price__price">$679.95</div>
                      <div class="bose-price__price bose-price__price--old"></div>
                  </div>

                  <div class="bose-cta" data-product-code="wms_III_bluetooth" data-cta-productcodemapping="{&quot;wms_III_bluetooth_grey&quot;:[{&quot;type&quot;:&quot;buy&quot;,&quot;show&quot;:false,&quot;disabled&quot;:false},{&quot;type&quot;:&quot;reserve_and_collect&quot;,&quot;show&quot;:false,&quot;disabled&quot;:false}],&quot;wms_III_bluetooth_black&quot;:[{&quot;type&quot;:&quot;buy&quot;,&quot;show&quot;:false,&quot;disabled&quot;:false},{&quot;type&quot;:&quot;reserve_and_collect&quot;,&quot;show&quot;:false,&quot;disabled&quot;:false}],&quot;wms_III_bluetooth_white&quot;:[{&quot;type&quot;:&quot;buy&quot;,&quot;show&quot;:false,&quot;disabled&quot;:false},{&quot;type&quot;:&quot;reserve_and_collect&quot;,&quot;show&quot;:false,&quot;disabled&quot;:false}]}">

                    <a class="bose-button bose-button--buy bose-button--hide" title="buy" onclick="return Bose.Forms.submitForm(this);"><span class="bose-button__label">buy</span></a>
                    <a class="bose-button bose-button--reserve_and_collect bose-button--hide" title="reserve_and_collect" onclick="return Bose.Forms.submitForm(this);"><span class="bose-button__label">reserve_and_collect</span></a>
                  </div>

                  <div class="bose-productATP" data-product-code="wms_III_bluetooth" data-atp-productcodemapping="{&quot;wms_III_bluetooth_grey&quot;:null,&quot;wms_III_bluetooth_black&quot;:null,&quot;wms_III_bluetooth_white&quot;:null}">

                  </div>
              </div>
        </div>
    </section>
    <section class="bose-featuredProduct bose-featuredProducts__reference">
        <div class="bose-featuredProducts__referenceContainer grid-4 grid-medium-4 grid-small-12">
            <img class="bose-featuredProduct__image" src="/content/dam/bose/consumer-electronics/products/wms_soundtouch.thumbnail.319.319.jpg" alt="" title="">

            <div class="bose-colorSelectorContainer">
              <div class="bose-colorSelector" data-product-code="wms_soundtouch">
                  <ul class="bose-colorSelector__colorList bose-colorSelector__colorList--floatLeft">
                    <li>
                        <a class="bose-colorSelector__colorItem bose-colorItem bose-colorItem--selected" href="javascript:;" title="Black" data-variant-code="wms_soundtouch_black" data-variant-path="/etc/commerce/products/consumer/Staged/website_ce_us/b2c/wifi_systems/wave_soundtouch_music_systems/wms_soundtouch/wms_soundtouch_black">
                            <span class="bose-colorItem__colorField" style="background-color: black">&nbsp;</span>
                        </a>
                    </li>
                    <li>
                        <a class="bose-colorSelector__colorItem bose-colorItem " href="javascript:;" title="White" data-variant-code="wms_soundtouch_white" data-variant-path="/etc/commerce/products/consumer/Staged/website_ce_us/b2c/wifi_systems/wave_soundtouch_music_systems/wms_soundtouch/wms_soundtouch_white">
                            <span class="bose-colorItem__colorField" style="background-color: white">&nbsp;</span>
                        </a>
                    </li>
                  </ul>
                  <div class="bose-colorSelector__label bose-colorSelector__label--floatleft"><span class="bose-colorSelector__colorName">Black</span></div>

                  <input type="hidden" name=":product-variantCode" value="wms_soundtouch_black">
                  <input type="hidden" name=":product-path" value="/etc/commerce/products/consumer/Staged/website_ce_us/b2c/wifi_systems/wave_soundtouch_music_systems/wms_soundtouch/wms_soundtouch_black">
              </div>
            </div>

            <div class="bose-featuredProduct__description">
                <a class="bose-featuredProduct__title" href="/etc/commerce/products/consumer/Staged/website_ce_us/b2c/wifi_systems/wave_soundtouch_music_systems/wms_soundtouch">Wave Soundtouch Music System</a>

                <div class="bose-price " data-product-code="wms_soundtouch" data-price-productcodemapping="{&quot;wms_soundtouch_black&quot;:{&quot;promotionalPrice&quot;:null,&quot;originalPrice&quot;:&quot;$669.95&quot;,&quot;empty&quot;:false,&quot;showPromotionalPrice&quot;:false},&quot;wms_soundtouch_white&quot;:{&quot;promotionalPrice&quot;:null,&quot;originalPrice&quot;:&quot;$679.95&quot;,&quot;empty&quot;:false,&quot;showPromotionalPrice&quot;:false}}">
                    <div class="bose-price__price">$669.95</div>
                    <div class="bose-price__price bose-price__price--old"></div>
                </div>

                <div class="bose-cta" data-product-code="wms_soundtouch" data-cta-productcodemapping="{&quot;wms_soundtouch_black&quot;:[{&quot;type&quot;:&quot;buy&quot;,&quot;show&quot;:true,&quot;disabled&quot;:false},{&quot;type&quot;:&quot;reserve_and_collect&quot;,&quot;show&quot;:false,&quot;disabled&quot;:false}],&quot;wms_soundtouch_white&quot;:[{&quot;type&quot;:&quot;buy&quot;,&quot;show&quot;:false,&quot;disabled&quot;:false},{&quot;type&quot;:&quot;reserve_and_collect&quot;,&quot;show&quot;:false,&quot;disabled&quot;:false}]}">
                  <a class="bose-button bose-button--buy bose-button--show" title="buy" onclick="return Bose.Forms.submitForm(this);"><span class="bose-button__label">buy</span></a>
                  <a class="bose-button bose-button--reserve_and_collect bose-button--hide" title="reserve_and_collect" onclick="return Bose.Forms.submitForm(this);"><span class="bose-button__label">reserve_and_collect</span></a>
                </div>

                <div class="bose-productATP" data-product-code="wms_soundtouch" data-atp-productcodemapping="{&quot;wms_soundtouch_black&quot;:{&quot;message&quot;:&quot;eeeeee&quot;,&quot;numberOfDays&quot;:50,&quot;empty&quot;:false},&quot;wms_soundtouch_white&quot;:null}">
                    eeeeee
                </div>
            </div>
        </div>
    </section>
</div>
 ```
 */
.bose-featuredProducts {
  margin: 0;
}
.bose-featuredProducts .boseFeaturedProducts_ratingsContainer {
  min-height: 40px;
  margin: 0 30px;
}
.bose-featuredProducts a:hover {
  text-decoration: none;
}
.bose-featuredProducts .bose-featuredProducts__link.bose-featuredProducts__link--lightText:hover {
  text-decoration: underline;
}
.bose-featuredProducts__colorSelector {
  margin-bottom: 10px;
}
.bose-featuredProducts__referenceContainer {
  border: 0;
  margin-left: 0;
  margin-top: 0;
  float: left;
  width: 100%;
}
.bose-featuredProducts__image {
  width: 100%;
  margin: 0 30px 5px 30px;
  display: block;
}
.bose-featuredProducts__status {
  position: absolute;
  top: 0;
  left: 0;
}
.bose-featuredProducts__description {
  margin: 5px auto;
  display: block;
  padding-left: 30px;
}
.bose-featuredProducts__description a:link, .bose-featuredProducts__description a:visited {
  color: #000000;
}
.bose-featuredProducts__price {
  text-align: left;
  margin: 5px 0;
}
.bose-featuredProducts__group-fpprice {
  margin-left: 30px;
}
.bose-featuredProducts__titleTile {
  display: inline-block;
  background: #dedede;
}
.bose-featuredProducts__titleTile .bose-adaptiveImage {
  display: none;
}
.bose-featuredProducts__title {
  font-size: 24px;
}
.bose-featuredProducts__title--lightText {
  color: #ffffff;
}
.bose-featuredProducts__title--darkText {
  color: #000000;
}
.bose-featuredProducts__subTitle {
  font-size: 26px;
  margin: 10px 10px 10px 25px;
}
.bose-featuredProducts__subTitle--lightText {
  color: #ffffff;
}
.bose-featuredProducts__subTitle--darkText {
  color: #000000;
}
.bose-featuredProducts__linkText {
  font-size: 14px;
  margin: 10px 10px 10px 25px;
}
.bose-featuredProducts__linkText--lightText {
  color: #ffffff;
}
.bose-featuredProducts__linkText--darkText {
  color: #000000;
}
.bose-featuredProducts__title {
  display: block;
  margin: 25px 10px 10px 25px;
}
.bose-featuredProducts__title--lightText {
  color: #ffffff;
}
.bose-featuredProducts__title--darkText {
  color: #000000;
}
.bose-featuredProducts__ratingsContainer {
  margin: 5px 30px;
}
.bose-featuredProducts__cta {
  margin: 5px 30px;
  padding-bottom: 3px;
  text-align: center;
  width: auto;
  max-width: 55%;
}
.bose-featuredProducts__cta .bose-cta {
  margin: 0;
  padding-bottom: 3px;
  width: auto;
}
.bose-featuredProducts .bose-button, .bose-featuredProducts .bose-button.bose-button--buy, .bose-featuredProducts .bose-button.bose-button--show {
  height: 23px;
}
.bose-featuredProducts .bose-button .bose-button__label, .bose-featuredProducts .bose-button.bose-button--buy .bose-button__label, .bose-featuredProducts .bose-button.bose-button--show .bose-button__label {
  padding: 7px 19px;
}
.bose-featuredProducts__promo {
  min-height: 16px;
  margin: 0px 30px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-featuredProducts {
    margin: 0;
  }
  .bose-featuredProducts .bose-featuredProducts__titleTile {
    background-position: right top;
  }
  .bose-featuredProducts .slick-slider {
    margin-bottom: 30px;
    clear: both;
  }
}

.bose-featuredProducts__colorSelectorContainer--small {
  margin: 0 0 0 30px;
}

.bose-featuredProduct__image {
  margin: 1px 30px 5px 30px;
  width: 80%;
}

.bose-featuredProducts__link--lightText, .bose-featuredProducts__link--lightText:hover, .bose-featuredProducts__link--lightText:visited {
  color: #ffffff;
}

.bose-featuredProducts__link--darkText, .bose-featuredProducts__link--darkText:hover, .bose-featuredProducts__link--darkText:visited {
  color: #000000;
}

.bose-featuredProducts__link:hover {
  text-decoration: underline;
}

.bose-featuredProducts__ratingsContainer {
  min-height: 20px;
  margin: 0 30px;
}

.bose-featuredProducts {
  *zoom: 1;
}
.bose-featuredProducts:after {
  content: "";
  display: table;
  clear: both;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose Ecommerce-Area
 ============

 General Ecommerce-Area
 -------

 This file contains all styling rules for the ecommerce area

 ```

 ```
 */
.bose-ecommerceArea {
  position: relative;
  margin-top: 80px;
  /* because of floating main menu */
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-ecommerceArea {
    margin-top: 10px;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-ecommerceArea {
    margin-top: 10px;
  }
}
.bose-ecommerceArea .bose-ecommerceArea__container {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 30px;
  margin: 0 auto;
  max-width: 1000px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-ecommerceArea .bose-ecommerceArea__container {
    padding: 0;
  }
}
.bose-ecommerceArea.bose-ecommerceArea--fullWidth .bose-ecommerceArea__container {
  max-width: 100%;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-ecommerceArea .bose-ecommerceArea__topArea {
    padding: 0 30px 0 30px;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-ecommerceArea .bose-ecommerceArea__topArea {
    margin-bottom: 30px;
  }
}
@media screen and (min-width: 901px) {
  .bose-ecommerceArea .bose-ecommerceArea__topArea {
    margin-bottom: 30px;
  }
}
.bose-ecommerceArea .bose-ecommerceArea__mediaArea {
  position: relative;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-ecommerceArea .bose-ecommerceArea__mediaArea {
    padding: 0 30px 0 30px;
  }
}
.bose-ecommerceArea .bose-ecommerceArea__ctaArea {
  padding: 0 25px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-ecommerceArea .bose-ecommerceArea__ctaArea {
    padding: 0 30px 0 30px;
  }
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose Customizable Product Image
 ============

 product image
 -------


 ```
     <div data-picture class="bose-customizableProductImage">
        <div class="bose-customizableProductImage__container">
            <img class="bose-customizableProductImage__image" src="${component.highResImageURL}" alt="${catalogHelper.selectedVariant.name}">
        </div>
    </div>
 ```
 */
.bose-customizableProduct {
  margin: 0 auto;
  max-width: 1000px;
  position: relative;
}
.bose-customizableProduct .bose-customizableProduct__image {
  width: 100%;
  height: auto;
}

.bose-customizableProduct__spinner {
  position: absolute;
  text-align: center;
  vertical-align: middle;
  display: block;
  background-image: url(../../../designs/template-manager/clientlibs/img/loader.gif);
  background-repeat: no-repeat;
  background-position: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 11;
}

#bose-customizableProductOverlay {
  display: none;
  max-width: 900px;
}
#bose-customizableProductOverlay .bose-customizableProductOverlay__wrapper {
  min-height: 500px;
}
#bose-customizableProductOverlay .bose-customizableProductOverlay__title {
  font-family: "Bose_Regular", verdana;
  font-size: 23px;
  letter-spacing: 0;
  color: #323232;
  font-weight: bold;
  height: auto;
}
#bose-customizableProductOverlay .bose-customizableProductOverlay__imageContainer {
  padding: 20px 10px 10px 10px;
}
#bose-customizableProductOverlay .bose-customizableProductOverlay__image {
  width: 100%;
  height: auto;
}
#bose-customizableProductOverlay .bose-button--customize {
  display: none;
}
#bose-customizableProductOverlay .bose-customizableProductOverlay__colorWareLogo {
  text-align: center;
  min-height: 50px;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/* Component CSS Root */
.bose-customComponentColorSelector {
  width: 100%;
  background-color: #f5f5f5;
  margin-top: 5%;
  position: relative;
  /* slick js navigation nested block */
  /* each component */
  /* top saved selections UI */
  /*RADIO BUTTON STYLE */
  /* CSS for the Color Selector Component Slicker */
  /* Overwrite these variables so the fonts/images are fetched from the slick library */
  /* Overwrite these functions so the fonts/images are fetched from the slick library */
  /* Include the complete slick CSS library, this is outputting the Slick CSS with some customizations defined above */
  /* Slider */
  /* Arrows */
  /* Dots */
}
.bose-customComponentColorSelector .bose-customColorSelectorSlider {
  width: 100%;
}
.bose-customComponentColorSelector .bose-customColorSelectorSliderNav {
  height: 30px;
  background-color: #f5f5f5;
  position: relative;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-customComponentColorSelector .bose-customComponent {
    width: 100%;
  }
}
.bose-customComponentColorSelector .bose-customComponent .bose-customComponent__name {
  margin: 0 0 0 0;
  font-weight: bold;
  width: 100%;
  text-align: center;
  vertical-align: middle;
  height: 25px;
  position: relative;
  display: inline-block;
  background-color: #f5f5f5;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-customComponentColorSelector .bose-customComponent .bose-customComponent__name {
    z-index: 12;
    position: relative;
    top: -1px;
    left: 0;
    height: 26px;
  }
}
.bose-customComponentColorSelector .bose-customComponent .bose-customComponent__colors {
  text-align: center;
  width: 100%;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-customComponentColorSelector .bose-customComponent .bose-customComponent__colors {
    margin-top: 0;
    z-index: 0;
    position: relative;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 150px;
  }
}
.bose-customComponentColorSelector .bose-customComponentSelections {
  font-size: 85%;
  margin: auto;
  width: 100%;
  display: inline-block;
  background-color: #f5f5f5;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-customComponentColorSelector .bose-customComponentSelections {
    position: relative;
    left: 0;
    top: -2px;
    z-index: 11;
  }
}
.bose-customComponentColorSelector .bose-customComponentSelections .bose-customComponentSelections__colorButton {
  position: relative;
  vertical-align: top;
  width: 17px;
  height: 17px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border: 0;
  display: inline-block;
  margin-top: 0;
}
.bose-customComponentColorSelector .bose-customComponentSelections .bose-customComponentSelections__colorLabel {
  width: auto;
  text-align: left;
  vertical-align: middle;
  height: 20px;
  position: relative;
  margin-left: 1px;
  display: inline-block;
  margin-top: 3px;
}
.bose-customComponentColorSelector .bose-customComponentSelections .bose-customComponentSelections__finishLabel {
  font-size: 85%;
  width: 100%;
  text-align: center;
  vertical-align: middle;
  position: relative;
  margin-left: 5px;
  margin-bottom: 10px;
  display: inline-block;
  margin-top: 5px;
}
.bose-customComponentColorSelector .bose-customComponentSelections .bose-customComponentSelections__colorGroup {
  display: block;
  margin: 5px 0 0 0;
  font-weight: bold;
  font-size: 85%;
  position: relative;
}
.bose-customComponentColorSelector .bose-customComponentSelections .bose-customComponentSelections__wrapper {
  display: inline-block;
  position: relative;
}
.bose-customComponentColorSelector .bose-customComponentColorGroup {
  display: table;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding-left: 10px;
  padding-right: 10px;
  background-color: white;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-customComponentColorSelector .bose-customComponentColorGroup {
    padding: 0;
  }
}
.bose-customComponentColorSelector .bose-customComponentColorGroup .bose-customComponentColorGroup__label {
  text-align: left;
  font-weight: bold;
  font-size: 85%;
  margin: 10px 0 10px 3px;
}
.bose-customComponentColorSelector .bose-customComponentColorGroup .bose-customComponentColorGroup__colorButton {
  float: left;
  display: inline;
  margin: 2px;
  position: relative;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  padding: 0;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border: 0;
  border: 1px solid #ceceea;
  cursor: pointer;
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-customComponentColorSelector .bose-customComponentColorGroup .bose-customComponentColorGroup__colorButton {
    width: 35px;
    height: 35px;
  }
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-customComponentColorSelector .bose-customComponentColorGroup .bose-customComponentColorGroup__colorButton {
    width: 29px;
    height: 29px;
  }
}
.bose-customComponentColorSelector .bose-customComponentColorGroup .bose-customComponentColorGroup__colorButton:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.bose-customComponentColorSelector .-finishGL {
  background-image: url("../../../designs/bose/base/clientlibs/images/colorchip-gloss.png") !important;
  background-size: contain;
}
.bose-customComponentColorSelector .showSelection {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid #666666;
  cursor: pointer;
  border-radius: 12px;
  background-color: #d6d6d6;
  visibility: visible;
  color: #666666;
  font-size: 9px;
  margin: 10px auto;
  font-weight: bolder;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-customComponentColorSelector .showSelection {
    margin: 6px auto;
  }
}
.bose-customComponentColorSelector .showSelection:after {
  top: 10%;
  content: '\2713';
}
.bose-customComponentColorSelector input[type=checkbox]:not(old),
.bose-customComponentColorSelector input[type=radio]:not(old) {
  width: 20px;
  margin: 0;
  padding: 0;
  font-size: 1em;
  opacity: 0;
  position: absolute;
  top: 5px;
  height: 20px;
  z-index: 200;
}
.bose-customComponentColorSelector input[type=checkbox]:not(old) + label,
.bose-customComponentColorSelector input[type=radio]:not(old) + label {
  display: inline-block;
  margin-left: 0;
  line-height: 20px;
}
.bose-customComponentColorSelector input[type=checkbox]:not(old) + label > span,
.bose-customComponentColorSelector input[type=radio]:not(old) + label > span {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 5px;
  border: 1px solid #cccccc;
  border-radius: 10px;
  background: #f5f5f5;
  background-image: -moz-linear-gradient(#f5f5f5, #f5f5f5);
  background-image: -ms-linear-gradient(#f5f5f5, #f5f5f5);
  background-image: -o-linear-gradient(#f5f5f5, #f5f5f5);
  background-image: -webkit-linear-gradient(#f5f5f5, #f5f5f5);
  background-image: linear-gradient(#f5f5f5, #f5f5f5);
  vertical-align: bottom;
}
.bose-customComponentColorSelector input[type=checkbox]:not(old):checked + label > span,
.bose-customComponentColorSelector input[type=radio]:not(old):checked + label > span {
  background-image: -moz-linear-gradient(#00cece, #00cece);
  background-image: -ms-linear-gradient(#00cece, #00cece);
  background-image: -o-linear-gradient(#00cece, #00cece);
  background-image: -webkit-linear-gradient(#00cece, #00cece);
  background-image: linear-gradient(#00cece, #00cece);
}
.bose-customComponentColorSelector input[type=checkbox]:not(old):checked + label > span:before {
  content: '\2713';
  display: block;
  width: 1em;
  color: #99cc66;
  font-size: 0.875em;
  line-height: 1em;
  text-align: center;
  text-shadow: 0 0 0.0714em #73994d;
  font-weight: bold;
}
.bose-customComponentColorSelector input[type=radio]:not(old):checked + label > span > span {
  display: block;
  width: 15px;
  height: 15px;
  margin: -1px;
  border: 3px solid #cccccc;
  border-radius: 10px;
  background: #00cece;
  background-image: -moz-linear-gradient(#00cece, #00cece);
  background-image: -ms-linear-gradient(#00cece, #00cece);
  background-image: -o-linear-gradient(#00cece, #00cece);
  background-image: -webkit-linear-gradient(#00cece, #00cece);
  background-image: linear-gradient(#00cece, #00cece);
}
.bose-customComponentColorSelector .slick-slider {
  position: relative;
  display: block;
  background-color: #fff;
  margin-bottom: 1px;
}
.bose-customComponentColorSelector .slick-list:focus {
  outline: none;
}
.bose-customComponentColorSelector .slick-loading .slick-list {
  background: #fff center center no-repeat;
}
.bose-customComponentColorSelector .slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}
.bose-customComponentColorSelector .slick-slide {
  min-height: 1px;
  text-align: center;
  display: none;
}
.bose-customComponentColorSelector [dir="rtl"] .slick-slide {
  float: right;
}
.bose-customComponentColorSelector .slick-slide img {
  display: block;
}
.bose-customComponentColorSelector .slick-slide.slick-loading img {
  display: none;
}
.bose-customComponentColorSelector .slick-slide.dragging img {
  pointer-events: none;
}
.bose-customComponentColorSelector .slick-initialized .slick-slide {
  display: block;
}
.bose-customComponentColorSelector .slick-loading .slick-slide {
  visibility: hidden;
}
.bose-customComponentColorSelector .slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}
.bose-customComponentColorSelector .slick-prev,
.bose-customComponentColorSelector .slick-next {
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  line-height: 0;
  font-size: 0;
  cursor: pointer;
  background: transparent;
  color: blue;
  top: 60px;
  padding: 0;
  border: none;
  outline: none;
  z-index: 9999;
}
.bose-customComponentColorSelector .slick-prev:hover, .bose-customComponentColorSelector .slick-prev:focus,
.bose-customComponentColorSelector .slick-next:hover,
.bose-customComponentColorSelector .slick-next:focus {
  outline: none;
  background: transparent;
  color: blue;
}
.bose-customComponentColorSelector .slick-prev:hover:before, .bose-customComponentColorSelector .slick-prev:focus:before,
.bose-customComponentColorSelector .slick-next:hover:before,
.bose-customComponentColorSelector .slick-next:focus:before {
  opacity: 1;
}
.bose-customComponentColorSelector .slick-prev.slick-disabled:before,
.bose-customComponentColorSelector .slick-next.slick-disabled:before {
  opacity: 0.25;
}
.bose-customComponentColorSelector .slick-prev:before, .bose-customComponentColorSelector .slick-next:before {
  font-family: "slick";
  font-size: 20px;
  line-height: 1;
  color: #00cece;
  opacity: 0.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.bose-customComponentColorSelector .slick-prev {
  left: 10px;
}
.bose-customComponentColorSelector [dir="rtl"] .slick-prev {
  left: auto;
  right: -25px;
}
.bose-customComponentColorSelector .slick-prev:before {
  content: "\2190";
}
.bose-customComponentColorSelector [dir="rtl"] .slick-prev:before {
  content: "\2190";
}
.bose-customComponentColorSelector .slick-next {
  right: 10px;
}
.bose-customComponentColorSelector [dir="rtl"] .slick-next {
  left: -25px;
  right: auto;
}
.bose-customComponentColorSelector .slick-next:before {
  content: "\2192";
}
.bose-customComponentColorSelector [dir="rtl"] .slick-next:before {
  content: "\2192";
}
.bose-customComponentColorSelector .slick-dots {
  position: absolute;
  top: 0%;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  width: 100%;
}
.bose-customComponentColorSelector .slick-dots li {
  position: relative;
  display: inline-block;
  height: 20px;
  width: 20px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.bose-customComponentColorSelector .slick-dots li button {
  border: 0;
  background: transparent;
  display: block;
  height: 20px;
  width: 20px;
  outline: none;
  line-height: 0;
  font-size: 0;
  color: transparent;
  padding: 5px;
  cursor: pointer;
}
.bose-customComponentColorSelector .slick-dots li button:hover, .bose-customComponentColorSelector .slick-dots li button:focus {
  outline: none;
}
.bose-customComponentColorSelector .slick-dots li button:hover:before, .bose-customComponentColorSelector .slick-dots li button:focus:before {
  opacity: 1;
  color: #01cfcf;
}
.bose-customComponentColorSelector .slick-dots li button:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "\2022";
  width: 15px;
  height: 15px;
  font-family: "slick";
  font-size: 10px;
  line-height: 20px;
  text-align: center;
  color: black;
  opacity: 0.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.bose-customComponentColorSelector .slick-dots li.slick-active button:before {
  color: #01cfcf;
  opacity: 0.75;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose ColorItem
 ============

 Standard Color item
 -------
 ```
 <a class="bose-colorItem" href="javascript:;" title="Titanium Silver"><span class="bose-colorItem__colorField" style="background-color:#999890">&nbsp;</span></a>
 ```
 */
.bose-colorItem {
  width: 31px;
  height: 31px;
  display: block;
  text-decoration: none;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  border: 3px solid transparent;
}
.bose-colorItem.bose-colorItem--circle {
  margin: 2px;
  width: 20px;
  height: 20px;
}
.bose-colorItem__colorField {
  width: 100%;
  height: 100%;
  display: block;
  border: 1px solid #e8e8e8;
  box-sizing: border-box;
}
.bose-colorItem--circle .bose-colorItem__colorField {
  width: 18px;
  height: 18px;
}
.bose-colorItem--small {
  width: 100%;
  height: 100%;
}
.bose-colorItem--circle .bose-colorItem--small {
  width: 15px;
  height: 15px;
}
.bose-colorItem--circle .bose-colorItem--small .bose-colorItem__colorField {
  width: 13px;
  height: 13px;
}

.bose-colorItem:hover, .bose-colorItem--selected {
  text-decoration: none;
  border: 3px solid #cdcccc;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.bose-colorItem--circle .bose-colorItem:hover, .bose-colorItem--circle .bose-colorItem--selected {
  -webkit-box-shadow: 0px 2px 0px #f5f5f5, 0px 4px 0px #008ce1;
  box-shadow: 0px 2px 0px #f5f5f5, 0px 4px 0px #008ce1;
  border: 2px solid #008ce1;
  margin: 0px;
}

/*
 Color item Circle
 -------
 ```
 <a class="bose-colorItem bose-colorItem--circle" href="javascript:;" title="Titanium Silver"><span class="bose-colorItem__colorField" style="background-color:#999890">&nbsp;</span></a>
 ```
 */
.bose-colorItem.bose-colorItem--circle {
  border-radius: 15px;
  border: 2px solid #e8e8e8;
  -webkit-box-shadow: 0 0 0 1px #e8e8e8;
  box-shadow: 0 0 0 1px #e8e8e8;
  margin: 2px;
}

.bose-colorItem.bose-colorItem--circle.bose-colorItem--selected,
.bose-colorItem.bose-colorItem--circle:hover {
  border: 2px solid #0076da;
  -webkit-box-shadow: 0 0 0 1px #e8e8e8;
  box-shadow: 0 0 0 1px #e8e8e8;
  margin: 2px;
}

.bose-colorItem.bose-colorItem--circle .bose-colorItem__colorField {
  border: 2px solid #e8e8e8;
  border-radius: 15px;
  left: -1px;
  position: relative;
  top: -1px;
}

/*
 Bose ColorSelector component
 ============
 Used to hold make a color selector

 Color Selector
 -------
 ```
    <div class="bose-colorSelector">
        <div class="bose-colorSelector__label">Colour: <span class="bose-colorSelector__colorName">Black with silver accents</span></div>
        <ul class="bose-colorSelector__colorList">
            <li><a class="bose-colorItem" href="javascript:;" title="Titanium Silver"><span class="bose-colorItem__colorField" style="background-color:#999890">&nbsp;</span></a></li>
            <li><a class="bose-colorItem" href="javascript:;" title="Graphite Grey"><span class="bose-colorItem__colorField" style="background-color:#535250">&nbsp;</span></a></li>
            <li><a class="bose-colorItem" href="javascript:;" title="Platinum White"><span class="bose-colorItem__colorField" style="background-color:#f9f8f7">&nbsp;</span></a></li>
            <li><a class="bose-colorItem bose-colorItem--selected" href="javascript:;" title="Burgundy"><span class="bose-colorItem__colorField" style="background-color:#893a3e">&nbsp;</span></a></li>
            <li class="current-color"></li>
        </ul>
    </div>
 ```

 Color Selector SMALL
 -------
 ```
    <div class="bose-colorSelector -small">
        <div class="bose-colorSelector__label">Colour: <span class="bose-colorSelector__colorName">Black with silver accents</span></div>
        <ul class="bose-colorSelector__colorList">
            <li><a class="bose-colorItem" href="javascript:;" title="Titanium Silver"><span class="bose-colorItem__colorField" style="background-color:#999890">&nbsp;</span></a></li>
            <li><a class="bose-colorItem" href="javascript:;" title="Graphite Grey"><span class="bose-colorItem__colorField" style="background-color:#535250">&nbsp;</span></a></li>
            <li><a class="bose-colorItem" href="javascript:;" title="Platinum White"><span class="bose-colorItem__colorField" style="background-color:#f9f8f7">&nbsp;</span></a></li>
            <li><a class="bose-colorItem bose-colorItem--selected" href="javascript:;" title="Burgundy"><span class="bose-colorItem__colorField" style="background-color:#893a3e">&nbsp;</span></a></li>
            <li class="current-color"></li>
        </ul>
    </div>
 ```
 */
.bose-colorSelectorContainer {
  margin: 20px 30px;
  *zoom: 1;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-colorSelectorContainer {
    margin: 20px 20px;
  }
}
.bose-colorSelectorContainer--fullWidth {
  margin: 20px 0;
}
.bose-colorSelectorContainer:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-colorSelectorContainer {
    text-align: center;
  }
}
.bose-colorSelectorContainer.-small {
  margin: 0 0 0 30px;
}
.bose-colorSelectorContainer.-small .bose-colorSelector__colorItem {
  width: 20px;
  height: 20px;
}
.bose-colorSelectorContainer.-small .bose-colorSelector__label {
  clear: none;
}
.bose-colorSelectorContainer.-small .bose-colorSelector__colorName {
  font-size: 12px;
  line-height: 20px;
}
.bose-colorSelectorContainer .bose-colorSelector {
  *zoom: 1;
}
.bose-colorSelectorContainer .bose-colorSelector:after {
  content: "";
  display: table;
  clear: both;
}
.bose-colorSelectorContainer .bose-colorSelector.bose-colorSelector--noMarg {
  margin: 0;
}
.bose-colorSelectorContainer .bose-colorSelector .bose-colorSelector__label {
  padding-bottom: 4px;
  text-align: left;
  clear: left;
  font-size: 14px;
}
.bose-colorSelectorContainer .bose-colorSelector .bose-colorSelector__label.bose-colorSelector__label--floatleft {
  clear: none;
}
.bose-colorSelectorContainer .bose-colorSelector .bose-colorSelector__label.bose-colorSelector__label--center {
  text-align: center;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-colorSelectorContainer .bose-colorSelector .bose-colorSelector__label {
    float: left;
    font-size: 14px;
  }
}
.bose-colorSelectorContainer .bose-colorSelector .bose-colorSelector__colorList {
  *zoom: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;
}
.bose-colorSelectorContainer .bose-colorSelector .bose-colorSelector__colorList:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-colorSelectorContainer .bose-colorSelector .bose-colorSelector__colorList {
    float: left;
    display: inline-block;
  }
}
.bose-colorSelectorContainer .bose-colorSelector .bose-colorSelector__colorList li {
  float: left;
  margin: 0 8px 8px 0;
}
.bose-colorSelectorContainer .bose-colorSelector .bose-colorSelector__colorList li:first-child {
  margin-left: 0;
}
.bose-colorSelectorContainer .bose-colorSelector .bose-colorSelector__colorItem {
  text-decoration: none;
}
.bose-colorSelectorContainer .bose-colorSelector.-small .bose-colorSelector__colorItem {
  width: 20px;
  height: 20px;
}
.bose-colorSelectorContainer .bose-colorSelector.-small .bose-colorSelector__colorName {
  font-size: 12px;
  line-height: 20px;
}
.bose-colorSelectorContainer .bose-variantDDSelector .bose-variantDDSelector__selectMessage {
  color: #aaaaaa;
  font-size: 12px;
  padding: 0 10px;
  margin: 0;
}
.bose-colorSelectorContainer .bose-variantDDSelector .ui-selectmenu-text {
  padding: 0 25px 4px 9px;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose Checkout Select Payment Options
 ============

 select payment block
 -------

 ```
<div class="bose-paymentOptionsForm">
</div>

 ```
 */
.bose-paymentOptionsForm {
  *zoom: 1;
}
.bose-paymentOptionsForm:after {
  content: "";
  display: table;
  clear: both;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose Checkout Review Item
 ============

 checkout review block
 -------

 ```
<div class="bose-reviewItem">
    <strong class="bose-reviewItem__title">Shipping address (<a class="bose-link">edit</a>)</strong>
    <p class="bose-reviewItem__content">
        John Doe
        Mulholland Drive 324
        90001 Los Angeles, California
        1-555-245182
    </p>
</div>

 ```
 */
.bose-reviewItem {
  margin: 20px 30px;
  margin-bottom: 15px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-reviewItem {
    margin: 20px 20px;
  }
}
.bose-reviewItem--fullWidth {
  margin: 20px 0;
}
.bose-reviewItem .bose-reviewItem__title {
  font-weight: bold;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose Checkout Page
 ============

 checkout delivery method selector
 -------

 ```
  <div class="form_row grid-12 bose-deliveryMethodSelector">
    <div class="grid-4 bose-deliveryMethodSelector__item bose-deliveryMethodSelectorItem" data-hybris-id="standard">
        <span class="bose-deliveryMethodSelectorItem__title">Standard Delivery</span>
        <br>
        <span class="bose-deliveryMethodSelectorItem__description">(5-6 days)</span>
        <br>
        <span class="bose-deliveryMethodSelectorItem__price">FREE</span>
    </div>
    <div class="grid-4 bose-deliveryMethodSelector__item bose-deliveryMethodSelectorItem" data-hybris-id="express">
        <span class="bose-deliveryMethodSelectorItem__title">Express Delivery</span>
        <br>
        <span class="bose-deliveryMethodSelectorItem__description">(2-3 days)</span>
        <br>
        <span class="bose-deliveryMethodSelectorItem__price">+ $20.00</span>
    </div>
    <div class="grid-4 bose-deliveryMethodSelector__item bose-deliveryMethodSelectorItem" data-hybris-id="pickup">
        <span class="bose-deliveryMethodSelectorItem__title">Pick up in store</span>
    </div>
  </div>
 ```
 */
.bose-deliveryMethodSelector {
  display: table;
  border-spacing: 10px 0;
  margin-bottom: 12px;
}
.bose-deliveryMethodSelector .bose-deliveryMethodSelector__item {
  border-radius: 5px;
  border: solid 1px #dddddd;
  text-align: center;
  padding: 7px;
  width: 10%;
  min-height: 70px;
  float: none;
  display: table-cell;
  text-decoration: none;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-deliveryMethodSelector .bose-deliveryMethodSelector__item {
    float: left;
    width: 100%;
    box-sizing: border-box;
    margin: 5px 0;
  }
}
.bose-deliveryMethodSelector .bose-deliveryMethodSelector__item:hover, .bose-deliveryMethodSelector .bose-deliveryMethodSelector__item.bose-deliveryMethodSelectorItem--active {
  cursor: pointer;
}

.bose-deliveryMethodSelectorItem .bose-deliveryMethodSelectorItem__title {
  font-weight: bold;
}
.bose-deliveryMethodSelectorItem .bose-deliveryMethodSelectorItem__price {
  font-weight: bold;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose categoryTile
 ============

 bose-categoryTile
 -------
 ```
<a href="http://www.google.com" class="bose-categoryTile">
    <img class="bose-categoryTile__img" src="http://lorempixel.com/300/300/technics/" width="100%" height="100%">
    <span class="bose-categoryTile__title">Wireless</span>
</a>
 ```
 */
.bose-categoryTile {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
  background: #eeeeee;
  float: none;
  display: block;
  font-size: 14px;
  font-family: "Bose_Medium", verdana;
  color: #666666;
}
.bose-categoryTile:hover {
  text-decoration: none;
}
.bose-categoryTile:hover .bose-categoryTile__title {
  font-family: "Bose_Medium", verdana;
  border-bottom: 6px solid #00cece;
}
.bose-categoryTile .bose-categoryTile__img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
}
.bose-categoryTile .bose-categoryTile__title {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  bottom: 0;
  padding-bottom: 15px;
  padding-left: 25px;
  padding-right: 25px;
  text-align: left;
  text-transform: uppercase;
  border-bottom: 6px solid transparent;
  font-family: "Bose_Medium", verdana;
  font-size: 18px;
  color: #666666;
}

/*
 Bose categoryTile
 ============
 Used on categorypages and includes bose-categoryTile blocks

 bose-categoryTiles
 -------
 ```
<div class="bose-categoryTiles">
  <div class="bose-categoryTiles__container">
  <a href="http://www.google.com" class="bose-categoryTile bose-categoryTiles__tile bose-categoryTiles__tile--large0 bose-categoryTiles__tile--med0">
        <img class="bose-categoryTile__img" src="http://lorempixel.com/300/300/technics/" width="100%" height="100%">
        <span class="bose-categoryTile__title">Wireless</span>
    </a>
    <a href="http://www.google.com" class="bose-categoryTile bose-categoryTiles__tile bose-categoryTiles__tile--large1 bose-categoryTiles__tile--med1">
        <img class="bose-categoryTile__img" src="http://lorempixel.com/300/300/sports/" width="100%" height="100%">
        <span class="bose-categoryTile__title">Home Theatre</span>
    </a>
    <a href="http://www.google.com" class="bose-categoryTile bose-categoryTiles__tile bose-categoryTiles__tile--large2 bose-categoryTiles__tile--med0">
        <img class="bose-categoryTile__img" src="http://lorempixel.com/300/300/food/" width="100%" height="100%">
        <span class="bose-categoryTile__title">Stereo</span>
    </a>
    <a href="http://www.google.com" class="bose-categoryTile bose-categoryTiles__tile bose-categoryTiles__tile--large0 bose-categoryTiles__tile--med1">
        <img class="bose-categoryTile__img" src="http://lorempixel.com/300/300/city/" width="100%" height="100%">
        <span class="bose-categoryTile__title">CD/Radio</span>
    </a>
    <a href="http://www.google.com" class="bose-categoryTile bose-categoryTiles__tile bose-categoryTiles__tile--large1 bose-categoryTiles__tile--med0">
        <img class="bose-categoryTile__img" src="http://lorempixel.com/300/300/nightlife/" width="100%" height="100%">
        <span class="bose-categoryTile__title">Dockings</span>
    </a>
    <a href="http://www.google.com" class="bose-categoryTile bose-categoryTiles__tile bose-categoryTiles__tile--large2 bose-categoryTiles__tile--med1">
        <img class="bose-categoryTile__img" src="http://lorempixel.com/300/300/cats/" width="100%" height="100%">
        <span class="bose-categoryTile__title">Portable PA</span>
    </a>
</div>
</div>
 ```
 */
.bose-categoryTiles {
  *zoom: 1;
}
.bose-categoryTiles:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-categoryTiles {
    margin: 0 20px;
  }
}
.bose-categoryTiles .bose-categoryTiles__container {
  margin: 0 auto;
  max-width: 1000px;
}
.bose-categoryTiles.bose-categoryTiles--fullWidth .bose-categoryTiles__container {
  max-width: 100%;
}
.bose-categoryTiles .bose-categoryTiles__tile {
  width: 100%;
  padding-bottom: 96%;
  float: none;
  margin-left: 0%;
  margin-right: 0%;
  margin-bottom: 5%;
  background-color: #eeeeee;
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-categoryTiles .bose-categoryTiles__tile {
    width: 49%;
    padding-bottom: 49%;
    float: left;
  }
  .bose-categoryTiles .bose-categoryTiles__tile.bose-categoryTiles__tile--med0 {
    margin-right: 1%;
    margin-left: 0;
    clear: both;
  }
  .bose-categoryTiles .bose-categoryTiles__tile.bose-categoryTiles__tile--med1 {
    margin-left: 1%;
    margin-right: 0;
    float: right;
  }
}
@media screen and (min-width: 901px) {
  .bose-categoryTiles .bose-categoryTiles__tile {
    width: 32.33%;
    padding-bottom: 32.33%;
    margin-bottom: 1.5%;
    float: left;
  }
  .bose-categoryTiles .bose-categoryTiles__tile.bose-categoryTiles__tile--large0 {
    margin-right: 1%;
    margin-left: 0;
    clear: both;
  }
  .bose-categoryTiles .bose-categoryTiles__tile.bose-categoryTiles__tile--large1 {
    margin-right: 0.5%;
    margin-left: 0.5%;
  }
  .bose-categoryTiles .bose-categoryTiles__tile.bose-categoryTiles__tile--large2 {
    margin-left: 1%;
    margin-right: 0;
    float: right;
  }
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
.bose-videoGallery .slick-slider {
  margin-bottom: 55px;
  margin-top: 3px;
}
.bose-videoGallery .slick-slide .bose-videoGalleryNavItem__thumbnail {
  margin: 0 2px;
}
.bose-videoGallery button.slick-prev {
  left: 1px;
}
.bose-videoGallery button.slick-next {
  right: 1px;
}
.bose-videoGallery .slick-dots {
  bottom: -35px;
}

.bose-videoGalleryItemTitle {
  margin: 3px;
  font-size: 14px;
  width: 140px;
}

.bose-tooltip {
  padding: 0;
}
.bose-tooltip .qtip-content {
  padding: 0;
}

.bose-tooltipContent {
  display: none;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose Title
 ============
 h1
 -------

 ```
<h1 class="bose-title">h1 title</h1>
 ```

 h2
 -------

 ```
<h2 class="bose-title">h2 title</h2>
 ```

 h3
 -------

 ```
<h3 class="bose-title">h3 title</h3>
 ```

 h4
 -------

 ```
<h4 class="bose-title">h4 title</h4>
 ```

 bose-title--product
 -------

 ```
<h2 class="bose-title bose-title--product">bose-title--product</h2>
 ```

 bose-title--weightMedium
 -------

 ```
<h2 class="bose-title bose-title--weightMedium">bose-title--weightMedium</h2>
 ```

 bose-title--weightLight
 -------

 ```
<h2 class="bose-title bose-title--weightLight">bose-title--weightLight</h2>
 ```

 bose-title--inlineBlock
 -------

 ```
<h2 class="bose-title bose-title--inlineBlock">bose-title--inlineBlock</h2>
 ```
 */
.bose-title {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 20px 30px;
  *zoom: 1;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-title {
    margin: 20px 20px;
  }
}
.bose-title--fullWidth {
  margin: 20px 0;
}
.bose-title.-left {
  text-align: left;
}
.bose-title.-center {
  text-align: center;
}
.bose-title.-right {
  text-align: right;
}
.bose-title:after {
  content: "";
  display: table;
  clear: both;
}
.bose-title.bose-title--mainTitle {
  margin-top: 20px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-title.bose-title--mainTitle {
    margin-top: 10px;
    padding: 10px 0;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-title.bose-title--mainTitle {
    margin-top: 10px;
    padding: 10px 0;
  }
}
.bose-title.bose-title--shoppingBag {
  width: auto;
}
.bose-title.bose-title--tabs {
  margin-left: 0;
}
.bose-title .bose-title__icon {
  float: left;
  margin: 0 8px;
}
h1.bose-title .bose-title__icon {
  font-size: 16px;
}
h1.bose-title .bose-title__icon.bose-title__icon--chat {
  font-size: 19px;
}
h1.bose-title .bose-title__icon.bose-title__icon--envelope {
  font-size: 20px;
}

h2.bose-title .bose-title__icon {
  font-size: 14px;
}
h2.bose-title .bose-title__icon.bose-title__icon--chat {
  font-size: 16px;
}
h2.bose-title .bose-title__icon.bose-title__icon--envelope {
  font-size: 16px;
}

h3.bose-title .bose-title__icon {
  font-size: 9px;
}
h3.bose-title .bose-title__icon.bose-title__icon--chat {
  font-size: 11px;
}
h3.bose-title .bose-title__icon.bose-title__icon--envelope {
  font-size: 10px;
}

h4.bose-title .bose-title__icon {
  font-size: 9px;
}
h4.bose-title .bose-title__icon.bose-title__icon--chat {
  font-size: 11px;
}
h4.bose-title .bose-title__icon.bose-title__icon--envelope {
  font-size: 10px;
}

@charset "UTF-8";
/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 TODO
 ============

 TODO
 -------


 ```
<div>TODO</div>
 ```
 */
div.textimage {
  margin: 20px 30px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  div.textimage {
    margin: 20px 20px;
  }
}
div.textimage--fullWidth {
  margin: 20px 0;
}
div.textimage img {
  max-width: 100%;
  max-height: 100%;
}
div.textimage .textimage-text b {
  font-weight: bold;
}
div.textimage .textimage-top {
  margin-bottom: 30px;
}
div.textimage .textimage-left {
  float: left;
  margin-right: 30px;
  max-width: 100%;
}
div.textimage .textimage-right {
  float: right;
  margin-left: 30px;
  max-width: 100%;
}
div.textimage ul {
  list-style: disc inside;
  margin: 10px;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose textIcon
 ============
 textIcon chat
 -------

 ```
    <div class="bose-textIcon">
        <i class="bose-icon bose-icon--chat bose-textIcon__icon--chat  bose-textIcon__icon -grey no-hover"></i>
        <div class="bose-textIcon__text">text</div>
    </div>
 ```

 textIcon envelope
 -------

 ```
    <div class="bose-textIcon">
        <i class="bose-icon bose-icon--envelope bose-textIcon__icon--envelope  bose-textIcon__icon -grey no-hover"></i>
        <div class="bose-textIcon__text">text</div>
    </div>
 ```
 */
.bose-textIcon {
  position: relative;
  line-height: 20px;
  min-height: 24px;
  font-family: "Bose_Regular",verdana;
  display: inline-block;
}
.bose-textIcon .bose-textIcon__text {
  font-weight: bold;
  font-size: 17px;
  padding-left: 10px;
  vertical-align: super;
  display: inline-block;
}
.bose-textIcon .bose-textIcon__icon {
  position: relative;
  vertical-align: top;
  font-size: 11px;
}
.bose-textIcon .bose-textIcon__icon .bose-textIcon__icon--chat {
  font-size: 15px;
}
.bose-textIcon .bose-textIcon__icon .bose-textIcon__icon--envelope {
  font-size: 15px;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/**
 * Basic WYSIWIG Styles for components with rich text editors
 * TODO: change filename according naming convention!
 */
.bose-richText {
  margin: 20px 30px;
  font-size: 16px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-richText {
    margin: 20px 20px;
  }
}
.bose-richText--fullWidth {
  margin: 20px 0;
}
.bose-richText--noMargin {
  margin: 0px;
}
.bose-richText b {
  font-family: "Bose_Bold";
}
.bose-richText b i {
  font-family: "Bose_Bold_Italic";
}
.bose-richText i {
  font-family: "Bose_Italic";
}
.bose-richText i b {
  font-family: "Bose_Bold_Italic";
}
.bose-richText ul {
  margin-left: 15px;
  list-style-type: disc;
}
.bose-richText p {
  line-height: 1.2em;
  padding-bottom: 1.2em;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
.bose-tabBar .bose-tabBar__container {
  margin: 0 auto;
  max-width: 1000px;
}
.bose-tabBar.bose-tabBar--fullWidth .bose-tabBar__container {
  max-width: 100%;
}
.bose-tabBar .bose-tabBar__stickyMsg {
  *zoom: 1;
  display: none;
  /*will be visible by Javascript*/
  padding-top: 5px;
}
.bose-tabBar .bose-tabBar__stickyMsg:after {
  content: "";
  display: table;
  clear: both;
}
.bose-tabBar .bose-tabBar__tabs {
  line-height: 38px;
}

.bose-tabContent .bose-tabContent__container {
  margin: 0 auto;
}
.bose-tabContent .bose-tabContent__title {
  margin: 20px 30px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-tabContent .bose-tabContent__title {
    margin: 20px 20px;
  }
}
.bose-tabContent .bose-tabContent__title--fullWidth {
  margin: 20px 0;
}
.bose-tabContent .bose-tabContent__title.ui-accordion-header {
  margin: 0;
  padding: 10px 20px;
}
.bose-tabContent .bose-tabContent__title:focus {
  outline: 0;
}
.bose-tabContent .bose-tabContent__titleIcon {
  /*Jquery UI overrules*/
  position: relative !important;
  left: auto !important;
  top: auto !important;
  margin-top: 0px !important;
  text-indent: 0 !important;
  /**/
  float: right;
  font-family: FontAwesome;
}
.bose-tabContent .bose-tabContent__titleIcon:after {
  content: "\f078";
}
.bose-tabContent .bose-tabContent__titleIcon.bose-tabContent__titleIcon--active:after {
  content: "\f077";
}
.bose-tabContent .bose-tabContent__content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0px;
}
.bose-tabContent .bose-tabContent__content.bose-tabContent__content--fullWidth {
  max-width: 100%;
}

.bose-productAwareTabInsert .bose-productAwareTabInsert__productTitle {
  display: inline-block;
}
.bose-productAwareTabInsert .bose-productAwareTabInsert__btn {
  display: inline-block;
  width: auto;
}

.bose-tabBarTabs .bose-tabBarTabs__container {
  margin: 0 auto;
  max-width: 1000px;
  text-align: left;
}
.bose-tabBarTabs.bose-tabBarTabs--fullWidth .bose-tabBarTabs__container {
  max-width: 100%;
}
.bose-tabBarTabs .bose-tabBarTabs__list {
  margin: 0;
  padding: 0;
  max-width: 1000px;
  display: inline-block;
}
.bose-tabBarTabs .bose-tabBarTabs__listItem {
  display: inline-block;
}
.bose-tabBarTabs .bose-tabBarTabs__listItem a, .bose-tabBarTabs .bose-tabBarTabs__listItem a:hover, .bose-tabBarTabs .bose-tabBarTabs__listItem a:visited, .bose-tabBarTabs .bose-tabBarTabs__listItem a:active {
  display: block;
  padding: 0 20px 0 30px;
}
.bose-tabBarTabs .bose-tabBarTabs__listItem.bose-tabBarTabs__listItem--buyNow {
  visibility: hidden;
  opacity: 0;
  /* only visible when the bose-tabs is sticky */
  -moz-transition: visibility 0s linear 1s, opacity 1s linear;
  -o-transition: visibility 0s linear 1s, opacity 1s linear;
  -webkit-transition: visibility 0s linear, opacity 1s linear;
  -webkit-transition-delay: 1s, 0s;
  transition: visibility 0s linear 1s, opacity 1s linear;
}
.bose-tabBarTabs .bose-tabBarTabs__listItem.bose-tabBarTabs__listItem--buyNow a, .bose-tabBarTabs .bose-tabBarTabs__listItem.bose-tabBarTabs__listItem--buyNow a:hover, .bose-tabBarTabs .bose-tabBarTabs__listItem.bose-tabBarTabs__listItem--buyNow a:visited, .bose-tabBarTabs .bose-tabBarTabs__listItem.bose-tabBarTabs__listItem--buyNow a:active {
  text-decoration: none;
  display: none;
}
.stuck .bose-tabBarTabs .bose-tabBarTabs__listItem.bose-tabBarTabs__listItem--buyNow {
  visibility: visible;
  opacity: 1;
  -moz-transition: visibility 0s, opacity 1s linear;
  -o-transition: visibility 0s, opacity 1s linear;
  -webkit-transition: visibility 0s, opacity 1s linear;
  transition: visibility 0s, opacity 1s linear;
}
.stuck .bose-tabBarTabs .bose-tabBarTabs__listItem.bose-tabBarTabs__listItem--buyNow a, .stuck .bose-tabBarTabs .bose-tabBarTabs__listItem.bose-tabBarTabs__listItem--buyNow a:hover, .stuck .bose-tabBarTabs .bose-tabBarTabs__listItem.bose-tabBarTabs__listItem--buyNow a:visited, .stuck .bose-tabBarTabs .bose-tabBarTabs__listItem.bose-tabBarTabs__listItem--buyNow a:active {
  display: inline-block;
}

/*
 Bose tabs component
 ============


 tabs boxed
 -------
 ```
<div class="bose-tabs">
  <div class="bose-tabs__container">
    <div class="bose-tabs__tabBar">
      <ul class="bose-tabBar">
        <li class="bose-tabBar__item"><a href="javascript:;">Tabbutton 1</a></li>
        <li class="bose-tabBar__item"><a href="javascript:;"> 2</a></li>
        <li class="bose-tabBar__item"><a href="javascript:;">Tabbu 3</a></li>
        <li class="bose-tabBar__item"><a href="javascript:;">Tabbutton 4</a></li>
        <li class="bose-tabBar__item"><a href="javascript:;">Tabbutton 5</a></li>
      </ul>
    </div>
    <div class="bose-tabs__tabContent bose-tabContent">
      <div class="bose-tabContent__content">Tabcontent 1</div>
      <div class="bose-tabContent__content">Tabcontent 2</div>
      <div class="bose-tabContent__content">Tabcontent 3</div>
      <div class="bose-tabContent__content">Tabcontent 4</div>
      <div class="bose-tabContent__content">Tabcontent 5</div>
    </div>
  </div>
</div>
 ```

 tabs Full width
 -------
 ```
<div class="bose-tabs bose-tabs--fullWidth">
  <div class="bose-tabs__container">
    <div class="bose-tabs__tabBar">
      <ul class="bose-tabBar">
        <li class="bose-tabBar__item"><a href="javascript:;">Tabbutton 1</a></li>
        <li class="bose-tabBar__item"><a href="javascript:;"> 2</a></li>
        <li class="bose-tabBar__item"><a href="javascript:;">Tabbu 3</a></li>
        <li class="bose-tabBar__item"><a href="javascript:;">Tabbutton 4</a></li>
        <li class="bose-tabBar__item"><a href="javascript:;">Tabbutton 5</a></li>
      </ul>
    </div>
    <div class="bose-tabs__tabContent bose-tabContent">
      <div class="bose-tabContent__container">
        <div class="bose-tabContent__content">Tabcontent 1</div>
        <div class="bose-tabContent__content">Tabcontent 2</div>
        <div class="bose-tabContent__content">Tabcontent 3</div>
        <div class="bose-tabContent__content">Tabcontent 4</div>
        <div class="bose-tabContent__content">Tabcontent 5</div>
      </div>
    </div>
  </div>
</div>
 ```
 */
.bose-tabs .bose-tabs__container {
  margin: 0 auto;
  max-width: 1000px;
}
.bose-tabs.bose-tabs--fullWidth .bose-tabs__container {
  max-width: 100%;
}
.bose-tabs.bose-tabs--sticky .bose-tabs__container {
  display: block;
}
.bose-tabs.bose-tabs--sticky .bose-tabs__container .stuck {
  z-index: 9001;
  position: fixed;
  top: 0;
  width: 100%;
}
.bose-tabs.bose-tabs--sticky .bose-tabs__container.bose-productInfo__description {
  display: none;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-tabs.bose-tabs--sticky .bose-tabs__container.bose-productInfo__image {
    display: none;
  }
}
.bose-tabs.bose-tabs--sticky .bose-tabs__container.bose-productInfo__image {
  height: 145px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-tabs.bose-tabs--sticky .bose-tabs__container.hide-small-whenSticky {
    display: none;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-tabs.bose-tabs--sticky .bose-tabs__container.hide-medium-whenSticky {
    display: none;
  }
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-tabs.bose-tabs--sticky.hide-small {
    display: none;
  }
}
.bose-tabs .bose-tabs__tabBar {
  text-align: center;
  max-width: 1000px;
}
.bose-tabs .bose-tabs__tabBar.bose-tabs__tabBar--fullWidth {
  max-width: 100%;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose Table
 ============

 standard promo
 -------

 ```
<div class="bose-table">
    <table width="100%">
      <tbody>
        <tr>
          <th>header col1</th>
          <th>header col2</th>
          <th>header col3</th>
        </tr>
        <tr>
          <td><b>data col1 1</b></td>
          <td>data col2 1</td>
          <td>data col3 1</td>
        </tr>
        <tr>
          <td><b><i>data col1 2</i></b></td>
          <td style="text-align: center;">data col2 2</td>
          <td>data col3 2</td>
        </tr>
        <tr>
          <td><b><u>data col1 3</u></b></td>
          <td>data col2 3</td>
          <td style="text-align: center;">data col3 3</td>
        </tr>
        <tr>
          <td><b><u><i>data col1 4</i></u></b></td>
          <td style="text-align: right;">data col2 4</td>
          <td>data col3 4</td>
        </tr>
        <tr>
          <td><b>data col1 5</b></td>
          <td>data col2 5</td>
          <td>data col3 5</td>
        </tr>
        <tr>
        <td>
          <ul>
            <li>listitem 1</li>
            <li>listitem 2</li>
            <li>listitem 3</li>
          </ul>
        </td>
        <td>
          <ol>
            <li>listitem 1</li>
            <li>listitem2</li>
          </ol>
        </td>
        <td>&nbsp;</td>
      </tr>
    </tbody>
  </table>
</div>
 ```
*/
.bose-table {
  margin: 20px 30px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-table {
    margin: 20px 20px;
  }
}
.bose-table--fullWidth {
  margin: 20px 0;
}
.bose-table u {
  text-decoration: underline;
}
.bose-table i {
  font-style: italic;
}
.bose-table ol {
  list-style-type: decimal;
  list-style-position: outside;
  padding-left: 15px;
}
.bose-table ul {
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 15px;
}
.bose-table tr th {
  text-transform: uppercase;
  padding: 15px;
  border-left: 1px solid #FFFFFF;
}
.bose-table tr th:first-child {
  border-left: 0 none;
}
.bose-table tr td {
  border-left: 1px solid #FFFFFF;
  padding: 15px;
}
.bose-table tr td:first-child {
  border-left: 0 none;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-table ol {
    padding-left: 20px;
  }
  .bose-table ul {
    padding-left: 20px;
  }
  .bose-table tr {
    display: block;
    padding: 15px;
  }
  .bose-table tr th {
    padding: 0;
    display: none;
  }
  .bose-table tr th:first-child {
    display: block;
  }
  .bose-table tr td {
    padding: 0;
    display: block;
  }
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose Social Tiles
 ============
 This file contains all styling rules for the Social Tiles component,
 created for the Homepage using the Slick JavaScript library.
 -------

 ```
 <div class="bose-socialTiles">
    <div class="bose-socialTiles__header" >
        <span></span>
    </div>
    <div class="bose-socialTiles__tiles">
        <div class="bose-socialTiles__tile" style="background: url()">
            <a href="">
                <i class="bose-socialTiles__icon"></i>
                <i class="bose-socialTiles__icon fa fa-"></i>
                <i class="bose-socialTiles__icon"></i>
                <span class="bose-socialTiles__label"></span>
            </a>
        </div>
    </div>
 </div>
 ```

 */
.bose-socialTiles {
  margin: 20px 30px;
  clear: both;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-socialTiles {
    margin: 20px 20px;
  }
}
.bose-socialTiles--fullWidth {
  margin: 20px 0;
}
.bose-socialTiles .bose-socialTiles__header {
  font-size: 25px;
  color: #908F8F;
  position: relative;
  z-index: 1;
  margin: 30px 0px 10px 0px;
}
.bose-socialTiles .bose-socialTiles__header:before {
  border-top: 2px solid #DFDFDF;
  content: "";
  margin: 0px auto;
  position: absolute;
  top: 50%;
  right: 0px;
  bottom: 0px;
  width: 99%;
  z-index: -1;
  left: 0px;
}
.bose-socialTiles .bose-socialTiles__header span {
  background: none repeat scroll 0% 0% #FFF;
  padding: 0px 15px;
  margin-left: 10%;
}
.bose-socialTiles .bose-socialTiles__tile {
  height: 325px;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  margin: 0px 3px;
}
.bose-socialTiles .bose-socialTiles__tile a {
  position: relative;
  display: block;
  height: 100%;
}
.bose-socialTiles .bose-socialTiles__tile .bose-socialTiles__icon {
  position: absolute;
  top: 15px;
  left: 10px;
  color: #FFFFFF;
  font-size: 20px;
}
.bose-socialTiles .bose-socialTiles__tile .bose-socialTiles__icon:before {
  color: #FFFFFF;
}
.bose-socialTiles .bose-socialTiles__tile .bose-socialTiles__icon .fa {
  font-size: 30px;
}
.bose-socialTiles .bose-socialTiles__tile .bose-socialTiles__label {
  position: absolute;
  bottom: 0px;
  width: 100%;
  background-color: #1b2e33;
  color: #FFFFFF;
  height: 65px;
  overflow: hidden;
  text-align: center;
  padding-top: 17px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
.bose-socialTiles .bose-socialTiles__tile .bose-socialTiles__label b {
  font-weight: bold;
}
.bose-socialTiles .bose-socialTiles__tile .bose-socialTiles__label i {
  font-style: italic;
}
.bose-socialTiles .bose-socialTiles__prev,
.bose-socialTiles .bose-socialTiles__next {
  color: #afb0b0;
  position: absolute;
  cursor: pointer;
  top: 50%;
  margin-top: -10px;
  padding: 0;
  border: none;
  outline: none;
}
.bose-socialTiles .bose-socialTiles__prev:hover,
.bose-socialTiles .bose-socialTiles__next:hover {
  color: #000000;
}
.bose-socialTiles .bose-socialTiles__prev {
  left: -25px;
  right: auto;
}
.bose-socialTiles .bose-socialTiles__next {
  right: -25px;
  left: auto;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose Social Media
 ============

 ```
  <div class="bose-socialMedia">...</div>
 ```
 */
.bose-socialMedia {
  padding-top: 20px;
  font-size: 16px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-socialMedia {
    font-size: 14px;
  }
}
.bose-socialMedia .bose-socialMedia__title {
  text-transform: uppercase;
  font-family: "Bose_Medium", verdana;
  font-size: 14px;
  color: #aaaaaa;
  display: block;
  margin-bottom: 14px;
}

@media screen and (min-width: 0px) and (max-width: 600px) {
  div.socialMedia {
    position: absolute;
    right: 12px;
    bottom: 0px;
  }
}
div.socialMedia .bose-socialMedia.bose-socialMedia--compact {
  margin: 20px 30px;
  width: 135px;
  padding-top: 0px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  div.socialMedia .bose-socialMedia.bose-socialMedia--compact {
    margin: 20px 20px;
  }
}
div.socialMedia .bose-socialMedia.bose-socialMedia--compact--fullWidth {
  margin: 20px 0;
}
div.socialMedia .bose-socialMedia.bose-socialMedia--compact .bose-socialMedia__icon {
  margin-right: 10px;
  margin-bottom: 10px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  div.socialMedia .bose-socialMedia.bose-socialMedia--verticallyStacked .bose-socialMedia__icon {
    display: block;
    padding-bottom: 10px;
  }
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
Bose Single input form
============
 ```
<form class="bose-singleInputForm">
    <label class="bose-singleInputForm__label">${'search site' @i18n}</label>
    <input class="bose-singleInputForm__input" type="text" value="" placeholder="${'search' @i18n}..." />
    <input class="bose-singleInputForm__submit" type="submit" value="${'search' @i18n}" />
</form>
 ```

 Bose Single input form: bright
 -------
 ```
<form class="bose-singleInputForm bose-singleInputForm--bright">
    <label class="bose-singleInputForm__label">${'search site' @i18n}</label>
    <input class="bose-singleInputForm__input" type="text" value="" placeholder="${'search' @i18n}..." />
    <input class="bose-singleInputForm__submit" type="submit" value="${'search' @i18n}" />
</form>
 ```

 Bose Single input form: SEARCH
 -------
 ```
<form class="bose-singleInputForm bose-singleInputForm--searchTop">
    <input class="bose-singleInputForm__input" type="search" value="" placeholder="${'search' @i18n}..." />
    <button class="bose-singleInputForm__submit" type="submit"><span>${'search' @i18n}</span></button>
</form>
 ```
*/
.bose-singleInputForm {
  *zoom: 1;
  height: 24px;
}
.bose-singleInputForm:after {
  content: "";
  display: table;
  clear: both;
}
.bose-singleInputForm__input[type='text'] {
  border: none;
  height: 24px;
  line-height: 24px;
  background-image: url("../../../designs/bose/base/clientlibs/images/inputbox_background.png");
  background-repeat: no-repeat;
  background-position: 0px -2px;
  background-color: transparent;
  float: left;
  text-indent: 10px;
  display: inline-block;
}
.bose-singleInputForm__submit[type='submit'] {
  text-indent: -9999px;
  width: 30px;
  height: 24px;
  background-image: url("../../../designs/bose/base/clientlibs/images/inputbox_background.png");
  background-repeat: no-repeat;
  background-position: right -32px;
  border: 0 none;
  background-color: transparent;
  padding: 0;
}
.bose-singleInputForm--bright .bose-singleInputForm__input[type='text'] {
  background-image: url("../../../designs/bose/base/clientlibs/images/inputbox_background_bright.png");
}
.bose-singleInputForm--bright .bose-singleInputForm__submit[type='submit'] {
  background-image: url("../../../designs/bose/base/clientlibs/images/inputbox_background_bright.png");
}
.bose-singleInputForm.bose-singleInputForm--noMargin, .bose-singleInputForm.bose-singleInputForm--noMargin.bose-singleInputForm--searchTop {
  margin: 0;
}
.bose-singleInputForm.bose-singleInputForm--searchTop {
  *zoom: 1;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 30px 20px;
  min-height: 40px;
  height: auto;
  position: relative;
}
.bose-singleInputForm.bose-singleInputForm--searchTop:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-singleInputForm.bose-singleInputForm--searchTop {
    min-height: 31px;
  }
}
.bose-singleInputForm.bose-singleInputForm--searchTop .bose-singleInputForm__label {
  display: none;
}
.bose-singleInputForm.bose-singleInputForm--searchTop .bose-singleInputForm__input {
  border: 0;
  outline: 0;
  position: absolute;
  height: 40px;
  width: 100%;
  padding-right: 150px;
  box-sizing: border-box;
  -webkit-appearance: none;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-singleInputForm.bose-singleInputForm--searchTop .bose-singleInputForm__input {
    height: 31px;
    padding-right: 50px;
  }
}
.bose-singleInputForm.bose-singleInputForm--searchTop .bose-singleInputForm__submit[type='submit'] {
  position: absolute;
  right: 0;
  text-align: center;
  text-transform: uppercase;
  width: auto;
  padding: 0 25px;
  height: 40px;
  cursor: pointer;
}
.bose-singleInputForm.bose-singleInputForm--searchTop .bose-singleInputForm__submit[type='submit'] i {
  display: none;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-singleInputForm.bose-singleInputForm--searchTop .bose-singleInputForm__submit[type='submit'] {
    height: 31px;
    padding: 0 15px;
    border: 0 none;
  }
  .bose-singleInputForm.bose-singleInputForm--searchTop .bose-singleInputForm__submit[type='submit'] span {
    display: none;
  }
  .bose-singleInputForm.bose-singleInputForm--searchTop .bose-singleInputForm__submit[type='submit'] i {
    display: block;
  }
}

@charset "UTF-8";
/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose Product Snippet
 ============

 Product snippet
 -------

 This file contains all styling rules for the product snippet

 ```
<div class="bose-productSnippet">
    <h4>Wave Music System III</h4>
    <div>
        <p>Wave Music System Description</p>
    </div>
    <a href="/content/consumer-products/global/index/products/wave_systems/wave_music_systems/wms_III.html">Go to product »</a>
</div>
 ```
 */
.bose-productSnippet {
  margin: 20px 30px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-productSnippet {
    margin: 20px 20px;
  }
}
.bose-productSnippet--fullWidth {
  margin: 20px 0;
}
.bose-productSnippet__container {
  border: 1px solid #eeeeee;
  border-bottom: 10px solid #eeeeee;
}
.bose-productSnippet__container:hover {
  border: 1px solid #bec42f;
  border-bottom: 10px solid #bec42f;
}
.bose-productSnippet__title {
  background-color: #f9f9f9;
  text-transform: uppercase;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 20px;
  padding-bottom: 40px;
}
.bose-productSnippet:hover .bose-productSnippet__title {
  background-color: #bec42f;
}
.bose-productSnippet .bose-productSnippet__content, .bose-productSnippet .bose-productSnippet__content p, .bose-productSnippet__content .bose-productSnippet p {
  background-color: #f9f9f9;
  text-overflow: ellipsis;
  height: 70px;
  padding: 10px;
  padding-bottom: 20px;
  overflow: hidden;
  line-height: 15px;
}
.bose-productSnippet__image img {
  height: 200px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@charset "UTF-8";
/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 TODO
 ============

 TODO
 -------


 ```
<div>TODO</div>
 ```
 */
.bose-component-productfeature__section-primary {
  margin: 10px 0 50 0;
}
.bose-component-productfeature__section-primary > img {
  width: 100%;
}
.bose-component-productfeature__section-secondary {
  margin: 20px 0 50 0;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose Panel
 ============
*/
.bose-panel {
  *zoom: 1;
  overflow: auto;
  padding: 15px;
  margin: 10px;
}
.bose-panel:after {
  content: "";
  display: table;
  clear: both;
}
.bose-panel.bose-panel--centered {
  text-align: center;
}
.bose-panel.bose-panel--noSpacing {
  padding: 0;
  margin: 0;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose Page Header Component
 ============
 This file contains all styling rules for the Page Header Component
 -------

 ```
<div class="bose-pageHeader">
    <h1>Page Title</h1>
    <img src="http://lorempixel.com/g/400/200/" class="bose-adaptiveImage" />
    <div class="bose-adaptiveImage bose-adaptiveImage--notFound" />
</div>
 ```

 */
div.image.pageHeader {
  margin-bottom: 0;
}

.bose-pageHeader {
  position: relative;
  min-height: 140px;
  max-height: 400px;
  overflow: hidden;
}
.bose-pageHeader .bose-pageHeader__textWrapper {
  margin-top: 0;
  margin-bottom: 8px;
  position: absolute;
}
.bose-pageHeader .bose-pageHeader__textWrapper h1 {
  color: #333333;
  font-family: "Bose_Light";
  margin-bottom: 0;
  text-transform: uppercase;
}
.bose-pageHeader .bose-pageHeader__textWrapper.-darkFont, .bose-pageHeader .bose-pageHeader__textWrapper.-darkFont h1, .bose-pageHeader .bose-pageHeader__textWrapper.-darkFont h2 {
  color: #000000;
}
.bose-pageHeader .bose-pageHeader__textWrapper.-lightFont, .bose-pageHeader .bose-pageHeader__textWrapper.-lightFont h1, .bose-pageHeader .bose-pageHeader__textWrapper.-lightFont h2 {
  color: #ffffff;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-pageHeader .bose-pageHeader__textWrapper.-lightFont, .bose-pageHeader .bose-pageHeader__textWrapper.-lightFont h1, .bose-pageHeader .bose-pageHeader__textWrapper.-lightFont h2 {
    color: #000000;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-pageHeader .bose-pageHeader__textWrapper.-lightFont, .bose-pageHeader .bose-pageHeader__textWrapper.-lightFont h1, .bose-pageHeader .bose-pageHeader__textWrapper.-lightFont h2 {
    color: #000000;
  }
}
.bose-pageHeader .bose-pageHeader__textWrapper.-topLeft, .bose-pageHeader .bose-pageHeader__textWrapper.-bottomLeft {
  left: 20px;
}
@media screen and (min-width: 901px) {
  .bose-pageHeader .bose-pageHeader__textWrapper.-topLeft, .bose-pageHeader .bose-pageHeader__textWrapper.-bottomLeft {
    left: 84px;
  }
}
.bose-pageHeader .bose-pageHeader__textWrapper.-topRight, .bose-pageHeader .bose-pageHeader__textWrapper.-bottomRight {
  right: 20px;
  text-align: right;
}
.bose-pageHeader .bose-pageHeader__textWrapper.-topLeft, .bose-pageHeader .bose-pageHeader__textWrapper.-topRight {
  top: 105px;
}
.bose-pageHeader .bose-pageHeader__textWrapper.-bottomRight, .bose-pageHeader .bose-pageHeader__textWrapper.-bottomLeft {
  bottom: 20px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-pageHeader .bose-pageHeader__textWrapper.-topLeft, .bose-pageHeader .bose-pageHeader__textWrapper.-topRight, .bose-pageHeader .bose-pageHeader__textWrapper.-bottomRight, .bose-pageHeader .bose-pageHeader__textWrapper.-bottomLeft {
    position: relative;
    top: 0;
    bottom: 0;
    margin-top: 10px;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-pageHeader .bose-pageHeader__textWrapper.-topLeft, .bose-pageHeader .bose-pageHeader__textWrapper.-topRight, .bose-pageHeader .bose-pageHeader__textWrapper.-bottomRight, .bose-pageHeader .bose-pageHeader__textWrapper.-bottomLeft {
    position: relative;
    top: 0;
    bottom: 0;
    margin-top: 10px;
  }
}
.bose-pageHeader .bose-adaptiveImage {
  margin: 0 !important;
  min-height: 140px;
}
.bose-pageHeader .bose-adaptiveImage.bose-adaptiveImage--notFound {
  position: relative;
  z-index: 100;
}
.bose-pageHeader .bose-pageHeader__backgroundContainer {
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
}
.bose-pageHeader .bose-pageHeader__backgroundContainer.-leftFocalRegion {
  background-position-x: 0%;
}
.bose-pageHeader .bose-pageHeader__backgroundContainer.-rightFocalRegion {
  background-position-x: 100%;
}
.bose-pageHeader .bose-pageHeader__backgroundContainer.-centerFocalRegion {
  background-position-x: 50%;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose Generic Content Two Column Page 25 / 75
 ============
 This file contains all styling rules for the Generic Content Page Component
 -------

 ```
<section class="bose-component-genericContentPage container">
    <div class="grid-12 parent ">
        <div class="bose-pageHeader"></div>
        <div class="grid-12 bose-content-container">
            <div class="grid-3">
                <div class="parsys"></div>
            </div>

            <div class="grid-9">
                <div class="parsys"></div>
            </div>
        </div>
    </div>
</section>
 ```

 */
@media screen and (min-width: 901px) {
  .bose-genericContentTwoColumn2575Page .bose-content-container {
    margin: 0 0 30px 0;
  }
}

/*
 Bose Generic Content Page Component
 ============
 This file contains all styling rules for the Generic Content Page Component
 -------

 ```
<section class="bose-component-genericContentPage container">
    <div class="grid-12 parent ">
        <div class="bose-pageHeader"></div>

        <div class="grid-12">
            <div class="parsys"></div>
        </div>
    </div>
</section>
 ```

 */

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose Message Panel
 ============
 bose-messagePanel
 -------

 ```
<div class="bose-messagePanel">
    <h1 class="bose-messagePanel__title">Sorry.</h1>
    <h3 class="bose-messagePanel__message">This page doesn't exist, which might make you sad.</h3>
    <a class="bose-messagePanel__redirect" href="/content/consumer-products/us_en/index">Cheer up! There's so much more to explore!</a>
</div>
 ```
 */
.bose-messagePanel {
  text-align: center;
  margin-top: 300px;
  min-height: 500px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-messagePanel {
    margin-top: 100px;
    min-height: 300px;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-messagePanel {
    margin-top: 100px;
    min-height: 300px;
  }
}
.bose-messagePanel .bose-messagePanel__title {
  font-size: 60px;
  color: #000000;
  margin-bottom: 2px;
}
.bose-messagePanel .bose-messagePanel__message {
  font-size: 30px;
  margin-bottom: 12px;
}
.bose-messagePanel .bose-messagePanel__redirect {
  font-size: 20px;
  color: #39b8f0;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
.bose-localeSelector {
  padding: 20px 30px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-localeSelector {
    padding: 20px 20px;
  }
}
.bose-localeSelector--fullWidth {
  padding: 20px 0;
}
.bose-localeSelector .bose-localeSelector__currentLocale {
  font-family: "Bose_Medium", Verdana;
  text-transform: uppercase;
  display: inline-block;
  margin-right: 5px;
}
.bose-localeSelector .bose-localeSelector__currentLocale:before {
  content: "";
  display: inline-block;
  position: relative;
  top: 7px;
  margin-right: 5px;
}
.bose-localeSelector .bose-localeSelector__changeLocale {
  font-family: "Bose_Medium", Verdana;
  width: auto !important;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose List
 ============

 General List
 -------

 This file contains all styling rules of the footer

 ```
<div class="bose-list">
    <h4 class="bose-list__title">List title</h4>
    <ul class="bose-list__list">
      <li class="bose-list__listitem">
        <a href="javascript:;">ListItemLink</a>
      </li>
      <li class="bose-list__listitem">
        <a href="javascript:;">ListItemLink</a>
      </li>
    </ul>
</div>
<div class="bose-list">
    <h4 class="bose-list__title">List title</h4>
    <ul class="bose-list__list bose-list__list--bullet">
      <li class="bose-list__listitem">
        <a href="javascript:;">ListItemLink</a>
      </li>
      <li class="bose-list__listitem">
        <a href="javascript:;">ListItemLink</a>
      </li>
    </ul>
</div>
<div class="bose-list">
    <h4 class="bose-list__title">List title</h4>
    <ul class="bose-list__list bose-list__list--numbered">
      <li class="bose-list__listitem">
        <a href="javascript:;">ListItemLink</a>
      </li>
      <li class="bose-list__listitem">
        <a href="javascript:;">ListItemLink</a>
      </li>
    </ul>
</div>
 ```

 List for support
 -------
  ```
 <div class="bose-list bose-list--support">
    <h4 class="bose-list__title">Owners Guide</h4>
    <ul class="bose-list__list">
      <li class="bose-list__listitem">
        <a href="javascript:;"><span>English</span></a>
      </li>
      <li class="bose-list__listitem">
        <a href="javascript:;"><span>Spanish</span></a>
      </li>
      <li class="bose-list__listitem">
        <a href="javascript:;"><span>German</span></a>
      </li>
      <li class="bose-list__listitem">
        <a href="javascript:;"><span>English</span></a>
      </li>
      <li class="bose-list__listitem">
        <a href="javascript:;"><span>Spanish</span></a>
      </li>
      <li class="bose-list__listitem">
        <a href="javascript:;"><span>German</span></a>
      </li>
      <li class="bose-list__listitem">
        <a href="javascript:;"><span>English</span></a>
      </li>
      <li class="bose-list__listitem">
        <a href="javascript:;"><span>Spanish</span></a>
      </li>
      <li class="bose-list__listitem">
        <a href="javascript:;"><span>German</span></a>
      </li>
      <li class="bose-list__listitem">
        <a href="javascript:;"><span>English</span></a>
      </li>
      <li class="bose-list__listitem">
        <a href="javascript:;"><span>Spanish</span></a>
      </li>
      <li class="bose-list__listitem">
        <a href="javascript:;"><span>German</span></a>
      </li>
      <li class="bose-list__listitem">
        <a href="javascript:;"><span>English</span></a>
      </li>
      <li class="bose-list__listitem">
        <a href="javascript:;"><span>Spanish</span></a>
      </li>
      <li class="bose-list__listitem bose-list__listitem--last">
        <a href="javascript:;"><span>German</span></a>
      </li>
    </ul>
</div>
<div class="bose-list bose-list--support">
    <h4 class="bose-list__title">Owners Guide</h4>
    <ul class="bose-list__list">
      <li class="bose-list__listitem bose-list__listitem--last">
        <a href="javascript:;"><span>German</span></a>
      </li>
    </ul>
</div>
<div class="bose-list bose-list--support">
    <h4 class="bose-list__title">Owners Guide</h4>
    <ul class="bose-list__list">
      <li class="bose-list__listitem">
        <a href="javascript:;"><span>English</span></a>
      </li>
      <li class="bose-list__listitem">
        <a href="javascript:;"><span>Spanish</span></a>
      </li>
      <li class="bose-list__listitem bose-list__listitem--last">
        <a href="javascript:;"><span>German</span></a>
      </li>
    </ul>
</div>
 ```
 */
.bose-list {
  *zoom: 1;
  margin: 20px 30px;
}
.bose-list:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-list {
    margin: 20px 20px;
  }
}
.bose-list--fullWidth {
  margin: 20px 0;
}
.bose-list__title {
  text-transform: uppercase;
  padding-bottom: 20px;
  display: block;
}
.bose-list__list {
  padding: 0;
  margin: 0;
}
.bose-list__list.bose-list__list--bullet {
  margin-left: 15px;
}
.bose-list__list.bose-list__list--bullet .bose-list__listitem {
  list-style-type: disc;
}
.bose-list__list.bose-list__list--numbered {
  margin-left: 15px;
}
.bose-list__list.bose-list__list--numbered .bose-list__listitem {
  list-style-type: decimal;
}
.bose-list__list.bose-list__list--noBullets .bose-list__listitem {
  list-style-type: none;
}
.bose-list__list.bose-list__list--chevronRight {
  position: relative;
}
.bose-list__list.bose-list__list--chevronRight li {
  padding-bottom: 15px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-list__list.bose-list__list--chevronRight li {
    padding-bottom: 40px;
  }
  .bose-list__list.bose-list__list--chevronRight li a {
    position: relative;
    padding-right: 20px;
    display: block;
  }
}
.bose-list .bose-list__listitem {
  padding: 0 0 0.5em 0;
  list-style-type: none;
}
.bose-list .bose-list__listitemTitle {
  display: inline;
}
.bose-list.bose-list--support {
  padding: 0;
}
.bose-list.bose-list--support .bose-list__title {
  text-transform: none;
  padding-bottom: 0;
  margin: 0;
  padding: 0 0 10px 0;
  font-weight: normal;
}
.bose-list.bose-list--support .bose-list__title:after {
  content: ": ";
}
.bose-list.bose-list--support .bose-list__list {
  display: inline-block;
  margin: 0;
  padding: 0;
}
.bose-list.bose-list--support .bose-list__listitem {
  display: inline-block;
  margin: 0;
}
.bose-list.bose-list--support .bose-list__listitem:after {
  content: " | ";
}
.bose-list.bose-list--support .bose-list__listitem.bose-list__listitem--last:after {
  content: "";
}
.bose-list.bose-list--specifications .bose-list__listitemTitle {
  padding-right: 5px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-list.bose-list--specifications .bose-list__listitemDescr {
    display: block;
  }
}

@charset "UTF-8";
/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
Bose buttons
============
standard button
---------
 ```
<a href="#" class="bose-button"><span class="bose-button__label">Next</span></a>
 ```

 standard button left align
---------
 ```
<a href="#" class="bose-button  -left"><span class="bose-button__label">Next</span></a>
 ```

 standard button right align
---------
 ```
<a href="#" class="bose-button  -right"><span class="bose-button__label">Next</span></a>
 ```

 standard button arrow right
---------
 ```
<a href="#" class="bose-button  bose-button--arrowRight"><span class="bose-button__label">Next</span></a>
 ```

 Buy button
---------
 ```
<a href="#" class="bose-button bose-button--buy"><span class="bose-button__label">buy</span></a>
 ```

 Reserve and Collect button
---------
 ```
<a href="#" class="bose-button bose-button--rac"><span class="bose-button__label">Reserve and Collect</span></a>
 ```

 Loading state
---------
 ```
<a href="#" class="bose-button bose-button--rac bose-button--loading"><span class="bose-button__label">Reserve and Collect</span><span class="bose-button__progressbar"></span></a>
<a href="#" class="bose-button bose-button--buy bose-button--loading"><span class="bose-button__label">Buy loading</span><span class="bose-button__progressbar"></span></a>
<a href="#" class="bose-button bose-button--loading"><span class="bose-button__label">standard loading</span><span class="bose-button__progressbar"></span></a>
 ```

 Error states
---------
 ```
<a href="#" class="bose-button bose-button--rac bose-button--error"><span class="bose-button__label">Reserve and Collect</span><span class="bose-button__progressbar"></span></a>
<a href="#" class="bose-button bose-button--buy bose-button--error"><span class="bose-button__label">Buy loading</span><span class="bose-button__progressbar"></span></a>
<a href="#" class="bose-button bose-button--error"><span class="bose-button__label">standard loading</span><span class="bose-button__progressbar"></span></a>
 ```

 Completed states
---------
 ```
<a href="#" class="bose-button bose-button--rac bose-button--completed"><span class="bose-button__label">Reserve and Collect</span><span class="bose-button__progressbar"></span></a>
<a href="#" class="bose-button bose-button--buy bose-button--completed"><span class="bose-button__label">Buy loading</span><span class="bose-button__progressbar"></span></a>
<a href="#" class="bose-button bose-button--completed"><span class="bose-button__label">standard loading</span><span class="bose-button__progressbar"></span></a>
 ```
*/
.button, .submitButton {
  overflow: auto;
}

.bose-linkButtonAttachment {
  *zoom: 1;
  margin: 20px 30px;
}
.bose-linkButtonAttachment:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-linkButtonAttachment {
    margin: 20px 20px;
  }
}
.bose-linkButtonAttachment--fullWidth {
  margin: 20px 0;
}

@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-linkButtonAttachment__link {
    display: block;
    padding: 10px 0;
  }
}

.bose-button {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  width: 100%;
  height: 30px;
  font-size: 14px;
  color: #000000;
  background-color: #f2af00;
  text-align: center;
  display: table;
  cursor: pointer;
  position: relative;
  margin-bottom: 5px;
  padding-left: 25px;
  padding-right: 25px;
  text-transform: uppercase;
}
.bose-button:hover {
  background-color: #ce9501;
  color: #000000;
}
.bose-button:hover .bose-button__label {
  color: #000000;
}
.bose-button:hover.bose-button--loading {
  background-color: #f2af00;
}
.bose-button:active, .bose-button:hover, .bose-button:visited, .bose-button:link {
  text-decoration: none;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-button {
    width: 100%;
  }
}
.bose-button.bose-button--rac {
  width: 350px;
  height: 40px;
  font-size: 18px;
  background-color: #3d7fa6;
}
.bose-button.bose-button--rac:hover {
  background-color: #005687;
}
.bose-button.bose-button--rac:hover.bose-button--loading {
  cursor: default;
  background-color: #3d7fa6;
}
.bose-button.bose-button--buy {
  height: 40px;
  font-size: 18px;
}
.bose-button.bose-button--customize {
  height: 40px;
  font-size: 18px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-button.bose-button--buyCustomTool {
    width: 50%;
    margin: 0 auto;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-button.bose-button--buyCustomTool {
    width: 50%;
    margin: 0 auto;
  }
}
.bose-button.bose-button--cart2checkout, .bose-button.bose-button--cart2checkout:hover, .bose-button.bose-button--print, .bose-button.bose-button--print:hover {
  font-family: "Bose_Medium", verdana;
  width: auto;
  font-size: 16px;
  color: #000000;
  padding: 10px 20px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-button.bose-button--cart2checkout, .bose-button.bose-button--cart2checkout:hover, .bose-button.bose-button--print, .bose-button.bose-button--print:hover {
    width: 100%;
  }
}
.bose-button.bose-button--cart2contShopping {
  font-family: "Bose_Medium", verdana;
  width: auto;
  font-size: 16px;
  padding: 10px 50px;
  background: #3d7fa6;
  color: #ffffff;
  text-align: center;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-button.bose-button--cart2contShopping {
    width: 100%;
  }
}
.bose-button.bose-button--cart2contShopping:hover {
  background-color: #005687;
}
.bose-button.bose-button--paddingLeft {
  margin-left: 20px;
}
.bose-button.bose-button--paddingRight {
  margin-right: 20px;
}
.bose-button.bose-button--paddingTop {
  margin-top: 20px;
}
.bose-button.bose-button--paddingBottom {
  margin-bottom: 20px;
}
.bose-button .bose-button__label {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #000000;
}
.bose-button .bose-button__progressbar {
  display: none;
  position: absolute;
  width: 100%;
  bottom: 0px;
  height: 3px;
  left: 0;
  -moz-border-radius-bottomleft: 6px;
  -webkit-border-bottom-left-radius: 6px;
  border-bottom-left-radius: 6px;
  -moz-border-radius-bottomright: 6px;
  -webkit-border-bottom-right-radius: 6px;
  border-bottom-right-radius: 6px;
  -webkit-animation: speed 2s linear infinite, via 2s linear infinite;
  -moz-animation: speed 2s linear infinite, via 2s linear infinite;
  -ms-animation: speed 2s linear infinite, via 2s linear infinite;
  animation: speed 2s linear infinite, via 2s linear infinite;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5));
}
@-webkit-keyframes speed {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@-moz-keyframes speed {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@-ms-keyframes speed {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes speed {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@-webkit-keyframes via {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes via {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-ms-keyframes via {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes via {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.bose-button.bose-button--loading {
  cursor: default;
}
.bose-button.bose-button--loading .bose-button__progressbar {
  display: block;
}
.bose-button.bose-button--error:after {
  content: "\f00d";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  /*--adjust as necessary--*/
  color: #ffffff;
  font-size: 18px;
  padding-right: 0.5em;
  position: absolute;
  top: 5px;
  right: 0;
}
.bose-button.bose-button--error.bose-button--buy:after, .bose-button.bose-button--error.bose-button--rac:after {
  top: 10px;
}
.bose-button.bose-button--completed:after {
  content: "\f00c";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  /*--adjust as necessary--*/
  color: #FFFFFF;
  font-size: 18px;
  padding-right: 0.5em;
  position: absolute;
  top: 5px;
  right: 0;
}
.bose-button.bose-button--completed.bose-button--buy:after, .bose-button.bose-button--completed.bose-button--rac:after {
  top: 10px;
}
.bose-button.-right {
  float: right;
  width: auto;
  min-width: 220px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-button.-right {
    float: none;
    width: 100%;
    min-width: 100%;
  }
}
.bose-button.-left {
  float: left;
  width: auto;
  min-width: 220px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-button.-left {
    float: none;
    width: 100%;
    min-width: 100%;
  }
}
.bose-button.bose-button--show {
  display: table;
}
.bose-button.bose-button--hide {
  display: none;
}
.bose-button.bose-button--arrowRight .bose-button__label:after {
  content: "►";
  font-family: sans-serif;
  font-size: 12px;
  padding-left: 10px;
}

.bose-link {
  cursor: pointer;
}
.bose-link.-bar {
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-transform: uppercase;
  display: block;
  width: 100%;
  margin: auto;
  padding-left: 20px;
  box-sizing: border-box;
}
.bose-link.-bar .bose-link__icon {
  margin-top: 7px;
}
.bose-link.-bar .bose-link__label {
  display: inline-block;
  vertical-align: top;
}
.bose-link.-bar:visited, .bose-link.-bar:link, .bose-link.-bar:active, .bose-link.-bar:hover {
  text-decoration: none;
}
.bose-link.-disabled {
  text-decoration: none;
  cursor: default;
}
.bose-link.-right {
  float: right;
  width: auto;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-link.-right {
    float: none;
    width: 100%;
    min-width: 100%;
  }
}
.bose-link.-left {
  float: left;
  width: auto;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-link.-left {
    float: none;
    width: 100%;
    min-width: 100%;
  }
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-link--right {
    width: 100%;
  }
}
@media screen and (min-width: 901px) {
  .bose-link--right {
    float: right;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-link--right {
    float: right;
  }
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-link--left {
    width: 100%;
  }
}
@media screen and (min-width: 901px) {
  .bose-link--left {
    float: left;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-link--left {
    float: left;
  }
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose Left Navigation Component
 ============
 This file contains all styling rules for the Left Navigation Component
 -------

 ```
<div class="bose-leftNavigation">
  <div class="bose-leftNavigation__title"><a href="" title=""></a></div>
  <ul class="bose-leftNavigation__items">
    <li class="bose-leftNavigation__item">
      <i class="fa fa-chevron-left"></i><a class="" href="" title=""></a>
    </li>
  </ul>
</div>
 ```

 */
.bose-leftNavigation {
  margin: 20px 0 0 30px;
}
.bose-leftNavigation .bose-leftNavigation__title {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  padding-bottom: 15px;
}
.bose-leftNavigation .bose-leftNavigation__title i {
  margin-right: 5px;
}
.bose-leftNavigation .bose-leftNavigation__title a, .bose-leftNavigation .bose-leftNavigation__title a:visited, .bose-leftNavigation .bose-leftNavigation__title a:hover, .bose-leftNavigation .bose-leftNavigation__title a:active {
  font-family: 'Bose_Medium';
}
.bose-leftNavigation .bose-leftNavigation__items {
  padding-top: 15px;
}
.bose-leftNavigation .bose-leftNavigation__item {
  margin-bottom: 10px;
}
.bose-leftNavigation .bose-leftNavigation__item a, .bose-leftNavigation .bose-leftNavigation__item a:visited {
  text-decoration: none;
}
.bose-leftNavigation .bose-leftNavigation__item a:hover {
  text-decoration: none;
  font-family: 'Bose_Medium';
}
.bose-leftNavigation .bose-leftNavigation__item.bose-leftNavigation__item--selected a, .bose-leftNavigation .bose-leftNavigation__item.bose-leftNavigation__item--selected a:active, .bose-leftNavigation .bose-leftNavigation__item.bose-leftNavigation__item--selected a:visited, .bose-leftNavigation .bose-leftNavigation__item.bose-leftNavigation__item--selected a:hover {
  text-decoration: none;
  font-family: 'Bose_Medium';
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
.bose-imageGallery {
  margin: 0 auto 0 auto;
  max-width: 1000px;
}
.bose-imageGallery .bose-imageGallery__main {
  display: none;
  margin: 0 auto 0 auto;
}
.bose-imageGallery .bose-imageGallery__main img {
  margin: 0 auto 0 auto;
  width: 100%;
  max-width: 1000px;
}
.bose-imageGallery .bose-imageGallery__main.slick-slider {
  margin-bottom: 8px;
}
.bose-imageGallery .bose-imageGallery__nav {
  display: none;
  margin: 0 35px 10px 35px;
  /*  this is desired but does not seem compatible
      with this version of slick
      .slick-center, .slick-active {
      @include filter(opacity(.5));
  }   */
}
.bose-imageGallery .bose-imageGallery__nav .slick-list {
  margin: 0 10px 0 10px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-imageGallery .bose-imageGallery__nav .slick-list {
    display: none;
  }
}
.bose-imageGallery .bose-imageGallery__nav .slick-prev, .bose-imageGallery .bose-imageGallery__nav .slick-next, .bose-imageGallery .bose-imageGallery__nav .slick-prev:before, .bose-imageGallery .bose-imageGallery__nav .slick-next:before {
  color: #cccccc;
  z-index: 1;
}
.bose-imageGallery .bose-imageGallery__nav .slick-dots {
  padding-top: 10px;
}
.bose-imageGallery .bose-imageGallery__nav .slick-dots li button:before {
  font-size: 8px;
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-imageGallery .bose-imageGallery__nav .slick-dots {
    display: none !important;
  }
}
@media screen and (min-width: 901px) {
  .bose-imageGallery .bose-imageGallery__nav .slick-dots {
    display: none !important;
  }
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-imageGallery .bose-imageGallery__nav .slick-dots {
    position: relative;
    z-index: 1;
    top: -10px;
    display: block !important;
  }
}
.bose-imageGallery .bose-imageGallery__nav .slick-slide img {
  padding: 4px 0 4px 0;
  width: 100%;
  max-width: 150px;
  min-width: 50px;
}
.bose-imageGallery .bose-imageGallery__nav .bose-imageGallery__navSlide--active {
  -webkit-filter: opacity(0.5);
  filter: opacity(0.5);
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose IconLoader
 ============

 General IconLoader
 -------
 ```
  <div class="bose-iconLoader">
      <p class="bose-iconLoader__text"></p>
      <div class="bose-iconLoader__spinner"></div>
  </div>
*/
.bose-iconLoader {
  display: none;
}
.bose-iconLoader .bose-iconLoader__text {
  margin-bottom: 10px;
  text-align: center;
}
.bose-iconLoader .bose-iconLoader__spinner {
  margin: auto;
  width: 70px;
  height: 70px;
  border: solid 8px rgba(0, 0, 0, 0.08);
  border-top-color: rgba(0, 0, 0, 0.2);
  -moz-border-radius: 35px;
  -webkit-border-radius: 35px;
  border-radius: 35px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-animation: spin 1s infinite linear;
  -moz-animation: spin 1s infinite linear;
  -ms-animation: spin 1s infinite linear;
  animation: spin 1s infinite linear;
}

@-webkit-keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-moz-keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-ms-keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
Bose Header
============

 ```
<div class="bose-header">
    <div class="bose-header__topBar bose-headerTopBar">
        <div class="bose-header__logoBackgroundColor"></div>
        <div class="bose-headerTopBar__container clearfix">
            <div class="bose-headerTopBar__left">
                <div class="bose-logo"><img width="135" height="48" title="Bose logo" src="/etc/designs/bose/base/clientlibs/images/bose_logo.svg"></div>
            </div>
            <div class="bose-headerTopBar__right">
                <!-- search box -->
                <div class="bose-headerTopBar__searchForm hide-small">
                    <form class="bose-singleInputForm bose-singleInputForm--bright">
                        <label style="display: none;" class="bose-singleInputForm__label">search site</label>
                        <input class="bose-singleInputForm__input" type="text" value="" placeholder="search...">
                        <input class="bose-singleInputForm__submit" type="submit" value="search">
                    </form>
                </div>
                <div class="bose-headerTopBar__iconBtn hide-small"><a href="javascript:;" id="bose-shopping-cart-icon" class="bose-iconBtn"><i class="fa fa-shopping-cart"></i></a></div>
                <div class="bose-headerTopBar__iconBtn hide-small"><a href="javascript:;" id="bose-dealer-icon" class="bose-iconBtn bose-iconBtn--separatorLeft"><i class="fa fa-map-marker"></i></a></div>
                <div class="bose-headerTopBar__iconBtn hide-small"><a href="javascript:;" id="bose-phone-icon" class="bose-iconBtn bose-iconBtn--separatorLeft"><i class="fa fa-phone"></i></a></div>
                <div class="bose-headerTopBar__iconBtn bose-headerTopBar__iconBtn--mobile hide show-small "><a href="javascript:;" id="bose-navigation-icon" class="bose-iconBtn bose-iconBtn--forMobile bose-iconBtn--active"><i class="fa fa-list"></i></a></div>
            </div>
        </div>
    </div>
    <div class="bose-header__navBar bose-navBar grid-12 no-gutter">
        <div class="bose-navBar__container clearfix">
            <div id="bose-navigation">
                <div class="bose-mobile-icons hide  show-small">
                    <i id="bose-search-icon" class="fa fa-search fa-2x  mobile-icon-active"></i>
                    <i id="bose-phone-icon" class="fa fa-phone fa-2x  mobile-icon"></i>
                    <i id="bose-dealer-icon" class="fa fa-map-marker fa-2x  mobile-icon"></i>
                    <i id="bose-shopping-cart-icon" class="fa fa-shopping-cart fa-2x  mobile-icon"></i>
                </div>
                <!-- search box -->
                <div class="bose-mobile-search hide show-small clearfix">
                    <div class="grid-12 show-inline">
                        <label for="mobile-search">Search site</label>
                        <span class="grid-11 no-gutter bose-inputFieldContainer bose-inputFieldContainer--bright">
                            <input type="text" id="mobile-search" placeholder="search..."></span>
                            <span class="grid-1 no-gutter">
                                <input type="submit" value="Search" class="bright">
                            </span>
                        </div>
                    </div>
                    <ul aria-hidden="true" class="bose-navigation  show-small">
                        <li class="menu-item grid-small-12 no-gutter">
                            <a href="/content/consumer-products/global/index/products/wave_systems.html" title="wave_systems" class=" grid-small-11">
                                <span class="menu-item__label">
                                    wave_systems
                                </span>
                            </a>
                            <span class="expand-menu-item grid-small-1 float-right hide show-small ">+</span>
                            <ul aria-hidden="true" class="bose-navigation  show-small">
                                <li class="menu-item grid-small-12 no-gutter">
                                    <a href="/content/consumer-products/global/index/products/wave_systems/wave_music_systems.html" title="wave_music_systems" class=" grid-small-12">
                                        <span class="menu-item__label">
                                            wave_music_systems
                                        </span>
                                    </a>
                                </li>
                                <li class="menu-item grid-small-12 no-gutter">
                                    <a href="/content/consumer-products/global/index/products/wave_systems/acoustic_wave_music_systems.html" title="acoustic_wave_music_systems" class=" grid-small-12">
                                        <span class="menu-item__label">
                                          acoustic_wave_music_systems
                                        </span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="menu-item grid-small-12 no-gutter">
                            <a href="/content/consumer-products/global/index/products/headphones_and_headsets.html" title="headphones_and_headsets" class=" grid-small-11">
                                <span class="menu-item__label menu-item__label--active">
                                    headphones_and_headsets
                                </span>
                            </a>
                            <span class="expand-menu-item grid-small-1 float-right hide show-small ">+</span>
                            <ul aria-hidden="true" class="bose-navigation  show-small">
                                <li class="menu-item grid-small-12 no-gutter">
                                    <a href="/content/consumer-products/global/index/products/headphones_and_headsets/noise_cancelling_headphones.html" title="noise_cancelling_headphones" class=" grid-small-12">
                                        <span class="menu-item__label">
                                          noise_cancelling_headphones
                                        </span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="menu-item hide show-small grid-small-12 no-gutter-small menu-item--dark"><a href="#" class="grid-medium-10 grid-small-10"><span class="menu-item__label menu-item__label--active">Support</span></a></li><li class="menu-item menu-item--hasSub hide show-small grid-small-12 no-gutter-small menu-item--dark"><a class="grid-medium-10 grid-small-10"><span class="menu-item__label menu-item__label--active">Shoppers guide</span></a><span class="expand-menu-item grid-small-1 float-right hide show-small">+</span><ul class="hide">
                        <li class="bose-list__listitem menu-item menu-item--hasSub hide show-small grid-small-12 no-gutter-small"><a href="#" class="menu-item__label">Shop online</a></li>
                        <li class="bose-list__listitem menu-item menu-item--hasSub hide show-small grid-small-12 no-gutter-small"><a href="#" class="menu-item__label">Store locator</a></li>
                        <li class="bose-list__listitem menu-item menu-item--hasSub hide show-small grid-small-12 no-gutter-small"><a href="#" class="menu-item__label">Reserve and Collect</a></li>
                        <li class="bose-list__listitem menu-item menu-item--hasSub hide show-small grid-small-12 no-gutter-small"><a href="#" class="menu-item__label">Order by phone</a></li>
                        <li class="bose-list__listitem menu-item menu-item--hasSub hide show-small grid-small-12 no-gutter-small"><a href="#" class="menu-item__label">Terms of sale</a></li>
                    </ul></li></ul>
                </div>
            </div>
        </div>
    </div>
 ```
*/
/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
Bose Navigation bar
============

NavBar
 ------
 ```
 <div class="bose-navBar">
    <a href="javascript:;" class="bose-navBar__logo"><img border=0 src="/etc/designs/bose/base/clientlibs/images/logo_white-on-black.svg" /></a>
    <ul class="bose-navBar__items">
      <li class="bose-navBar__item -active">
        <a class="bose-navBar__btn" href="javascript">Featured</a>
        <div class="bose-navBar__itemFoldout">
          bladiebla
        </div>
      </li>
      <li class="bose-navBar__item">
        <a class="bose-navBar__btn" href="javascript">Headphones</a>
        <div class="bose-navBar__itemFoldout">
          bladiebla
        </div>
      </li>
      <li class="bose-navBar__item">
        <a class="bose-navBar__btn" href="javascript">Speakers</a>
        <div class="bose-navBar__itemFoldout">
          bladiebla
        </div>
      </li>
    </ul>
    <div class="bose-navBar__search">
      <a href="javascript"><span>Search</span></a>
      <div class="bose-navBar__itemFoldout">
        bladiebla
      </div>
    </div>
 </div>
 ```
*/
.bose-navBar {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 20px auto;
  position: relative;
  z-index: 9000;
  max-width: 960px;
  width: 100%;
  border: 1px solid #cccccc;
  height: 40px;
}
.bose-navBar .bose-navBar__shoppingCartArea {
  line-height: 40px;
  float: right;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-navBar .bose-navBar__shoppingCartArea {
    width: 50px;
  }
}
.bose-navBar .bose-navBar__shoppingCartArea.bose-navBar__icon {
  margin: 0 7px;
}
.bose-navBar .bose-navBar__shoppingCartArea.bose-navBar__icon:before {
  vertical-align: middle;
}
.bose-navBar .bose-navBar__shoppingCartArea.bose-navBar__icon span {
  padding-top: 2px;
  padding-left: 2px;
  letter-spacing: 0.1em;
  float: right;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-navBar {
    *zoom: 1;
    perspective: 1000px;
    transition: all 150ms linear 0s;
    margin: 0 auto 0 auto;
    height: 122px;
    overflow: visible;
    border: 0 none;
    padding-top: 5px;
    /* the 5 px that the logo is positioned up */
  }
  .bose-navBar:after {
    content: "";
    display: table;
    clear: both;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-navBar {
    *zoom: 1;
    perspective: 1000px;
    transition: all 150ms linear 0s;
    margin: 0 auto 0 auto;
    height: 122px;
    overflow: visible;
    border: 0 none;
    padding-top: 5px;
    /* the 5 px that the logo is positioned up */
  }
  .bose-navBar:after {
    content: "";
    display: table;
    clear: both;
  }
}
.bose-navBar a.bose-navBar__btn, .bose-navBar a.bose-navBar__btn:hover, .bose-navBar a.bose-navBar__btn:visited, .bose-navBar a.bose-navBar__btn:active {
  text-decoration: none;
  text-transform: uppercase;
  display: table-cell;
  vertical-align: middle;
  height: 38px;
  box-sizing: border-box;
  outline: none;
}
.bose-navBar a.bose-navBar__btn:hover {
  padding-top: 5px;
  border-bottom: 5px solid;
}
.bose-navBar .bose-navBar__hamburger {
  position: relative;
  float: left;
  margin: 14px 7px 0 7px;
  display: none;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-navBar .bose-navBar__hamburger {
    display: inline-block;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-navBar .bose-navBar__hamburger {
    display: inline-block;
  }
}
.bose-navBar .bose-navBar__logo {
  float: left;
  height: 38px;
}
.bose-navBar .bose-navBar__logo img {
  height: 38px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-navBar .bose-navBar__logo {
    height: 35px;
    overflow: hidden;
    padding-top: 10px;
    position: relative;
    top: -5px;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-navBar .bose-navBar__logo {
    height: 35px;
    overflow: hidden;
    padding-top: 10px;
    position: relative;
    top: -5px;
  }
}
.bose-navBar .bose-navBar__items {
  overflow: hidden;
  *zoom: 1;
  float: left;
  list-style-type: none;
  list-style-position: inside;
  margin: 0;
  padding: 0;
  min-height: 38px;
  display: table;
  max-width: 745px;
  /* for when there are more menuitems then the bar is wide */
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-navBar .bose-navBar__items {
    position: absolute;
    left: -100%;
    width: 100%;
    top: 95px;
    height: auto;
    margin-right: 0;
    background-color: #333;
    padding-top: 25px;
    transform-origin: right top 0;
    transform: rotateY(-50deg);
    transform-style: preserve-3d;
    transition: all 150ms linear 0s;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .bose-navBar .bose-navBar__items a.bose-navBar__btn, .bose-navBar .bose-navBar__items a.bose-navBar__btn:hover, .bose-navBar .bose-navBar__items a.bose-navBar__btn:visited, .bose-navBar .bose-navBar__items a.bose-navBar__btn:active {
    text-transform: none;
    padding: 10px;
    margin: 0;
    position: relative;
    letter-spacing: 0.1em;
    outline: none;
  }
  .bose-navBar .bose-navBar__items.-menuOpenMob {
    transform: rotateY(0deg) !important;
  }
  .bose-navBar .bose-navBar__items.-menuOpenMob .bose-navBar__item {
    float: none;
    display: block;
    position: relative;
    width: auto;
    margin-left: 0;
    padding-left: 25px;
    padding-right: 25px;
  }
  .bose-navBar .bose-navBar__items.-menuOpenMob .bose-navBar__item .bose-navBar__itemFoldout {
    visibility: visible;
    /* yip visibility. on display the menuitems get 1x larger :( */
    position: static;
    width: auto;
    /*jQuery UI overrules*/
    padding: 0;
  }
  .bose-navBar .bose-navBar__items.-menuOpenMob .bose-navBar__item a.bose-navBar__btn, .bose-navBar .bose-navBar__items.-menuOpenMob .bose-navBar__item a.bose-navBar__btn:hover, .bose-navBar .bose-navBar__items.-menuOpenMob .bose-navBar__item a.bose-navBar__btn:visited, .bose-navBar .bose-navBar__items.-menuOpenMob .bose-navBar__item a.bose-navBar__btn:active {
    outline: none;
    text-transform: uppercase;
    display: block;
    height: auto;
    padding-right: 20px;
    /*jQuery UI overrules*/
    padding-left: 0;
  }
  .bose-navBar .bose-navBar__items.-menuOpenMob .bose-navBar__item a.bose-navBar__btn:hover {
    border-bottom: 0 none #00d9d9;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-navBar .bose-navBar__items {
    position: absolute;
    left: -100%;
    width: 100%;
    top: 95px;
    height: auto;
    margin-right: 0;
    background-color: #333;
    padding-top: 25px;
    transform-origin: right top 0;
    transform: rotateY(-50deg);
    transform-style: preserve-3d;
    transition: all 150ms linear 0s;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .bose-navBar .bose-navBar__items a.bose-navBar__btn, .bose-navBar .bose-navBar__items a.bose-navBar__btn:hover, .bose-navBar .bose-navBar__items a.bose-navBar__btn:visited, .bose-navBar .bose-navBar__items a.bose-navBar__btn:active {
    text-transform: none;
    padding: 10px;
    margin: 0;
    position: relative;
    letter-spacing: 0.1em;
    outline: none;
  }
  .bose-navBar .bose-navBar__items.-menuOpenMob {
    transform: rotateY(0deg) !important;
  }
  .bose-navBar .bose-navBar__items.-menuOpenMob .bose-navBar__item {
    float: none;
    display: block;
    position: relative;
    width: auto;
    margin-left: 0;
    padding-left: 25px;
    padding-right: 25px;
  }
  .bose-navBar .bose-navBar__items.-menuOpenMob .bose-navBar__item .bose-navBar__itemFoldout {
    visibility: visible;
    /* yip visibility. on display the menuitems get 1x larger :( */
    position: static;
    width: auto;
    /*jQuery UI overrules*/
    padding: 0;
  }
  .bose-navBar .bose-navBar__items.-menuOpenMob .bose-navBar__item a.bose-navBar__btn, .bose-navBar .bose-navBar__items.-menuOpenMob .bose-navBar__item a.bose-navBar__btn:hover, .bose-navBar .bose-navBar__items.-menuOpenMob .bose-navBar__item a.bose-navBar__btn:visited, .bose-navBar .bose-navBar__items.-menuOpenMob .bose-navBar__item a.bose-navBar__btn:active {
    outline: none;
    text-transform: uppercase;
    display: block;
    height: auto;
    padding-right: 20px;
    /*jQuery UI overrules*/
    padding-left: 0;
  }
  .bose-navBar .bose-navBar__items.-menuOpenMob .bose-navBar__item a.bose-navBar__btn:hover {
    border-bottom: 0 none #00d9d9;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-navBar .bose-navBar__items {
    left: -500px;
    width: 500px;
  }
}
.bose-navBar .bose-navBar__item {
  margin-left: 20px;
  display: table;
  float: left;
}
.bose-navBar .bose-navBar__item:hover a.bose-navBar__btn, .bose-navBar .bose-navBar__item:hover a.bose-navBar__btn:hover, .bose-navBar .bose-navBar__item:hover a.bose-navBar__btn:visited, .bose-navBar .bose-navBar__item:hover a.bose-navBar__btn:active, .bose-navBar .bose-navBar__item:active a.bose-navBar__btn, .bose-navBar .bose-navBar__item:active a.bose-navBar__btn:hover, .bose-navBar .bose-navBar__item:active a.bose-navBar__btn:visited, .bose-navBar .bose-navBar__item:active a.bose-navBar__btn:active {
  padding-top: 5px;
  border-bottom: 5px solid #00d9d9;
  outline: none;
}
.bose-navBar .bose-navBar__item:hover .bose-navBar__itemFoldout, .bose-navBar .bose-navBar__item:active .bose-navBar__itemFoldout {
  border: 1px solid #cccccc;
  border-top: none;
  visibility: visible;
  /* yip visibility. on display the menuitems get 1px larger :( */
}
.bose-navBar .bose-navBar__itemFoldout {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  visibility: hidden;
  position: absolute;
  left: -1px;
  /* 1px for the left-border of  */
  right: -1px;
  /* don't set width: 100% */
  top: 38px;
}
.bose-navBar .bose-navBar__mobActions {
  display: none;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-navBar .bose-navBar__mobActions {
    overflow: hidden;
    *zoom: 1;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    transform-origin: right top 0;
    transform: rotateY(-50deg);
    transform-style: preserve-3d;
    transition: all 150ms linear 0s;
    display: block;
    position: absolute;
    top: 0;
    left: -100%;
    height: 95px;
    padding: 0 20px;
    width: 100%;
  }
  .bose-navBar .bose-navBar__mobActions.-menuOpenMob {
    transform: rotateY(0deg) !important;
  }
  .bose-navBar .bose-navBar__mobActions li {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding-right: 20px;
    height: 45px;
    padding-top: 10px;
  }
  .bose-navBar .bose-navBar__mobActions li.bose-navBar__mobActionsCloseIcon {
    float: none;
    display: block;
    height: 50px;
    position: relative;
    top: 10px;
    left: 10px;
    font-size: 8px;
  }
  .bose-navBar .bose-navBar__mobActions li.bose-navBar__mobActionsItem.-right {
    float: right;
    padding-right: 0;
    padding-left: 20px;
  }
  .bose-navBar .bose-navBar__mobActions li a, .bose-navBar .bose-navBar__mobActions li a:hover, .bose-navBar .bose-navBar__mobActions li a:active, .bose-navBar .bose-navBar__mobActions li a a:visited {
    text-decoration: none;
    display: block;
  }
  .bose-navBar .bose-navBar__mobActions li .bose-navBar__iconAndText {
    display: inline-block;
    vertical-align: middle;
    padding-right: 5px;
  }
  .bose-navBar .bose-navBar__mobActions li .bose-navBar__iconAndText .bose-navBar__iconAndTextText {
    position: relative;
    top: -4px;
    left: 4px;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-navBar .bose-navBar__mobActions {
    overflow: hidden;
    *zoom: 1;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    transform-origin: right top 0;
    transform: rotateY(-50deg);
    transform-style: preserve-3d;
    transition: all 150ms linear 0s;
    display: block;
    position: absolute;
    top: 0;
    left: -100%;
    height: 95px;
    padding: 0 20px;
    width: 100%;
  }
  .bose-navBar .bose-navBar__mobActions.-menuOpenMob {
    transform: rotateY(0deg) !important;
  }
  .bose-navBar .bose-navBar__mobActions li {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding-right: 20px;
    height: 45px;
    padding-top: 10px;
  }
  .bose-navBar .bose-navBar__mobActions li.bose-navBar__mobActionsCloseIcon {
    float: none;
    display: block;
    height: 50px;
    position: relative;
    top: 10px;
    left: 10px;
    font-size: 8px;
  }
  .bose-navBar .bose-navBar__mobActions li.bose-navBar__mobActionsItem.-right {
    float: right;
    padding-right: 0;
    padding-left: 20px;
  }
  .bose-navBar .bose-navBar__mobActions li a, .bose-navBar .bose-navBar__mobActions li a:hover, .bose-navBar .bose-navBar__mobActions li a:active, .bose-navBar .bose-navBar__mobActions li a a:visited {
    text-decoration: none;
    display: block;
  }
  .bose-navBar .bose-navBar__mobActions li .bose-navBar__iconAndText {
    display: inline-block;
    vertical-align: middle;
    padding-right: 5px;
  }
  .bose-navBar .bose-navBar__mobActions li .bose-navBar__iconAndText .bose-navBar__iconAndTextText {
    position: relative;
    top: -4px;
    left: 4px;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-navBar .bose-navBar__mobActions {
    left: -500px;
    width: 500px;
  }
}
.bose-navBar .bose-navBar__socialBtn {
  display: inline-block;
  margin-bottom: 0;
  margin-right: 10px;
}
.bose-navBar .bose-navBar__mobileCopyright {
  padding-top: 65px;
  text-align: right;
  display: block;
  text-transform: uppercase;
}
.bose-navBar .bose-navBar__mobileEnd {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: none;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-navBar .bose-navBar__mobileEnd {
    display: block;
    padding-right: 25px;
    padding-left: 25px;
  }
  .bose-navBar .bose-navBar__mobileEnd.-menuOpenMob {
    transform: rotateY(0deg) !important;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-navBar .bose-navBar__mobileEnd {
    display: block;
    padding-right: 25px;
    padding-left: 25px;
  }
  .bose-navBar .bose-navBar__mobileEnd.-menuOpenMob {
    transform: rotateY(0deg) !important;
  }
}
.bose-navBar .bose-navBar__search {
  float: right;
  display: table;
}
.bose-navBar .bose-navBar__search a, .bose-navBar .bose-navBar__search a:hover, .bose-navBar .bose-navBar__search a:visited, .bose-navBar .bose-navBar__search a:active {
  display: block;
  vertical-align: middle;
  text-decoration: none;
  text-align: center;
  margin-right: 10px;
  margin-top: 10px;
}
.bose-navBar .bose-navBar__search a span, .bose-navBar .bose-navBar__search a:hover span, .bose-navBar .bose-navBar__search a:visited span, .bose-navBar .bose-navBar__search a:active span {
  text-indent: -9000px;
  display: inline-block;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-navBar .bose-navBar__search a, .bose-navBar .bose-navBar__search a:hover, .bose-navBar .bose-navBar__search a:visited, .bose-navBar .bose-navBar__search a:active {
    display: none;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-navBar .bose-navBar__search a, .bose-navBar .bose-navBar__search a:hover, .bose-navBar .bose-navBar__search a:visited, .bose-navBar .bose-navBar__search a:active {
    display: none;
  }
}
.bose-navBar .bose-navBar__search a .bose-icon, .bose-navBar .bose-navBar__search a:hover .bose-icon, .bose-navBar .bose-navBar__search a:visited .bose-icon, .bose-navBar .bose-navBar__search a:active .bose-icon {
  bottom: 4px;
  right: 4px;
}
.bose-navBar .bose-navBar__search .bose-navBar__itemFoldout {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  visibility: hidden;
  position: absolute;
  left: -1px;
  right: -1px;
  top: 38px;
  width: auto;
  border: 1px solid #cccccc;
  border-top: 0 none;
  padding: 20px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-navBar .bose-navBar__search .bose-navBar__itemFoldout {
    visibility: visible;
    position: static;
    width: 100%;
    padding: 10px;
    border: 0 none;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-navBar .bose-navBar__search .bose-navBar__itemFoldout {
    visibility: visible;
    position: static;
    width: 100%;
    padding: 10px;
    border: 0 none;
  }
}
.bose-navBar .bose-navBar__search .bose-navBar__itemFoldout--withCloseIcon {
  padding: 20px 50px 20px 20px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-navBar .bose-navBar__search .bose-navBar__itemFoldout--withCloseIcon {
    padding: 20px 10px;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-navBar .bose-navBar__search .bose-navBar__itemFoldout--withCloseIcon {
    padding: 20px 10px;
  }
}
.bose-navBar .bose-navBar__search .bose-navBar__itemFoldout--withCloseIcon .bose-navBar__itemFoldoutCloseIcon {
  position: absolute;
  right: 2px;
  top: 21px;
}
.bose-navBar .bose-navBar__search.-active .bose-navBar__itemFoldout {
  visibility: visible;
  /* yip visibility. on display the menuitems get 1x larger :( */
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-navBar .bose-navBar__search {
    float: none;
    clear: left;
    width: 100%;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-navBar .bose-navBar__search {
    float: none;
    clear: left;
    width: 100%;
  }
}

/*http://stackoverflow.com/questions/5060923/how-to-stretch-html-css-horizontal-navigation-items-evenly-and-fully-across-a*/
.bose-mobile-icons:after {
  content: '';
  display: inline-block;
  width: 100%;
}

/*
Bose Alert bar
============

Alert bar
------
 ```
      <div class="bose-alertBar">
          <div class="bose-alertBar__message">Free shipping on all our products.</div>
      </div>
 ```

Alert bar with close functionality and large text message
------
 ```
      <div class="bose-alertBar bose-alertBar--closeable">
          <div class="bose-alertBar__message">Our website uses cookies to provide you with an optimized experience by continuing you agree to its use. Some more text here so we have two lines in the alert bar.</div>
          <div class="bose-alertBar__closeArea">
              <a class="bose-alertBar__closeAreaIcon"><i class="fa fa-times"></i></a>
          </div>
      </div>
 ```

 Alert bar with close functionality
------
 ```
      <div class="bose-alertBar bose-alertBar--closeable">
          <div class="bose-alertBar__message">Single line message</div>
          <div class="bose-alertBar__closeArea">
              <a class="bose-alertBar__closeAreaIcon"><i class="fa fa-times"></i></a>
          </div>
      </div>

 ```

*/
.bose-alertBar {
  *zoom: 1;
  text-transform: uppercase;
  font-family: "Bose_Medium", Verdana;
  font-size: 12px;
  display: none;
  /*
    In this case, colornames in modifier is allowed because they're not attached to the design.
    A red alertbar will always be a red alertbar
  */
}
.bose-alertBar:after {
  content: "";
  display: table;
  clear: both;
}
.bose-alertBar .bose-alertBar__container {
  *zoom: 1;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: table;
  width: 100%;
  padding: 11px;
  margin: 0 auto;
  max-width: 1000px;
  position: relative;
}
.bose-alertBar .bose-alertBar__container:after {
  content: "";
  display: table;
  clear: both;
}
.bose-alertBar.bose-alertBar--fullWidth .bose-alertBar__container {
  max-width: 100%;
}
.bose-alertBar .bose-alertBar__message {
  color: #FFFFFF;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  margin: auto;
  position: relative;
  width: 100%;
  max-width: 1000px;
}
.bose-alertBar.bose-alertBar--closeable .bose-alertBar__message {
  width: 99%;
  display: table-cell;
}
.bose-alertBar .bose-alertBar__closeArea {
  display: table-cell;
  width: auto;
}
.bose-alertBar .bose-alertBar__closeArea a, .bose-alertBar .bose-alertBar__closeArea a:hover, .bose-alertBar .bose-alertBar__closeArea a:visited, .bose-alertBar .bose-alertBar__closeArea a:active {
  text-decoration: none;
  cursor: pointer;
}
.bose-alertBar .bose-alertBar__closeArea .bose-alertBar__closeAreaIcon {
  font-size: 7px;
}
.bose-alertBar .bose-alertBar__closeArea .bose-alertBar__closeAreaIcon i {
  vertical-align: middle;
}
.bose-alertBar.bose-alertBar--green .bose-alertBar__container {
  background-color: #00b285;
}
.bose-alertBar.bose-alertBar--yellow .bose-alertBar__container {
  background-color: #f2af00;
}
.bose-alertBar.bose-alertBar--orange .bose-alertBar__container {
  background-color: #f06b00;
}
.bose-alertBar.bose-alertBar--red .bose-alertBar__container {
  background-color: #ba2d26;
}
.bose-alertBar.bose-alertBar--grey .bose-alertBar__container {
  background-color: #9b9b8c;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
Bose Navigation bar foldout
============

NavBar foldout
 ------
 ```
<div class="bose-navBarFoldout">
  <ul class="bose-navBarFoldout__menuitems">
    <li><a href="#">MenuItem</a></li>
    <li><a href="#">MenuItem</a></li>
    <li><a href="#">MenuItem</a></li>
    <li><a href="#">MenuItem</a></li>
    <li><a href="#">MenuItem</a></li>
    <li><a href="#">MenuItem</a></li>
    <li><a href="#">MenuItem</a></li>
    <li><a href="#">MenuItem</a></li>
  </ul>
  <div class="bose-navBarFoldout__promoBanners">
    <a href="#"><img src="http://lorempixel.com/200/80/abstract/" width="200" height="80" border="0" /></a>
    <a href="#"><img src="http://lorempixel.com/200/80/abstract/" width="200" height="80" border="0" /></a>
  </div>
</div>
 ```
*/
.bose-navBarFoldout {
  padding: 30px 20px 10px 20px;
  /* design says padding:30px, the rest values are coming from the child elements */
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-navBarFoldout {
    padding: 0;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-navBarFoldout {
    padding: 0;
  }
}
.bose-navBarFoldout .bose-navBarFoldout__menuitems .bose-navBarFoldout__menuitem {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 20px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-navBarFoldout .bose-navBarFoldout__menuitems .bose-navBarFoldout__menuitem {
    padding: 10px 0;
    float: none;
    width: 100%;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-navBarFoldout .bose-navBarFoldout__menuitems .bose-navBarFoldout__menuitem {
    padding: 10px 0;
    float: none;
    width: 100%;
  }
}
.bose-navBarFoldout .bose-navBarFoldout__menuitems .bose-navBarFoldout__menuitem a, .bose-navBarFoldout .bose-navBarFoldout__menuitems .bose-navBarFoldout__menuitem a:visited, .bose-navBarFoldout .bose-navBarFoldout__menuitems .bose-navBarFoldout__menuitem a:active, .bose-navBarFoldout .bose-navBarFoldout__menuitems .bose-navBarFoldout__menuitem a:hover {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-transform: uppercase;
  display: block;
  text-decoration: none;
  outline: none;
  position: relative;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-navBarFoldout .bose-navBarFoldout__menuitems .bose-navBarFoldout__menuitem a, .bose-navBarFoldout .bose-navBarFoldout__menuitems .bose-navBarFoldout__menuitem a:visited, .bose-navBarFoldout .bose-navBarFoldout__menuitems .bose-navBarFoldout__menuitem a:active, .bose-navBarFoldout .bose-navBarFoldout__menuitems .bose-navBarFoldout__menuitem a:hover {
    text-transform: none;
    padding: 0 20px 0 0;
    margin: 0;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-navBarFoldout .bose-navBarFoldout__menuitems .bose-navBarFoldout__menuitem a, .bose-navBarFoldout .bose-navBarFoldout__menuitems .bose-navBarFoldout__menuitem a:visited, .bose-navBarFoldout .bose-navBarFoldout__menuitems .bose-navBarFoldout__menuitem a:active, .bose-navBarFoldout .bose-navBarFoldout__menuitems .bose-navBarFoldout__menuitem a:hover {
    text-transform: none;
    padding: 0 20px 0 0;
    margin: 0;
  }
}
.bose-navBarFoldout .bose-navBarFoldout__menuitems .bose-navBarFoldout__menuitem a .bose-navBarFoldout__menuitemLabel, .bose-navBarFoldout .bose-navBarFoldout__menuitems .bose-navBarFoldout__menuitem a:visited .bose-navBarFoldout__menuitemLabel, .bose-navBarFoldout .bose-navBarFoldout__menuitems .bose-navBarFoldout__menuitem a:active .bose-navBarFoldout__menuitemLabel, .bose-navBarFoldout .bose-navBarFoldout__menuitems .bose-navBarFoldout__menuitem a:hover .bose-navBarFoldout__menuitemLabel {
  position: relative;
  top: 3px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-navBarFoldout .bose-navBarFoldout__menuitems .bose-navBarFoldout__menuitem a .bose-navBarFoldout__menuitemImg, .bose-navBarFoldout .bose-navBarFoldout__menuitems .bose-navBarFoldout__menuitem a:visited .bose-navBarFoldout__menuitemImg, .bose-navBarFoldout .bose-navBarFoldout__menuitems .bose-navBarFoldout__menuitem a:active .bose-navBarFoldout__menuitemImg, .bose-navBarFoldout .bose-navBarFoldout__menuitems .bose-navBarFoldout__menuitem a:hover .bose-navBarFoldout__menuitemImg {
    display: none;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-navBarFoldout .bose-navBarFoldout__menuitems .bose-navBarFoldout__menuitem a .bose-navBarFoldout__menuitemImg, .bose-navBarFoldout .bose-navBarFoldout__menuitems .bose-navBarFoldout__menuitem a:visited .bose-navBarFoldout__menuitemImg, .bose-navBarFoldout .bose-navBarFoldout__menuitems .bose-navBarFoldout__menuitem a:active .bose-navBarFoldout__menuitemImg, .bose-navBarFoldout .bose-navBarFoldout__menuitems .bose-navBarFoldout__menuitem a:hover .bose-navBarFoldout__menuitemImg {
    display: none;
  }
}
.bose-navBarFoldout .bose-navBarFoldout__menuitems .bose-navBarFoldout__menuitem a:hover {
  text-decoration: underline;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-navBarFoldout .bose-navBarFoldout__menuitems .bose-navBarFoldout__menuitem a:hover {
    text-decoration: none;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-navBarFoldout .bose-navBarFoldout__menuitems .bose-navBarFoldout__menuitem a:hover {
    text-decoration: none;
  }
}
.bose-navBarFoldout .bose-navBarFoldout__promoBanners {
  float: none;
  clear: both;
  margin: 10px 10px 20px 10px;
  padding-top: 20px;
}

/*
Bose Service bar
============

Service bar
------
 ```
      <div class="bose-serviceBar">
        <div class="bose-serviceBar__leftArea">
          <i class="bose-serviceBar__icon fa fa-envelope-o"></i>
          <span>Sign up</span>
        </div>
        <div class="bose-serviceBar__rightArea">
          <a href="javascript:;" class="bose-serviceBar__icon">
            <i class="fa fa-map-marker"></i>
          </a>
          <a class="bose-serviceBar__icon" href="javascript:;">
            <i class="fa fa-phone"></i>
          </a>
          <a class="bose-serviceBar__myAccountArea" href="javascript:;">
            <i class="fa fa-user"></i>
            <span class="bose-serviceBar__myAccountAreaUserName">My username</span>
          </a>
          <a class="bose-serviceBar__shoppingCartArea" href="javascript:;">
            <i class="fa fa-shopping-cart"></i>
            <span class="bose-serviceBar__shoppingCartAreaNumItems">(31)</span>
          </a>
        </div>
      </div>
 ```

 Service bar open shopping cart
------
 ```
      <div class="bose-serviceBar">
        <div class="bose-serviceBar__leftArea">
          <i class="bose-serviceBar__icon fa fa-envelope-o"></i>
          <span>Sign up</span>
        </div>
        <div class="bose-serviceBar__rightArea">
          <a href="javascript:;" class="bose-serviceBar__icon">
            <i class="fa fa-map-marker"></i>
          </a>
          <a class="bose-serviceBar__icon" href="javascript:;">
            <i class="fa fa-phone"></i>
          </a>
          <a class="bose-serviceBar__myAccountArea" href="javascript:;">
            <i class="fa fa-user"></i>
            <span class="bose-serviceBar__myAccountAreaUserName">My username</span>
          </a>
          <div class="bose-serviceBar__shoppingCartArea bose-serviceBar__shoppingCartArea--open">
            <a href="javascript:;">
              <i class="fa fa-shopping-cart"></i>
              <span class="bose-serviceBar__shoppingCartAreaNumItems">(31)</span>
            </a>
          </div>
        </div>
      </div>
 ```
*/
.bose-serviceBar {
  font-family: "Bose_Medium", Verdana;
  font-size: 12px;
  height: 35px;
  position: relative;
}
.bose-serviceBar .bose-serviceBar__container {
  *zoom: 1;
  margin: 0 auto;
  max-width: 1000px;
}
.bose-serviceBar .bose-serviceBar__container:after {
  content: "";
  display: table;
  clear: both;
}
.bose-serviceBar.bose-serviceBar--fullWidth .bose-serviceBar__container {
  max-width: 100%;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-serviceBar {
    display: none;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-serviceBar {
    display: none;
  }
}
.bose-serviceBar a, .bose-serviceBar a:hover, .bose-serviceBar a:visited, .bose-serviceBar a:active {
  text-decoration: none;
  cursor: pointer;
}
.bose-serviceBar .bose-serviceBar__icon {
  margin: 0px 7px;
  float: left;
}
.bose-serviceBar .bose-serviceBar__icon:before {
  vertical-align: middle;
}
.bose-serviceBar .bose-serviceBar__icon .bose-serviceBar__iconText, .bose-serviceBar .bose-serviceBar__icon .bose-serviceBar__shoppingCartAreaNumItems {
  font-size: 13px;
  float: right;
  position: relative;
  top: 1px;
  left: 4px;
  letter-spacing: 0.1em;
}
.bose-serviceBar .bose-serviceBar__icon.bose-serviceBar__icon--envelope .bose-serviceBar__iconText {
  font-family: "Bose_Bold", Verdana;
}
.bose-serviceBar .bose-serviceBar__leftArea {
  float: left;
  text-transform: uppercase;
  line-height: 35px;
}
.bose-serviceBar .bose-serviceBar__rightArea {
  float: right;
  line-height: 35px;
}
.bose-serviceBar .bose-serviceBar__rightArea .bose-serviceBar__myAccountArea {
  float: left;
}
.bose-serviceBar .bose-serviceBar__rightArea .bose-serviceBar__shoppingCartArea {
  margin-left: 45px;
  float: left;
  position: relative;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
Bose bose-rectangleItem
============

bose-rectangleItem
 ------
 ```
<a href="http://www.google.com" class="bose-rectangleItem">
        <img class="bose-rectangleItem__img" src="http://lorempixel.com/300/300/technics/" width="100%" height="100%">
        <span class="bose-rectangleItem__title">Wireless</span>
    </a>
 ```
*/
.bose-rectangleItem {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  padding-bottom: 32%;
  overflow: hidden;
  float: none;
  display: block;
  font-size: 14px;
  font-family: "Bose_Medium", verdana;
}
.bose-rectangleItem:hover {
  text-decoration: none;
}
.bose-rectangleItem:hover .bose-rectangleItem__title {
  font-family: "Bose_Medium", verdana;
}
.bose-rectangleItem .bose-rectangleItem__img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
}
.bose-rectangleItem .bose-rectangleItem__title {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  bottom: 0;
  text-align: left;
  text-transform: uppercase;
  border-bottom: 6px solid transparent;
  font-family: "Bose_Medium", verdana;
  font-size: 18px;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
Bose bose-navBarPromoBanners
============

bose-navBarPromoBanners
 ------
 ```
  <ul class="bose-navBarPromoBanners grid-12">
      <li class="bose-navBarPromoBanners__banner grid-6">
          <a href="#">
              <span class="bose-rectangleItem"><img class="bose-rectangleItem__img" src="http://lorempixel.com/430/90/sports/" alt="" /></span>
          </a>
      </li>
      <li class="bose-navBarPromoBanners__banner grid-6">
          <a href="#">
              <span class="bose-rectangleItem"><img class="bose-rectangleItem__img" src="http://lorempixel.com/430/90/sports/" alt="" /></span>
          </a>
      </li>
  </ul>
 ```
*/
.bose-navBarPromoBanners .bose-navBarPromoBanners__banner {
  border-left: 1px solid #cccccc;
  padding: 0 20px;
}
.bose-navBarPromoBanners .bose-navBarPromoBanners__banner:first-child {
  border-left: 0 none;
}
.bose-navBarPromoBanners .bose-navBarPromoBanners__banner a, .bose-navBarPromoBanners .bose-navBarPromoBanners__banner a:active, .bose-navBarPromoBanners .bose-navBarPromoBanners__banner a:visited, .bose-navBarPromoBanners .bose-navBarPromoBanners__banner a:hover {
  text-decoration: none;
}

.bose-header {
  *zoom: 1;
}
.bose-header:after {
  content: "";
  display: table;
  clear: both;
}
.bose-header .input[type="submit"] {
  width: 15px;
}
.bose-header__topBar {
  display: block;
  height: 38px;
}
.bose-header__logoBackgroundColor {
  height: 48px;
  position: absolute;
  z-index: 20;
  width: 50%;
  background-color: #0066a1;
}
.bose-header__container {
  max-width: 1000px;
  margin: 0 auto;
  height: 38px;
  overflow: visible !important;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 0px 10px 0px 0px;
  *zoom: 1;
}
.bose-header__container:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-header--dark {
    border-bottom: 10px solid #1b1b1b;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-header--dark {
    border-bottom: 10px solid #1b1b1b;
  }
}
.bose-header__topActions {
  padding-top: 5px;
}
.bose-header__topActions .search-container {
  float: left;
}
.bose-header__topActions .mobile-icon {
  padding-left: 15px;
  padding-right: 15px;
  float: left;
  margin-top: 5px;
  display: inline-block;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-header__topActions .mobile-icon {
    padding: 0px;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-header__topActions .mobile-icon {
    padding: 0px;
  }
}
.bose-header__topActions .mobile-icon.left-seperator {
  border-left: 1px solid #333333;
}
.bose-header__topActions .mobile-icon#bose-navigation-icon {
  line-height: 32px;
}
.bose-header .bose-header__navBar {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  left: 0px;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}
.bose-header .bose-header__navBar.bose-header__navBar--authorMode {
  position: relative;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-header .bose-header__navBar {
    position: static;
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-header .bose-header__navBar {
    position: static;
    padding-left: 0;
    padding-right: 0;
  }
}

.bose-headerTopBar {
  background-color: #1b1b1b;
  border-bottom: 10px solid #dddddd;
}
.bose-headerTopBar__container {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 21;
  background-color: #1b1b1b;
  border-bottom: 10px solid #dddddd;
  height: 38px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-headerTopBar__container {
    border-bottom: 0 none;
    height: 48px;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-headerTopBar__container {
    border-bottom: 0 none;
    height: 48px;
  }
}
.bose-headerTopBar__left {
  float: left;
  display: table;
}
.bose-headerTopBar__right {
  float: right;
}
.bose-headerTopBar__siteName {
  display: table-cell;
  vertical-align: middle;
  padding-bottom: 10px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-headerTopBar__siteName {
    display: none;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-headerTopBar__siteName {
    display: none;
  }
}
.bose-headerTopBar__iconBtn {
  float: left;
  padding: 11px 0;
}
.bose-headerTopBar__iconBtn--mobile {
  padding: 7px 0 0;
}
.bose-headerTopBar__searchForm {
  float: left;
  padding: 7px 0;
}

/*
Bose sitename container
============
TODO: make BEM
*/
.bose-siteName-container {
  padding-top: 10px;
}

.bose-sitename-container {
  background-color: #333333;
  height: 25px;
  padding-top: 8px;
}

.bose-siteName {
  text-transform: uppercase;
}

/*
Bose logo
============
 ```
<div class="bose-logo"><img width="135" height="48" title="Bose logo" src="/etc/designs/bose/base/clientlibs/images/bose_logo.svg" /></div>
 ```
*/
.bose-logo {
  background: url("../../../designs/bose/base/clientlibs/images/logo-skew.png") top right;
  width: 180px;
  height: 48px;
  float: left;
}
.bose-logo img {
  width: 135px;
  height: 48px;
  float: right;
  padding-right: 30px;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose Footer
 ============

 General footer
 -------

 This file contains all styling rules of the footer

 ```
 <div class="bose-footer">
    <div class="bose-footer__container">
        <div class="bose-footer__list bose-list grid-3 hide-medium hide-small">
            <h4 class="bose-list__title">Shoppers guide</h4>
            <ul class="bose-list__list">
                <li class="bose-list__listitem"><a href="#">Shop online</a></li>
                <li class="bose-list__listitem"><a href="#">Store locator</a></li>
                <li class="bose-list__listitem"><a href="#">Reserve and Collect</a></li>
                <li class="bose-list__listitem"><a href="#">Order by phone</a></li>
                <li class="bose-list__listitem"><a href="#">Terms of sale</a></li>
            </ul>
        </div>
        <div class="bose-footer__list bose-list grid-3 hide-medium hide-small">
            <h4 class="bose-list__title">Already a customer</h4>
            <ul class="bose-list__list">
                <li class="bose-list__listitem"><a href="#">Support</a></li>
                <li class="bose-list__listitem"><a href="#">Product registration</a></li>
                <li class="bose-list__listitem"><a href="#">Shipping and returns</a></li>
            </ul>
        </div>
        <div class="bose-footer__emailSubscr grid-6 hide-medium hide-small">
            <h4 class="bose-footer__title">Be the first to know</h4>

            <p class="bose-footer__paragraph">Sign up for Bose emails. Get the latest on products, special offers, store events and more. Subscribe now, and WIN.</p>

            <p>&nbsp;</p>

            <div class="bose-inputFieldContainer">
                <input type="text" placeholder="E-mail address">
            </div>
            <input type="submit" class="searchIcon" value="Search">

        </div>
        <div class="bose-footer__social clear grid-6 push-6 push-medium-0 push-small-0 grid-medium-12 grid-small-12">
            <span class="bose-footer__title bose-footer__title--inline">stay connected</span>
            <a href="https://www.facebook.com/BoseBelgium?brand_redir=1"> <span class="social-media-icon fa fa-facebook fa-1x"></span></a>

            <a href="https://www.youtube.com/user/Bose"><span class="social-media-icon fa fa-youtube  fa-1x"></span></a>
            <a href="http://instagram.com/bose"><span class="social-media-icon fa fa-instagram  fa-1x"></span></a>
            <a href="https://plus.google.com/+bosebelgium/posts"><span class="social-media-icon fa fa-google-plus  fa-1x"></span></a>
        </div>
    </div>
</div>
 ```

Dark footer
-------
```
<div class="bose-footer bose-footer--dark">
    <div class="bose-footer__container">
        <div class="bose-footer__leftCol grid-7 grid-medium-12 grid-small-12">
            <div class="grid-12 bose-footer__topRow">
                <div class="bose-dropdown bose-dropdown--up grid-medium-12 grid-small-12 no-gutter-medium no-gutter-small bose-footer__language-picker">

                    <span class="grid-medium-9 grid-small-9 no-gutter bose-dropdown__label">
                        <i class="grid-medium-2 grid-small-2 bose-dropdown__flag bose-icon bose-icon--flag bose-icon--flag-"></i>
                        [Country name here]
                        <a class="hide show-inline-medium show-inline-small" href="#">
                            (CHANGE)
                        </a>
                    </span>

                    <div class="bose-dropdown__list hide">
                        <ul>
                            <li><a href="#">Country demo one</a></li>
                            <li><a href="#">Country demo longer two</a></li>
                            <li><a href="#">Country three</a></li>
                            <li><a href="#">Country demo four</a></li>
                            <li><a href="#">Country demo five</a></li>
                            <li><a href="#">six</a></li>
                        </ul>
                    </div>
                </div>

                <div class="grid-medium-12 grid-small-12 no-gutter-medium no-gutter-small bose-dropdown bose-dropdown--up bose-dropdown__list--autoShowOnMobile">
                    <span class="bose-dropdown__label">Other bose sites</span>

                    <div class="bose-dropdown__list  hide">
                        <ul>
                            <li><a href="#">Link demo one</a></li>
                            <li><a href="#">Link demo longer two</a></li>
                            <li><a href="#">Link three</a></li>
                            <li><a href="#">Link demo four</a></li>
                            <li><a href="#">Link demo five</a></li>
                            <li><a href="#">six</a></li>
                        </ul>
                    </div>

                </div>
            </div>
            <div class="hide-medium hide-small bose-linkList bose-linkList--allCaps ">
                <a href="#" class="grid-medium-12 grid-small-12">About us</a>
                <a href="#" class="grid-medium-12 grid-small-12">Our values </a>
                <a href="#" class="grid-medium-12 grid-small-12">Contact us</a>
                <a href="#" class="grid-medium-12 grid-small-12">Careers</a>
                <a href="#" class="grid-medium-12 grid-small-12">Site map</a>
                <span class="hide-medium hide-small"><a href="#" class="grid-medium-12 grid-small-12">1-800-999-2673</a></span></div>
        </div>
        <div class="grid-5 grid-medium-12 grid-small-12 bose-footer__rightCol ">
            <div class="grid-12 bose-footer__topRow ">
    </div></div></div></div>
 ```
 */
.bose-footer {
  background: #222222;
  width: 100%;
  display: block;
}
.bose-footer--dark {
  background-color: #1b1b1b;
  border-top: 1px solid #2f2f2f;
  padding: 30px 0;
}
.bose-footer__title {
  text-transform: uppercase;
  padding-bottom: 20px;
  display: block;
}
.bose-footer__title--inline {
  display: inline-block;
  padding-bottom: 0;
  padding-right: 3px;
}
.bose-footer .bose-footer__container {
  padding-top: 25px;
  padding-bottom: 25px;
  background: #222222;
  color: #cccccc;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  *zoom: 1;
}
.bose-footer .bose-footer__container:after {
  content: "";
  display: table;
  clear: both;
}
.bose-footer .bose-footer__container .bose-footer__copyrightNote {
  text-align: right;
  margin: 20px 30px;
  text-transform: uppercase;
  padding-top: 10px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-footer .bose-footer__container .bose-footer__copyrightNote {
    margin: 20px 20px;
  }
}
.bose-footer .bose-footer__container .bose-footer__copyrightNote--fullWidth {
  margin: 20px 0;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose FAQs
 ============

 faqs
 -------


 ```
<div id="faq" class="bose-faqs">
	<h3 class="bose-faqs__question">Section 1</h3>
	<div class="bose-faqs__answer">
		<p>
		Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
		ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
		amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
		odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
		</p>
	</div>
	<h3 class="bose-faqs__question">Section 2</h3>
	<div class="bose-faqs__answer">
		<p>
		Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
		purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
		velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
		suscipit faucibus urna.
		</p>
	</div>
</div>
 ```
 */
.bose-faqs {
  padding: 20px 30px;
  margin: 20px 30px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-faqs {
    padding: 20px 20px;
  }
}
.bose-faqs--fullWidth {
  padding: 20px 0;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-faqs {
    margin: 20px 20px;
  }
}
.bose-faqs--fullWidth {
  margin: 20px 0;
}
.bose-faqs .bose-faqs__question {
  outline: none;
  /*Jquery UI overrules*/
  border: none !important;
  padding: 0 30px;
  margin: 20px 0;
  background-image: none !important;
  position: relative !important;
  /**/
  max-width: 1000px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-faqs .bose-faqs__question {
    margin: 10px 0;
    padding: 0 30px;
  }
}
.bose-faqs .bose-faqs__question .bose-faqs__questionIcon {
  /*Jquery UI overrules*/
  position: absolute !important;
  left: 0 !important;
  top: auto !important;
  margin-top: 0px !important;
  text-indent: 0 !important;
  background-image: none !important;
  /**/
}
.bose-faqs .bose-faqs__answer {
  /*Jquery UI overrules*/
  border: none !important;
  padding: 0 30px;
  margin: 0 0 20px 0;
  background: none !important;
  /**/
  max-width: 1000px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-faqs .bose-faqs__answer {
    margin: 0 0 10px 0;
  }
}

/*
 Bose Expandable Content Container
 ============

 ```

<div>
    <!-- expandableContent components are placed here -->
</div>
 ```

 */
/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
.bose-expandableContentContainer {
  *zoom: 1;
  margin: 20px 30px;
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.bose-expandableContentContainer:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-expandableContentContainer {
    margin: 20px 20px;
  }
}
.bose-expandableContentContainer--fullWidth {
  margin: 20px 0;
}

/*
 Bose Expandable Content
 ============
 Expandable Content is a component that allows you to
 hide and show content on a page using jQuery slideUp and slideDown methods.
 -------

 ```
<div class="bose-expandableContent clearfix">
    <h3 class="bose-expandableContent__title">
        <i class="bose-expandableContent__icon"></i>
    </h3>
    <div class="bose-expandableContent__content">
    </div>
</div>
 ```

 */
/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
.bose-expandableContent {
  padding-bottom: 10px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-expandableContent {
    padding-bottom: 0;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-expandableContent {
    padding-bottom: 0;
  }
}
.bose-expandableContent .bose-expandableContent__title {
  margin: 20px 30px;
  cursor: pointer;
  margin-top: 14px;
  margin-bottom: 14px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-expandableContent .bose-expandableContent__title {
    margin: 20px 20px;
  }
}
.bose-expandableContent .bose-expandableContent__title--fullWidth {
  margin: 20px 0;
}
.bose-expandableContent .bose-expandableContent__title.bose-expandableContent__title--right {
  padding: 10px 0;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
.bose-expandableContent .bose-expandableContent__title.bose-expandableContent__title--right .bose-expandableContent__icon {
  float: right;
  position: relative;
  top: 5px;
  right: 10px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-expandableContent .bose-expandableContent__title.bose-expandableContent__title--right .bose-expandableContent__icon {
    top: -2px;
    right: 10px;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-expandableContent .bose-expandableContent__title.bose-expandableContent__title--right .bose-expandableContent__icon {
    top: -2px;
    right: 10px;
  }
}
.bose-expandableContent .bose-expandableContent__title.bose-expandableContent__title--left .bose-expandableContent__icon {
  float: left;
  position: relative;
  margin: 0 6px 0 6px;
}
.bose-expandableContent .bose-expandableContent__content {
  display: none;
  margin: 0 55px 0 0;
  overflow-wrap: break-word;
}
.bose-expandableContent .bose-expandableContent__content.bose-expandableContent__content--active {
  display: block;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
.s7videoviewer .s7emailshare, .s7videoviewer .s7embedshare {
  display: none;
}
.s7videoviewer.s7touchinput .s7mutablevolume .s7verticalvolume .s7knob {
  left: 18px;
}

@media screen and (min-width: 901px) {
  .bose-dynamicVideoContainer.bose-dynamicViewContainer--expandable {
    margin-left: 30px;
    min-height: 360px;
    min-width: 640px;
  }
  .bose-dynamicVideoContainer.bose-dynamicViewContainer--expandable .bose-videoContainer, .bose-dynamicVideoContainer.bose-dynamicViewContainer--expandable .bose-videoContainer__viewerContainer {
    min-height: 360px;
    min-width: 640px;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-dynamicVideoContainer.bose-dynamicViewContainer--expandable {
    margin-left: 20px;
    min-height: 270px;
    min-width: 480px;
  }
  .bose-dynamicVideoContainer.bose-dynamicViewContainer--expandable .bose-videoContainer, .bose-dynamicVideoContainer.bose-dynamicViewContainer--expandable .bose-videoContainer__viewerContainer {
    min-height: 270px;
    min-width: 480px;
  }
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-dynamicVideoContainer.bose-dynamicViewContainer--expandable {
    margin-left: 10px;
    min-height: 146px;
    min-width: 260px;
  }
  .bose-dynamicVideoContainer.bose-dynamicViewContainer--expandable .bose-videoContainer, .bose-dynamicVideoContainer.bose-dynamicViewContainer--expandable .bose-videoContainer__viewerContainer {
    min-height: 146px;
    min-width: 260px;
  }
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose Content Tile
 ============
 Content Tile
 -------
 This file contains all variants of the content tile component.
 class bose-contentTileTextBelowImage in this example changes based a user selected format selection field
 class bose-contentTile__textContentPadding is also not present in all formats
 ```
<div class="bose-contentTile">
	<a class="bose-contentTile__link" href="/.html">
		<div class="bose-contentTileTextBelowImage">
			<img class="bose-contentTile__image" src="/content/dam/Bose/search_for_jobs.jpg">
			<div class="bose-contentTile__textContent">
				<div class="bose-contentTile__textContentPadding">
					<span class="bose-contentTile__mainHeading"></span>
					<span class="bose-contentTile__subHeading"></span>
					<span class="bose-contentTile__linkText"></span>
				</div>
			</div>
		</div>
	</a>
</div>
 ```
 */
.bose-contentTile {
  position: relative;
  overflow: hidden;
  clear: both;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-contentTile {
    border-left: none;
  }
}
.bose-contentTile .bose-contentTile__link:hover {
  text-decoration: none;
}
.bose-contentTile .bose-contentTileImageContainer {
  width: 100%;
  height: 100%;
}
.bose-contentTile img.bose-contentTile__image {
  float: left;
  position: relative;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-contentTile.-wide21 img.bose-contentTile__image {
    height: 100%;
    width: 200%;
    overflow: hidden;
  }
  .bose-contentTile.-wide21 img.bose-contentTile__image.bose-contentTileImageContainer--centerFocus {
    position: relative;
    float: left;
    left: -50%;
  }
  .bose-contentTile.-wide21 img.bose-contentTile__image.bose-contentTileImageContainer--leftFocus {
    float: left;
  }
  .bose-contentTile.-wide21 img.bose-contentTile__image.bose-contentTileImageContainer--rightFocus {
    float: right;
  }
}
.bose-contentTile .bose-contentTileText {
  /* TEXT ON IMAGE FORMAT */
  /* TEXT ON IMAGE WITH BACKGROUND FORMAT */
}
.bose-contentTile .bose-contentTileText.-textBelowImage {
  padding: 5px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-contentTile .bose-contentTileText.-textBelowImage {
    padding: 5px;
  }
}
.bose-contentTile .bose-contentTileText.-textBelowImage--fullWidth {
  padding: 5px 0px;
}
.bose-contentTile .bose-contentTileText.-textBelowImage .bose-contentTile__textContent {
  padding: 8px;
  font-weight: bold;
}
.bose-contentTile .bose-contentTileText.-textBelowImage .bose-contentTile__mainHeading, .bose-contentTile .bose-contentTileText.-textBelowImage .bose-contentTile__subHeading, .bose-contentTile .bose-contentTileText.-textBelowImage .bose-contentTile__linkText {
  display: block;
}
.bose-contentTile .bose-contentTileText.-textAboveImage {
  padding: 5px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-contentTile .bose-contentTileText.-textAboveImage {
    padding: 5px;
  }
}
.bose-contentTile .bose-contentTileText.-textAboveImage--fullWidth {
  padding: 5px 0px;
}
.bose-contentTile .bose-contentTileText.-textAboveImage .bose-contentTile__image {
  margin-top: 10px;
}
.bose-contentTile .bose-contentTileText.-textAboveImage .bose-contentTile__textContent {
  padding: 0 10px 0 10px;
  font-weight: bold;
}
.bose-contentTile .bose-contentTileText.-textAboveImage .bose-contentTile__mainHeading, .bose-contentTile .bose-contentTileText.-textAboveImage .bose-contentTile__subHeading, .bose-contentTile .bose-contentTileText.-textAboveImage .bose-contentTile__linkText {
  display: block;
}
.bose-contentTile .bose-contentTileText.-textOnImage {
  position: absolute;
  bottom: 24px;
  z-index: 1;
}
.bose-contentTile .bose-contentTileText.-textOnImage .bose-contentTile__textContent {
  padding: 15px 18px;
}
.bose-contentTile .bose-contentTileText.-textOnImage .bose-contentTile__mainHeading, .bose-contentTile .bose-contentTileText.-textOnImage .bose-contentTile__subHeading, .bose-contentTile .bose-contentTileText.-textOnImage .bose-contentTile__linkText {
  display: block;
  padding-top: 3px;
}
.bose-contentTile .bose-contentTileText.-textBgOnImage {
  position: absolute;
  width: 100%;
  bottom: 0;
  z-index: 1;
}
.bose-contentTile .bose-contentTileText.-textBgOnImage .bose-contentTile__textContent {
  width: 100%;
}
.bose-contentTile .bose-contentTileText.-textBgOnImage .bose-contentTile__textContentPadding {
  padding: 20px;
}
.bose-contentTile .bose-contentTileText.-textBgOnImage .bose-contentTile__mainHeading {
  font-weight: bold;
}
.bose-contentTile .bose-contentTileText.-textBgOnImage .bose-contentTile__linkText {
  display: block;
  padding-top: 5px;
}

.bose-column__column > :first-child .bose-contentTile {
  border-left: none;
}

@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-column__column > .clear-medium-left .bose-contentTile {
    border-left: none;
  }
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose Columns
 ============

 General column
 -------

 ```
 <section class="bose-column grid-12">
    <div class="grid-12 grid-medium-12 grid-small-12" >
        content
    </div>
</section>
 ```

  Padding column
 -------

 ```
 <section class="bose-column bose-column--padding grid-12">
    <div class="grid-12 grid-medium-12 grid-small-12" >
        content
    </div>
</section>
 ```

  Border column
 -------

 ```
 <section class="bose-column bose-columnComponent--borderLeft bose-column--borderRight bose-column--borderTop bose-column--borderBottom grid-12">
    <div class="grid-12 grid-medium-12 grid-small-12" >
        content
    </div>
</section>
 ```
 */
.bose-column {
  *zoom: 1;
}
.bose-column:after {
  content: "";
  display: table;
  clear: both;
}
.bose-column .bose-column__column {
  *zoom: 1;
}
.bose-column .bose-column__column:after {
  content: "";
  display: table;
  clear: both;
}
.bose-column .bose-column__container {
  margin: 0 auto;
  max-width: 1000px;
}
.bose-column.bose-column--fullWidth .bose-column__container {
  max-width: 100%;
}
.bose-column.bose-column--padding .bose-column__container {
  padding: 20px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-column.bose-column--padding .bose-column__container {
    padding: 10px;
  }
}
@media screen and (min-width: 601px) and (max-width: 900px) {
  .bose-column.bose-column--padding .bose-column__container {
    padding: 10px;
  }
}
.bose-column.bose-column--borderLeft .bose-column__container {
  border-left: 1px solid black;
}
.bose-column.bose-column--borderRight .bose-column__container {
  border-right: 1px solid black;
}
.bose-column.bose-column--borderTop .bose-column__container {
  border-top: 1px solid black;
}
.bose-column.bose-column--borderBottom .bose-column__container {
  border-bottom: 1px solid black;
}

/**
 * Map set
 *
 * @param 	Map 	$map 		The map to use
 * @param 	String 	$key 		The key to update
 * @param 	Mixed 	$value 		The new value
 * @return 	Map 			The new map
 */
/**
 * Get the column width in percent for the global or a specific context
 *
 * @param 	int 		$columns 					The number of columns to calculate
 * @param 	int 		$context : $gridle-columns-count 	 	The context to use
 * @return 	percentage 							The width in percent
 */
/**
 *  Get a state map
 *
 * @param 	string 		$name 		The name of the state to get
 * @return 	map 				A state map object
 */
/**
 * Check if a state exist :
 *
 * @param 	string 		$name 		The name of the state to check
 * @return 	Boolean 			true is exist
 */
/**
 * Get the media queries variables :
 *
 * @param 	int 		$index 	 	The media query indes
 * @param 	String 		$var 		The media query variable name
 * @return 	String|int 			The variable value
 */
/**
 * Get a variable
 *
 * @param 	String 		$varName 				The variable name
 * @param  	String 		$stateMap-or-stateName 	 	The state name or a map state value
 * @return 	Mixed 							The finded value
 */
/**
 * Set a variable in a state
 * @param 	Mixed $stateName-or-stateIndex 	The state name of state index
 * @param  	String $var                    		Variable name to assign
 * @param  	Mixed $newValue          		The new value to assign
 * @return 	List                         			The states list (full)
 */
/**
 * Generate a column
 *
 * @param 	String 		$name 			The column name (often count)
 * @param 	int 		$columns 		The column count that the column will take
 * @param 	int 		$context 		The context on witch the with will be calculed
 * @param 	Boolean 	$generateClasses 	Set if the column has to be generated in css
 */
/**
 * Generate classname
 *
 * @param 	List 		$parrern 	The pattern to use to generate classname
 * @param 	String 		$state 		The state
 * @param 	int 		$count 		The column count
 */
/**
 * Get the media query for a particular state, or with, etc...
 *
 * @param 	Mixed 		$state-or-min-width 		The state name of the min with
 * @param 	Mixed 		$max-width 			The max width if first param is a min width
 * @return 	String 						The media query string without the @media
 */
/**
 * Get states count
 * 
 * @return 	int 	The number of states defined
 */
/**
 * Setup
 */
/**
 *  Register a clear each class
 */
/**
 * Register a special class
 */
/**
 * Register default states
 */
/**
 * Register default mobile first states :
 */
/**
 * Set the debug device (not used for now)
 * 
 * @param 	String 		$state 		The state to update
 * @para m 	String 		$device 	The device to use (iphone, etc...)
 */
/**
 * Parent clear each
 */
/**
 * Vertical align :
 */
/**
 * Show inline
 *
 * @param 	String 		$state 		The state name
 */
/**
 * Generate a custom class for all the states
 *
 * @param 	list 	$pattern 		The name pattern of the class
 * @param 	list 	$statesNames 		The states names to generate
 */
/**
 * Add default margins a component.
 * Fullwidth mode will never have horizontal margins.
 * Need important to override jQuery UI margins.
 */
/**
 * SVG Sprite settings
 */
/*http://codepen.io/dwarcher/pen/yinsq*/
/* styleguide colors: start */
/* don't use outside of this file */
/* styleguide colors: end */
/* TODO: remove: old color variables start */
/* TODO: remove: old color variables end */
/*40 = 2*20*/
/*
 Bose Custom Adaptive Image
 ============

 adaptive image
 -------


 ```
<img src="http://lorempixel.com/g/400/200/" class="bose-adaptiveImage" />
<div class="bose-adaptiveImage bose-adaptiveImage--notFound" />
 ```
 */
div.image.adaptiveImageComponent {
  margin-bottom: 0px;
}

.bose-adaptiveImage {
  margin: 20px 30px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
  .bose-adaptiveImage {
    margin: 20px 20px;
  }
}
.bose-adaptiveImage--fullWidth {
  margin: 20px 0;
}
.bose-adaptiveImage .bose-adaptiveImage__container {
  margin: 0 auto;
  max-width: 1000px;
}
.bose-adaptiveImage.bose-adaptiveImage--fullWidth .bose-adaptiveImage__container {
  max-width: 100%;
}
.bose-adaptiveImage .bose-adaptiveImage__image {
  width: 100%;
}
.bose-adaptiveImage.bose-adaptiveImage--notFound {
  background-image: url(../../../../libs/cq/ui/widgets/themes/default/placeholders/img.png);
  background-repeat: no-repeat;
  height: 150px;
  background-position: center;
}