/* algemeen */
body{font-size: 1rem;}
.bg-zis {color:black;background-color: #73B8FD;}

.skiplink{margin:0rem;padding:0.5rem;}
.skiplink a{
  left:1rem;
  padding:0.3rem 1rem;
  position:absolute;
  top:-10rem;
  z-index: 9999999999;
}
.skiplink a:focus{
  background-color: #000;
  border:0;
  box-shadow: 0 0 0 0.2rem rgba(0,0 ,0, 0.8);  
  color: #fff !important;
  margin-left: 1rem; 
  top:5rem;
}

.nav-link {color:white;}
.navbar-zis .navbar-nav .nav-link{
  color:black !important;
	
  font-size: 1.1rem; 
  font-weight:bold;
  margin-right: 1em;
  text-decoration: none;
  letter-spacing: 0.5px
}
.navbar-zis .navbar-nav .nav-link:hover{text-decoration: underline;border:1px solid #000}
.navbar-zis .navbar-nav .nav-link:hover{box-shadow: 0 0 0 0.2rem rgba(255, 0,0, 0.8);}
.navbar-zis .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 0, 0, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.footer{text-align: center;background-color: #73B8FD;}
.footer a{margin:1em;color:black;font-weight:bold;font-size:1.2em;}

p.bg-zis{padding:1em;font-size:1.2em;color:white;}
div.jumbotron{
	background-attachment: fixed;
  background-color: #024A92;
	background-repeat: no-repeat; 
	background-size: cover; 
}

.card:hover {
  background-color:rgb(245,245,245);
  -webkit-box-shadow:inset 0px 0px 0px 1px #0069D9;
  -moz-box-shadow:inset 0px 0px 0px 1px #0069D9;
  box-shadow:inset 0px 0px 0px 1px #0069D9;
}

.display-3 {color:White;font-weight:bolder;}
.display-background{background-color: rgba(0,0,0,0.3);padding:0 0.3em; border-radius: 0.1em}

img.float-left{margin: 0 1.2rem 0 0.6rem;}
figure.float-left{margin: 0 1.2rem 0 0.6rem;}
figcaption{text-align:center;}
span.datum{font-size:0.9rem;}
.section{border-bottom:1px solid black;}


a{color:#3344dd; text-decoration: underline;}
a:hover, a:focus{color:#bb1122; box-shadow: 0 0 0 0.2rem rgba(255, 0,0, 0.8);}

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
  min-height:41rem;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

.btn-primary {
  background-color:#0273E3;
  color:white;
	margin-bottom: .8em;

}
.btn-primary:hover {
  box-shadow: 0 0 0 0.2rem rgba(255, 0,0, 0.8);
  font-weight: bold;  
}

.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 0,0, 0.8);
}



/*p:first-letter {font-size: 1.4rem;font-stretch: ultra-expanded;font-weight: bold;} */


div.sub-title{margin-top: -0.5rem; margin-left: 0rem; font-size: 1.3rem;margin-bottom: 1rem;}
p.no-capital:first-letter{font-size:1rem;font-stretch: normal;font-weight:normal;}
p {margin-bottom: 0.8rem;}
section{margin-bottom:1.5rem;padding: 0.5rem 1rem;}
section h2{font-size:2.5rem;}
div.copyright{font-weight:bold;}
.pubdatum{font-size:0.7rem;}

/* blog */
.blog{margin-bottom: 1.5rem;padding: 0.5rem 1rem;}
.blog header h2{font-size:2.5rem;}
div.striped article.blog:nth-child(odd){background-color:rgb(245,245,245);border-style: solid; border-color: lightgrey;}

/* podcast */
.podcast{margin-bottom: 1.5rem;padding: 0.5rem 1rem;}
.podcast header h2{font-size:2.5rem;}
div.striped section.podcast:nth-child(odd){background-color:rgb(245,245,245);border-style: solid; border-color: lightgrey;}
audio{width:100%;height:4rem;}
.audioplayer {
  box-shadow: none !important; 
  text-shadow: none !important;
}

/* tips */
.tips{margin-bottom: 1.5rem;padding: 0.5rem 1rem;}
.tips header h2{font-size:2.5rem;}
div.striped article.tips:nth-child(odd){background-color:rgb(245,245,245);border-style: solid; border-color: lightgrey;}
dd{margin: 0 0.8rem;}

/* zik */
.zik{margin-bottom: 1.5rem; padding: 0.5rem 1rem;}
.zik header h2{font-size:2.5rem;}
div.striped article.zik:nth-child(odd){background-color:rgb(245,245,245);border-style: solid; border-color: lightgrey;}
div.striped p{margin-right:1rem;margin-left:1rem;}


/* home page */
a.leesMeer{text-decoration: none; color:black; font-weight: bold; letter-spacing: 0.5px;}
.teaser{padding-bottom: 1rem; margin-bottom:1rem;}
.leesMeer{position: absolute;bottom: 0rem;margin-left:1rem;}
.img-home{width:80%;}


#rijTwee{margin-top: 1rem; background-color: rgb(245,245,245);height: 23rem}

a.homeLink{text-decoration: none;color:inherit;}
a.homelink:hover{text-decoration: none;color: inherit;}
a.homelink:focus{text-decoration: none;color: inherit;}

.teaser.homelink {text-align: center;}
/* 
Extra small devices (portrait phones, less than 576px) 
No media query since this is the default in Bootstrap because it is "mobile first"
*/
 
.display-3 {font-size:1.5rem;} 
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  
  .display-3{font-size: 2rem}
  body{font-size:1.2rem;}
  .teaser{min-height: 42rem;}
}
 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
  body{font-size:1rem;}

   
}
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  body{font-size:1rem;}
  .teaser{min-height:37rem;}
}
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
    
}