html, body { height: 100%; }
body { background-color: #fefefe; margin: 0px 0px 0px 0px; line-height: 1.9; color: #2d2d2d !important; position: relative; font-family: 'Open Sans',sans-serif;}
* { box-sizing: border-box;} 
.main-vak {  }

.container-fluid { padding-left: 0; padding-right: 0; }

.navbar { box-shadow: 0px 3px 5px #a8a8a8; font-size: 16px; }
.navbar-brand img { max-height: 80px; width: auto; margin-bottom: -30px;}
.landenkeuze ul li { font-size: 0.9em; }
.breadcrumb { background-color: inherit; color: #888888; padding: 15px 0; margin-top: 20px; margin-bottom: 20px; font-size: 0.8em;}
.breadcrumb a { color: #888888;  }
.breadcrumb a:hover { color: #e70020;  }
.row { margin-bottom: 20px; }
#map { height: 300px; }

#modal-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); }

h1.home { font-size: 22px; letter-spacing: 3px; font-weight: 700; font-family: 'Homemade Apple', cursive; color: #e70020; margin-bottom: 20px;}
.carousel { box-shadow: 0px 0px 5px rgba(0,0,0,0.75); }
.foto { box-shadow: 0px 0px 5px rgba(0,0,0,0.75); animation: fadeIn 5s infinite;}
.foto:hover { transform: scale(1) !important; opacity: 1 !important; filter: grayscale(0%) !important;}
@keyframes fadeIn { 0% { transform: scale(1); opacity: 0.7; filter: grayscale(100%); } 100% { opacity: 1; filter: grayscale(0%); transform: scale(1.10); } }
p a { color: #b30018; text-decoration: none; }
p a:hover { color: #e70020; text-decoration: underline; }
.icongroot { font-size: 80px; color: #e70020; display: block; margin-bottom: 20px;}
.btn:hover { text-decoration: none; }

.carousel-caption p { color: #ffffff; text-shadow: 0 0 3px #000000; }

.card-vak { max-width: 1050px; margin: auto; }
.card-vak .card, .card-product-vak .card { box-shadow: 0px 0px 20px rgba(150,150,150,0.75); font-size: 0.9em; } /*/  */
.card-vak .card:hover, .card-product-vak .card:hover  { box-shadow: 0px 0px 20px rgba(0,0,0,0.75); transform: scale(1.03) !important;}
.card a { display: block; color: inherit; text-decoration: none; }
.card:hover { text-decoration: none; }
.card-vak .card button.btn-outline-success { color: #198754; }
.card-vak .card button.btn-outline-success:hover { color: #ffffff; box-shadow: 0px 0px 5px rgb(255,255,255);}
.card-vak .card:hover button.btn-outline-success { background-color: #198754 !important; color: white !important; box-shadow: 0px 0px 5px rgb(255,255,255); }
.product-card { box-shadow: 0 0 5px rgba(150,150,150,0.75); margin-bottom: 30px; }
.product-card li { font-size: 0.9em; }
.product-card i { position: absolute; top: 30%; left: 10px; color: #a8a8a8; font-size: 1em;}
/*input[type=checkbox] + span { color: inherit; }*/
.opstellingkeuze input[type=radio] { display: none; }
.opstellingkeuze input[type=radio]+span::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f111"; color: #ffffff; text-shadow: 0 0 2px #000000; }
.opstellingkeuze input[type=radio]:hover+span::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f00c"; color: #198754; }
.opstellingkeuze input[type=radio]:hover+span { font-size: 1.05em; }
.opstellingkeuze input[type=radio]:checked+span { font-weight: bold; color: #198754; font-size: 1.1em; text-shadow: 0 0 1px #a8a8a8;}
.opstellingkeuze input[type=radio]:checked+span::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f00c"; color: #198754; }


@media screen and (min-width: 800px) {
	.jumbotron { margin-top: 50px; margin-bottom: 50px;}
	.card-vak .card { margin-top: -20px; margin-bottom: -40px !important; }
}
@media screen and (max-width: 576px) {
	.card-vak .card { margin-bottom: 20px; }
}

.card-product-vak .card { margin-bottom: 30px; }

.naam { color: rgb(0,102,255); text-decoration: none; line-height: 1; padding: 15px; letter-spacing: 3px; font-weight: 400; font-family: 'Homemade Apple', cursive; font-size: 1.1em; transform: rotate(-1.5deg); }
/*
@media screen and (max-width: 576px) {
.footer-container { position: relative; background-color: #e70020;}
}
@media screen and (min-width: 576px) {
.footer-container { position: fixed; bottom: 0;  background-color: #e70020;}
}*/
.subfooter { margin-bottom: -60px; padding-top: 30px; padding-bottom: 80px; font-size: 0.85em; color: rgba(255,255,255,.75); }
.subfooter a { color: rgba(255,255,255,.75); text-decoration: none;}
.subfooter a:hover {  text-decoration: underline;}
.subfooter i { color: #e70020; margin-right: 10px; }
@media screen and (max-width: 576px) {
.footer { display: block; height: 135px; font-size: 0.8em; padding-top: 20px; background-color: #e70020; clip-path: ellipse(97% 100% at 35% 100%); }
}
@media screen and (min-width: 577px) {
.footer { display: block; height: 100px; font-size: 0.8em; padding-top: 20px; background-color: #e70020; clip-path: ellipse(90% 100% at 20% 100%); }
}

.slideanim {animation-name: slide; animation-duration: 1s; }
@keyframes slide { 0% { opacity: 0; transform: translateY(70%); color: #ffffff;} 100% { opacity: 1; transform: translateY(0%); color: inherit;} }

input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;

  /* Hides the slider so custom styles can be added */
  background: transparent; 
  border-color: transparent;
  color: transparent;
}
/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #e70020;
  cursor: pointer;
  margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #e70020;
  cursor: pointer;
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #e70020;
  cursor: pointer;
}

.datepicker { margin-left: auto; margin-right: auto; border: 1px solid #e70020; padding: 5px; }
.datepicker-days table tr td.active {  background-color: #e70020 !important; }

.modal{
    z-index: 900;   
}
.modal-backdrop{
    z-index: 800;        
}