/* raleway-regular - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/raleway-v11-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Raleway'), local('Raleway-Regular'),
       url('fonts/raleway-v11-latin-regular.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/raleway-v11-latin-regular.woff') format('woff2'), /* Super Modern Browsers */
       url('fonts/raleway-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/raleway-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/raleway-v11-latin-regular.svg') format('svg'); /* Legacy iOS */
}

/* raleway-italic - latin */
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/raleway-v11-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Raleway Italic'), local('Raleway-Italic'),
       url('fonts/raleway-v11-latin-italic.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/raleway-v11-latin-italic.woff') format('woff2'), /* Super Modern Browsers */
       url('fonts/raleway-v11-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/raleway-v11-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/raleway-v11-latin-italic.svg') format('svg'); /* Legacy iOS */
}

/* raleway-600 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/raleway-v11-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Raleway SemiBold'), local('Raleway-SemiBold'),
       url('fonts/raleway-v11-latin-600.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/raleway-v11-latin-600.woff') format('woff2'), /* Super Modern Browsers */
       url('fonts/raleway-v11-latin-600.woff') format('woff'), /* Modern Browsers */
       url('fonts/raleway-v11-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/raleway-v11-latin-600.svg') format('svg'); /* Legacy iOS */
}

/* raleway-700 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/raleway-v11-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Raleway Bold'), local('Raleway-Bold'),
       url('fonts/raleway-v11-latin-700.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/raleway-v11-latin-700.woff') format('woff2'), /* Super Modern Browsers */
       url('fonts/raleway-v11-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/raleway-v11-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/raleway-v11-latin-700.svg') format('svg'); /* Legacy iOS */
}

/* global settings*/

body {
  font-family: 'Raleway', sans-serif;
  background-color: #fff;
  color: #888 /*grey*/
}

/*remove all rounded corners*/
* {
  border-radius: 0 !important;
}

h1 {
  font-size: 1.3em;
  font-weight: 600;
  margin-top: 0px;
  /*color: #333;*/
}

h2 {
  font-size: 1.2em;
  border-bottom: 1px solid;
  font-weight: 600;
  padding-bottom: 10px;
  /*color: #333;*/
}

h3 {
  font-size: 1.0em;
  font-weight: 600;
  /*border-bottom: 1px solid;*/
  /*color: #333;*/
}

h4 {
  font-size: 1.0em;
  font-weight: 600;
  /*border-bottom: 1px solid;*/
  /*color: #333;*/
}


a{
  color: #ff3b3f; /*red*/
  color: #efefef; /*neutral*/
  color: #caebf2; /*blue*/
  color: #888; /*grey*/
  text-decoration: none;
}


a:hover, a:focus  {
  color: #333;
}

.intro-text a{
  text-decoration: underline;
}

.navbar, .content-wrapper, .carousel {
	margin: 10px;
}

/* top navbar */
/*navbar*/
.navbar-nav {
  /*min-height:65px; create height for img and text*/
} 

.navbar-nav > li > a {
  padding-top: 18px;
  padding-bottom: 18px;

 /* padding-top: 5px;
  padding-bottom: 0px;*/
  font-size: 0.9em;
}

.navbar-header img {
  margin: 0 auto; 
  max-height:40px;
}

.navbar-header .logo-wrapper{
  margin: 0 20px 0 30px;
}

.dropdown-menu{
  padding: 0 0;
}

.icon-bar {
  background-color:#ff3b3f !important;
}



.dropdown-menu > li > a {
  padding: 10px;
  padding-right:50px; /* creates white space for badge at the right, dropdown menu width depends on <a> text width */
  /*background-color: white;*/
}

.dropdown-menu >li >a:hover { /*hover bg color dropdown menu and dropdown submenu*/
  /*background-color: #ddd;*/
}

.dropdown-menu > li > a > .badge { /* positions badge at righ, pull-right not needed */
  position:absolute;
  right:5px;
  background-color: #a9a9a9;
  min-width: 30px;
}

/*show both icons and hide one depending on dropdown status*/
.nav .dropdown .glyphicon-menu-up{
  display:none ;
  padding-left: 10px;
}
.nav .dropdown .glyphicon-menu-down{
  display:inline ;
  padding-left: 10px;
}
.nav .dropdown.open .glyphicon-menu-down{
  display:none ;
}
.nav .dropdown.open .glyphicon-menu-up{
  display:inline ;
}

li.dropdown-submenu a {
  color: #666;
  cursor: pointer;
}

li.dropdown-submenu > ul.dropdown-menu >li { /*bg color drowpdown submenu*/
  /*background-color: #f1f1f1; set darker dan dropdown menu to discriminate menu and submenu in smallscreen mode*/
}

@media(max-width:767px){ /*indent submenu for small screens */
  li.dropdown-submenu > ul.dropdown-menu >li  { 
    padding-left: 10px;
  }
}



li.dropdown-submenu a .glyphicon-menu-right  
{
  top:5px; /*move icon in submenu slightly downwards*/
  font-size: 0.8em;
}

.dropdown-menu .divider{
  margin: 0 auto;
}
.dropdown-submenu.pull-left>.dropdown-menu{
  left:-100%;
  margin-left:10px;
  /*-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;*/
}
    
.dropdown-submenu.pull-left{
  float:none;}

.dropdown-submenu>.dropdown-menu{
  top:0;
  left:100%;
  margin-top:2px;
  margin-left:-2px;
  /*-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;*/
}
/*
.dropdown-submenu>a:after{ 
  display:block;
  content:" ";
  float:right;
  width:0;
  height:0;
  border-color:transparent;
  border-style:solid;
  border-width:5px 0 5px 5px;
  border-left-color:#ccc;
  margin-top:5px;
  margin-right:-10px;
}*/

.dropdown-submenu:hover>.dropdown-menu{
  display:none;}

.dropdown-submenu:hover>a:after{
  border-left-color:#000;}

.dropdown-submenu{
  position:relative;}





/*carousel*/
.carousel {
	max-height: 160px;
	height: auto;
	display: table;
}

.carousel img {
	width: 75%; 
	max-height: 160px;
	max-width: 160px;
	opacity: 0.6;
}

.carousel-caption {
	position: relative;
	left: auto;
	right: auto;
	visibility: visible;
}

.carousel .carousel-control { visibility: visible; color: #aaa	; }
.carousel:hover .carousel-control { visibility: visible; color: #444;}

.carousel-control.left, .carousel-control.right {
	background: none !important;
	filter: progid: none !important;
	outline: 0;
}


.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {
	right: 50px;
	font-size: 50px;
	top:50px;	
}

.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev {
	left:50px; 
	font-size: 50px;
	top:50px;	
}

.carousel-indicators {
	/*visibility: hidden;*/
	margin-bottom: -20px;
}

.carousel-indicators li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 3px;
  cursor: pointer;
  border-width: 1px;
  border-color: #ddd;
  /*border-radius: 50%;*/
  background-color: white;
  /*box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.5);    */
}

.carousel-indicators li.active {
  width: 10px;
  height: 10px;
  margin: 3px;
  background-color: #ff3b3f;
}


/*sidebar*/
.sidebar {
	background-color: #fff;
}

/*accordion*/

/*remove bottom border of panel*/
.panel, .route-blurb-container {
    -webkit-box-shadow: none;
    box-shadow: none;
}
/*remove bottom border of panel header*/
.panel, .panel-default, .panel-body, .panel-group .panel-heading+.panel-collapse>.panel-body{
    border: none;
    
 
}

#brand-accordion {
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 5px
}

.panel-heading {
	padding: 11px;
  color: #fff;
}

.panel-heading h4 {
  font-size: 12px;
  
}
.panel-title .glyphicon{
  font-size: 12px;
  top: 3px;

}

.panel-title a { /*making the entire panel-title clickable*/
    display: block;
    padding: 10px 10px;
    margin: -10px -10px;
}

.panel-title a:hover, 
.panel-title a:focus,
.panel-title a:active {
  color: #fff; 
  text-decoration: none;
  background-color: #555;
}
/*list menu*/
.panel-body{
	padding:0;
}

.badge {
	background-color: #ff3b3f;/*#caebf2;*/ 
	padding: 5px;
	font-size: 12px;
	/*border-radius: 10px  !important;*/
  font-weight: 600;
  min-width: 32px;
  
}



.panel .panel-heading { 
  background: #a9a9a9;   /*set background of panel heading*/
  color: #fff; 
}

.panel .panel-title {
  font-weight: 600;
}  

.panel-body {
  background: white;     /*set background collapsed  panel body*/
}


/*show both icons and hide one depending on accordion-toggle status*/
.panel-heading .accordion-toggle.collapsed .glyphicon-menu-up{
  display:none ; 
}
.panel-heading .accordion-toggle.collapsed .glyphicon-menu-down{
  display:inline ; 
}
.panel-heading .accordion-toggle .glyphicon-menu-up{
  display:inline ;
}
.panel-heading .accordion-toggle .glyphicon-menu-down{
  display:none ;
}

.panel-heading .glyphicon-menu-right  
{
  top:-1px; /*move icon in submenu slightly upwards*/
}


/*list group item in accordion*/

.list-group-item{
 
}

.list-group-item a{
  color:#333;
  text-decoration: none;
}
.list-group-item {
  padding: 10px 10px;
  border: none ;
  color:#333;
  background-color: #ddd;
  display: block;
}

.list-group-item .link-item{
  float:left;
  width: 75%;
}
.list-group-item .badge-item{
  float:right;
  width: 20%;
}
div.list-group-item {
  color: #333;
  /*margin-right: 10px;*/
}

div.list-group-item .list-group-item-heading {
  color: inherit;
}

div.list-group-item:hover,
div.list-group-item:focus {
  color: #333;
  background-color: #bbb;
}

div.list-group-item.active,
div.list-group-item.active:hover,
div.list-group-item.active:focus {
  color: #333;
  background-color: #bbb;
}

div.list-group-item.active:hover,
div.list-group-item.active:focus {
  color: #333;
  background-color: #bbb;
}

/*content*/
/*xxs and media query from: https://stackoverflow.com/a/38159787*/
.col-xxs-12 {
    position: relative;
    min-height: 1px;
    padding-left: 0px;
    padding-right: 0px;
    float: left;
  }

/*.visible-xxs {
  display:none !important;
}*/




/*address + img content */
address {
  margin-bottom: 0px; /*bootstrap override*/
}


.store-item {
  padding: 0px;
  margin: 0px;
  padding-right: 10px;
  margin-bottom: 10px;
}

.intro-text a {
  text-decoration: none;
}

.address-block {
  padding:10px;
  background-color: #ededed;
  margin-bottom: 5px;
}

.product-wrapper {
  margin: 0px;
  padding: 0px 0px 0px 0px;
  background-color: #fff;
  margin-bottom: 0px;
  width: 100%;
  float: left;
}

.address-block .glyphicon {
  color: #ff3b3f;
}

.address-header h4 {
  font-size: .9em;
  font-weight: 600;
  color: #555;
  margin-top:0px;
  height:30px;

}

.glyphicon-asterisk{
  color: #ff3b3f;
  font-size: 1.0em;
}

.address-block a:hover, .address-block a:active, .address-block a:visited{
  text-decoration: none;
}

.store-link{
  color: #ff3b3f;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85em;
}
.store-link:hover,.store-link:active{
  text-decoration: underline;
}

.address-main-block{
  padding-bottom: 10px;
}

/*button*/
.btn-primary {
  background-color: #777 !important;
  background-color: #ff3b3f !important;
  border-color: white !important;
  color:white!important;
  font-size: 0.9em;
  font-weight: 600;
  
}

.btn-primary:hover,
.btn-primary:active,
/*.btn-primary:visited,*/
.btn-primary:focus {
  background-color: #555 !important;
  background-color: #dd3b3f !important;
}

.button-hover{
   background-color: #555 !important;
  background-color: #dd3b3f !important;
}

.vcenter {
  display: inline-block;
  vertical-align: middle;
  float: none;
  white-space: normal !important;
  word-wrap: break-word;
}


.glyphicon-shopping-cart {
  vertical-align: middle;
  /*color: white;*/
  /* position: absolute;
    top: 50%;
    transform: translate(-0%, -50%);*/
}

.product-img-container{
  position: relative;
  height: 160px;
  cursor:pointer;
}

.product-img{
  /*https://stackoverflow.com/questions/39435472/bootstrap-3-columns-vertical-align-bottom-with-img*/
  max-height: 110px;
  /*margin: 20px auto;*/
  position: absolute;
  bottom:0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
  opacity: 0.9;
  /*below customizing image alt text*/
  font-size: 0.7em;
  text-align: center;
  color: #ccc;
  line-height: 70px;
}

.well{
  font-size: .85em;
  margin: 0px -15px;
}

/* Custom for phone portrait*/ /*xxs and media query from: https://stackoverflow.com/a/38159787 */
@media only screen and (min-width : 240px) and (max-width:420px) {
  .col-xxs-12 {
    width: 100%;
  }
  .col-xxs-6 {
    width: 50%;
  }

  .visible-xxs {
    display: block !important;
  }

  .hidden-xxs {
    display:none !important;
  }

  .intro-text{
    padding-left: 10px;
  }
  .address-block {
   
     margin-left: 10px;
    /*background-color: #ededed;*/
    /*border-bottom: 1px solid #eee;*/
  }

  .address-header{
  }
  .address-main-block{
  }

  .address-sub-block{
  }

  .product-wrapper{
    margin-left: 10px;
    padding-right: 10px;
     /* margin-right: 10px;*/
  }
} 


/*webshop info*/
.store-container{
  border:1px solid #ddd;
  margin-bottom: 20px;
}

.store-box{
  padding:5px 10px; 
  margin-right:-5px;
}
.store-header{
  cursor:pointer;
  border-bottom: 1px solid #ddd;
}
.store-header:hover{
  background-color: #eee;
}

.store-header h3 {
  margin-top: 10px;
}

.store-carousel-img-container{
  position: relative;
  height: 130px;
}

.top-store h3{
  color : #ff3b3f !important;
}

.store-carousel img {
  /* all needed for vertical aligning images */
  width: auto; 
  max-height: 100px;
  max-width:1000px;
  opacity: .9;
  cursor:pointer;

  position: absolute;
  bottom:0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;

  /*here under customizing image alt text*/
  font-size: 0.7em;
  text-align: center;
  color: #ccc;
}


.store-spec-icon{
  width:6%;
}

.store-spec-text{
  width:90%;
  margin-bottom:5px;
}

.payment-img{
  max-height: 40px;
  float: left;
  padding: 5px;
}


/*city tab*/
.tabbable{
  border-bottom: 1px solid;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.tabbable .nav a{
  color: #888;
}
.tab-pane ul{
  margin-top: 0;
  margin-bottom: 0;
  line-height: 2em;
}

.tab-pane .row{
  padding-top: 10px;
}

.tab-pane  li  a {
  padding-right:50px; /* creates white space for badge at the right, dropdown menu width depends on <a> text width */
  padding-top: 10px;
  padding-bottom: 10px;
}
.tab-pane  li  a  .badge { /* positions badge at right, pull-right not needed */
    position:absolute;
    right:5px;
    background-color: #a9a9a9;
    min-width: 25px;
}

.nav-tabs{
  border:none !important; 
}

.nav-tabs li.active a{
  border-bottom: 1px solid #ddd !important; 
  background-color: #eee !important; 
  color : #ff3b3f !important;
  font-weight: 600;
}

.tabbable .badge{
  margin-right: 10px;
}



/*footer*/

footer {
  margin-top: 20px;
  padding-top: 20px;
  color:#eee !important;
}

footer.container-fluid.text-center.foot {
  background: #555;
}

footer .logo-wrapper{
  margin: 0  0 20px 0;
}

footer .footimg{
/*width: 5rem;*/
max-height:50px;
margin-bottom: 5px;
}


footer .btn-primary {
  background-color: #555 !important;
  border: 1px solid !important;
  border-color: #555 !important;
  color:#ddd!important;  
  font-weight: 400;
}

footer .btn-primary:hover,
footer .btn-primary:active,
/*.btn-primary:visited,*/
footer .btn-primary:focus {
  background-color: #666 !important;
  border: 1px solid !important;
  border-color: #888 !important;
}

footer .copyrights{
  margin-top:25px;
  color:#888 !important;
  font-size: 0.7em;
}

.sticky-footer{
  margin:0px ;
  padding-top: 10px;
  color:#fff;
  background:rgba(125,125,125,0.90);
  font-size: 0.85em;
  display: none;
  border: none;
  color: white;
  trans
}
.sticky-footer a
{
    color: #fff;
    text-decoration: underline;
}
.show-cookie-message{
   display: block;
}
.cookie-button{
  margin-bottom: 10px;
  display:block;
  font-size: 0.85em;
  font-weight: 600;

  background-color: #efefef;
  color:#555;
}
.cookie-button:hover{
  background-color: #ddd;
  color:#555;
}

/*page-specific*/
.brand-overview-box{
  padding-right: 10px;
}


.brand-overview-item{
  padding:5px 0px;
  float:left;
  width:100%;
  display:block;
  white-space: nowrap;
  vertical-align: middle;
}
.brand-overview-item .badge {
  background-color: #a9a9a9;
}

.info-img{
  display:none;
}

.info-link, .info-link:visited{
  text-decoration: none;
  cursor: pointer;
}

.info-link:hover{
  text-decoration: underline;
}