/**
 * Hier komt de maatwerk CSS
 * HIeronder staan enkele CSS voorbeelden die gebruikt kunnen worden
 */

@import url('https://fonts.googleapis.com/css?family=Jura:400,700');

/* Gebruik standaard lettertype Arial */
body, p, td, li {
  font-family: Arial;
}

/* Tussenruimte tussen blokken content aanpassen */
.block {
  padding:10px 0;
}

/* Maak de labels niet bold, minder lelijk */
label {
   font-weight:500;
}

/* Gebruik speciaal lettertype voor kopteksten */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Jura', sans-serif;
}

/* Gebruik underline voor hyperlinks in content */
main a {
  text-decoration:underline;
}
main a.btn {
  text-decoration:none;
}

/* Menu in header aan de rechterkant uitlijnen */
header .entity-menu{
  float:right;
  clear:both;
}
/* Geen marge voor hoofdmenu op desktop */
@media (min-width:1024px) {
  header .entity-menu .container-fluid,
  header .entity-menu .navbar-collapse{
    padding:0;
    margin:0;
  }
}

/* Links in artikelen rood */
.entity-article a{
  color:#DA291C;
}

/* Menubutton voor mobiel ook rood maken */
.entity-menu-navbar .navbar-header button:hover,
.entity-menu-navbar .navbar-header button:active,
.entity-menu-navbar .navbar-header button:focus,
.entity-menu-navbar .navbar-header button{
  background-color:#DA291C;
}
/* En lijntjes in button wit */
.navbar-transparent .navbar-toggle .icon-bar {
  background-color:#fff;
}

/* Maak menu navbar iets kleiner en lager */
.entity-menu-navbar {
  font-size:80%;
}
@media (min-width:1280px) {
  .entity-menu-navbar {
    font-size:90%;
  }
}
@media (min-width:1600px) {
  .entity-menu-navbar {
    font-size:100%;
  }
}

/* Dropdown ook text align rechts */
.entity-menu-navbar .dropdown-menu,
.entity-menu-navbar .dropdown-menu a {
  text-align:inherit;
  font-size:inherit;
}

/* Navbar rood maken met witte tekst */
.entity-menu-navbar .navbar{
  min-height:40px;
}
.entity-menu-navbar li {
  margin:1px;
}
.entity-menu-navbar li a,
.entity-menu-navbar  .open > a,
.entity-menu-navbar  .open > a:hover, 
.entity-menu-navbar  .open > a:focus {
  background-color:#DA291C !important;
  padding:3px 12px  !important;
  color:#fff  !important;
}
.entity-menu-navbar li.active,
.entity-menu-navbar li.active:active,
.entity-menu-navbar li.active:focus,
.entity-menu-navbar li.active:hover,
.entity-menu-navbar li:active,
.entity-menu-navbar li:focus,
.entity-menu-navbar li:hover,
.entity-menu-navbar li.active > a,
.entity-menu-navbar li.active > a:active,
.entity-menu-navbar li.active > a:focus,
.entity-menu-navbar li.active > a:hover,
.entity-menu-navbar li a:active,
.entity-menu-navbar li a:focus,
.entity-menu-navbar li a:hover{
  background-color:#444 !important;
  color:#fff  !important;
}

/* Alles op locatie linksboven iets naar onderen verplaatsen */
.loc-h-1-d {
  padding-top:20px;
}

/* Maak buttons rood */
.btn {
  margin:1px 2px;
  background-color:#DA291C;
  border:0;
  color:#fff !important;
}
.btn.active,
.btn.active:active,
.btn.active:focus,
.btn.active:hover,
.btn:active,
.btn:focus,
.btn:hover {
  background-color:#444;
  color:#fff !important;
}

/* Thumbnails met rood randje */
.thumbnail {
  padding:0;
  border:1px solid #DA291C;
  text-align:center;
}
.thumbnail h4,
.thumbnail a {
  color:#DA291C !important;
  font-size:16px;
}
.thumbnail h4{
  margin-top:6px;
  margin-bottom:6px;
  font-weight:bold;
}

/* Thumbnails dichter bij elkaar */
.entity-imagelist-thumbnails .row {
  margin-left:-3px;
  margin-right:-3px;
}
.entity-imagelist-thumbnails .row > div {
  padding-left:3px;
  padding-right:3px;
}

/* Indicators bij slideshow weg */
.carousel-indicators {
  display:none;
}

/* Positie van pijltjes bij slideshow */
.entity-imagelist .carousel-control .icon {
  position: absolute;
  top: 50%;
  left:30%;
}

/* Op mobiel de button/tekst over de slideshow en de pijltjes niet weergeven */
@media (max-width:767px) {
  .entity-imagelist .carousel-control,
  .entity-imagelist .carousel-caption{
    display:none;
  }
}

/* Footer meer marge en rode lijn boven */
footer{
  margin-top:60px;
  border-top:3px solid #DA291C;
  padding-top:5px;
}

/* Footer lijst zonder bolletjes */
footer ul, li {
  margin:0;
  padding:0;
  list-style-type:none;
}

/* Alles in rechterkant footer rechts uitlijnen */
footer .loc-right {
  text-align:right;
}

/* Grijze achtergronden bij artikelen */
.entity-article-well-inverse .well {
  background-color:#7F7F7F;
  color:#fff !important;
  margin-bottom: 0;
}
.entity-article-well-inverse .well a,
.entity-article-well-inverse .well h1,
.entity-article-well-inverse .well h2,
.entity-article-well-inverse .well h3,
.entity-article-well-inverse .well h4,
.entity-article-well-inverse .well h5,
.entity-article-well-inverse .well h6 {
  color:#fff !important;
}


/* Op locatie C krijgen artikelen padding en marge en witte transparante achtergrond */
.loc-m-5 .entity-article {
  background-color:rgba(255,255,255,0.8);
  margin:10px;
  padding:20px;
}


/* Verberg de scroll-to-top button op desktop */
@media (min-width:1024px) {
  .btn-scrolltop {
    display:none !important;
  }
}

/* Maak button over afbeelding */
.entity-imagelist-carousel-bootstrap .carousel-caption {
  width:auto;
  background:#DA291C;
  text-shadow: none;
  left:auto;
  right:15%;
  padding:15px 30px;
  bottom:70px;
}
.entity-imagelist-carousel-bootstrap .carousel-caption h4,
.entity-imagelist-carousel-bootstrap .carousel-caption p {
  font-size:24px;
  margin:0;
}

/* Button voor routeplanner netjes maken */
.entity-map-route .btn {
  min-height: 39px;
  margin:0;
}

/* FIlter niet weergeven */
/*
.entity-catalogview-master-sub {
  display:none;
}
*/

/* Geen link underline in filter */
.entity-catalogview-master-sub a {
  text-decoration:none;
}

/* Forms altijd in well */
.entity-webform {
  background-color:#7F7F7F;
  color:#fff !important;
  padding:20px;
}
.entity-webform .text-info{
  color:#fff !important;
}

/* Lijstweergave aanpassen */
.entity-catalogview.entity-catalogview-product-master-filter-2 .catalogview-result .single-item .thumbnail .price-container{
  text-align: left;
  background-color:rgba(255,255,255,0.8);
  padding-left:6px;
  padding-right:6px;
  position:absolute;
}
.entity-catalogview.entity-catalogview-product-master-filter-2 .catalogview-result .single-item .thumbnail .price-container .price-noprice,
.entity-catalogview.entity-catalogview-product-master-filter-2 .catalogview-result .single-item .thumbnail .price-container.price-has-sell .price-sell-total{
  margin-top:0;
}
.entity-catalogview.entity-catalogview-product-master-filter-2 .catalogview-result .single-item .thumbnail .image-container {
  margin-top:0;
}
.entity-catalogview.entity-catalogview-product-master-filter-2 .catalogview-result .single-item .thumbnail {
  text-align:left;
}
.entity-catalogview.entity-catalogview-product-master-filter-2 .catalogview-result .single-item .thumbnail h3 a{
  font-size:110%;
  padding:4px;
}
.entity-catalogview.entity-catalogview-product-master-filter-2 .catalogview-result .single-item .thumbnail h3 small {
  display:none;
}
.entity-catalogview.entity-catalogview-product-master-filter-2 .catalogview-result .single-item .thumbnail .button-container .btn-detail-page {
  display:block;
  float:right;
  clear:both;
  color:#fff !important;
}
.entity-catalogview.entity-catalogview-product-master-filter-2 .catalogview-result .single-item .thumbnail .price-container.price-has-sell.price-has-sale .price-sale-total {
  color:#DA291C;
}

/* Detailweergave product */
.entity-catalogview-product-detail-default {
  border:1px solid #DA291C;
  padding:12px;
}
.entity-catalogview-product-detail-default h1 {
  margin-top:0;
}
.entity-catalogview-product-detail-default li > a {
  text-decoration:none;
}
.entity-catalogview.entity-catalogview-product-detail-default .catalogview-moreinfo {
  padding-top:0;
}
/* Desktop Slideshow weergeven op mobiel in plaats van mobiele weergave */
.entity-catalogview.entity-catalogview-product-detail-default .catalogview-images.hidden-xs {
  display:block !important;
}
.entity-catalogview.entity-catalogview-product-detail-default .catalogview-images.visible-xs-block {
  display:none !important;
}
@media (max-width:1023px) {
  .entity-catalogview.entity-catalogview-product-detail-default .catalogview-carousel-thumbnails > div {
    width:31%;
    float:left;
  }
}