/* #####################################################################################################
   This stylesheet describes stores
   ##################################################################################################### */

/*--- standard variables ---*/
/*--- product item ratio (thumb + content) ---*/
/* set ProductImageRatio in productOverview! */
/*--- media queries. When using responsive ---*/
/*--- media queries. When using responsive: only mobile & desktop ---
@useResponsive:			false;
@breakPointLargePhone:	~"only screen and (min-width: 480px)";
@breakPointTablet:		~"only screen and (min-width: 999999999px)";
@breakPointTabletLand:	~"only screen and (min-width: 768px)";
@breakPointDesktop:		~"only screen and (min-width: 768px)";

@breakPointUpToTablet:	~"only screen and (max-width: 767px)";
@breakPointUpToDesktop:	~"only screen and (max-width: 767px)";
*/
/*--- media queries. When not using responsive ---
@useResponsive:			false;
@breakPointLargePhone:	~"only screen and (min-width: 1px)";
@breakPointTablet:		~"only screen and (min-width: 1px)";
@breakPointTabletLand:	~"only screen and (min-width: 1px)";
@breakPointDesktop:		~"only screen and (min-width: 1px)";

@breakPointUpToTablet:	~"only screen and (max-width: 1px)";
@breakPointUpToDesktop:	~"only screen and (max-width: 1px)";
*/
/*--- custom class functions ---*/
/*----- LESS functions -----*/
/*wordt vervangen door .border-radius
.rounded(@radius: 3px) {
	-webkit-border-radius:	@radius;
	-moz-border-radius:		@radius;
	border-radius:			@radius;
}*/
/*----- CSS3 Animation functions -----*/
/*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);
}*/
/*----- Buttons -----*/
/*----- Responsive functions -----*/
/* ==========================================================================
   Default / Mobile styles
   ========================================================================== */

#storeLocator {
  margin-bottom: 20px;
}
#storeLocator #storeLocatorMap {
  height: 200px;
  outline-color: #76b9af;
  /* Circle color */

  /* ++ Google maps inline content styles ++ */

  /* -- Google maps inline content styles -- */

}
#storeLocator #storeLocatorMap img {
  max-width: none;
}
#storeLocator #storeLocatorMap .gm-style-iw {
  overflow: hidden !important;
}
#storeLocator #storeLocatorMap .gm-style .content .top {
  display: none;
}
#storeLocator #storeLocatorMap .gm-style .content .left,
#storeLocator #storeLocatorMap .gm-style .content .right {
  font-size: 12px;
  line-height: 20px;
}
#storeLocator #storeLocatorMap .gm-style .content .left {
  float: left;
  width: 150px;
}
#storeLocator #storeLocatorMap .gm-style .content .left .title {
  font-weight: bold;
}
#storeLocator #storeLocatorMap .gm-style .content .right {
  float: right;
  width: 100px;
}
#storeLocator #storeLocatorSearch {
  position: relative;
  margin-top: 10px;
  padding-left: 50px;
}
#storeLocator #storeLocatorSearch .inputs,
#storeLocator #storeLocatorSearch a.gps {
  border: 1px solid #dedede;
}
#storeLocator #storeLocatorSearch .inputs {
  position: relative;
  padding-right: 40px;
}
#storeLocator #storeLocatorSearch .inputs input.search {
  padding: 10px 1.5%;
  width: 97%;
  height: 20px;
  line-height: 20px;
  border: none;
  outline: none;
}
#storeLocator #storeLocatorSearch .inputs input.submit {
  position: absolute;
  right: 0;
  top: 0;
  padding: 0;
  min-width: 0;
  width: 40px;
  height: 40px;
  border: none;
  background: url("../../images/searchBtn.png") white 50% 50% no-repeat;
  cursor: pointer;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  outline: none;
}
#storeLocator #storeLocatorSearch .inputs input:disabled {
  background-color: #ebebe4;
}
#storeLocator #storeLocatorSearch a.gps {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  background: url("../../images/ico-geolocation.png") white 50% 50% no-repeat;
  cursor: pointer;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
#storeList .item .picture img {
  float: none;
  margin: 0;
}
.stores #content h1 {
  font-family: 'Adamina', serif;
}
.stores .time {
  margin-top: 20px;
}
/* ==========================================================================
   styles for mobile and tablet
   ========================================================================== */

@media only screen and (min-width: 414px) {
  #storeList .item {
    width: 46%;
    margin: 0 2% 20px;
    float: left;
  }
}
@media only screen and (max-width: 767px) {
  #storeDetailsSidebar {
    margin: 20px 0;
  }
}
/* ==========================================================================
   Tablet styles
   ========================================================================== */

@media only screen and (min-width: 768px) {
  #storeLocator #storeLocatorMap {
    height: 400px;
  }
}
/* ==========================================================================
   Desktop styles
   ========================================================================== */

@media only screen and (min-width: 1024px) {
  #storeLocator #storeLocatorMap .gm-style .content .top {
    display: inline;
    margin-bottom: 10px;
  }
  #storeLocator #storeLocatorMap .gm-style .content .top img {
    display: block;
  }
  #storeLocator #storeLocatorSearch {
    padding-left: 0;
  }
  #storeLocator #storeLocatorSearch a.gps {
    display: none;
  }
  #storeList .item {
    width: 48%;
    float: left;
    margin: 0 1% 20px;
  }
  #storeList .item .picture {
    float: none;
  }
  #storeList .item .picture img {
    width: 100%;
    height: auto;
  }
}
/* ==========================================================================
   Detail pagina
   ========================================================================== */

body.stores.detailPage #kaartContainer,
body.stores.detailPage #storeDetail a.back {
  display: none;
}
body.stores.detailPage #content .content {
  margin: 20px 0 40px;
}
body.stores.detailPage .storePicture {
  width: 100%;
  padding-bottom: 46%;
  background-size: 100% auto;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
}
@media only screen and (min-width: 768px) {
  body.stores.detailPage .storePicture {
    display: block;
    width: 100%;
    float: right;
  }
  body.stores.detailPage #storeDetail {
    width: 47%;
    position: relative;
    padding-right: 53%;
    margin: 2% 0 0;
  }
  body.stores.detailPage #storeDetail #kaartContainer {
    float: right;
    margin-top: 20px;
    width: 100%;
    height: 350px;
    display: block;
  }
  body.stores.detailPage #storeDetailsSidebar {
    width: 49%;
    position: absolute;
    right: 0;
    top: 0;
  }
}
@media only screen and (min-width: 1024px) {
  body.stores.detailPage #storeDetail {
    min-height: 580px;
  }
  body.stores.detailPage #storeDetail #kaartContainer.top {
    top: 0;
    bottom: 0;
    height: auto;
  }
  body.stores.detailPage .storePicture {
    position: relative;
    display: block;
    padding-bottom: 46%;
  }
}