/* #####################################################################################################
   Banner styles
   ##################################################################################################### */

/*--- standard variables ---*/
/*--- product item ratio (thumb + content) ---*/
/* set ProductImageRatio in productOverview! */
/*--- media queries. When using responsive ---*/
/*--- custom class functions ---*/
/*----- LESS functions -----*/
/*wordt vervangen door .border-radius
.rounded(@radius: 3px) {
	-webkit-border-radius:	@radius;
	-moz-border-radius:		@radius;
	border-radius:			@radius;
}*/
/*wordt vervangen door .box-shadow
.inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) {
	-webkit-box-shadow:	inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
	-moz-box-shadow:	inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
	box-shadow:			inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
}*/
/*mixins*/
.banner {
  list-style: none;
  margin: 0;
}
.banner .hotspotSlide {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.banner .hotspotSlide div {
  position: relative;
  z-index: 0;
}
.banner .hotspotSlide div img {
  height: auto;
  width: 100%;
  display: block;
}
.banner .hotspotSlide div .hotspotlink {
  position: absolute;
  background: transparent;
}
.banner .hotspotSlide .topImage {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
}
@media only screen and (min-width: 767px) {
  .banner .hotspotSlide .topImage {
    padding: 0;
    max-height: 200px;
    max-width: 380px;
  }
}
@media only screen and (min-width: 1024px) {
  .banner .hotspotSlide .topImage {
    max-height: none;
    max-width: none;
  }
}
.banner .hotspotSlide .topImage img {
  height: auto;
  max-width: 100%;
  width: auto;
}