@charset "UTF-8";
:root {
	--font-color: #717476;
	--font-color_title: white; 
	--font-color_subtitle: #FFE87C; 	
	/* --btn-bg-color: #E7D79E; */ 
	--jade: #BAC8C9;
	--btn-bg-color: #F7ECD7;
	--fontcolor-header: #737373;
	--color-links: black; /* #BF9B30; */
	--color-ruby: #941918;
	
}

header {
	border-bottom: 1px solid #ededed;
	/* padding-bottom: 20px; */
}

body {	
	width: 1200px;			
	margin: 0 auto;	
	color: #717476; 
    font-family: "Montserrat";
    font-size: 0.9em;   	
}

header.menu {
	color: grey;
	text-align: right;
	padding-top: 15px;
	margin-bottom: 15px;
	height: 30px;
	font-size: 1.1em;
	border-bottom: 1px solid #ededed;
}

a:link {	
	color: var(--color-links);
	text-decoration: none;	
}

a:hover {	
	text-decoration: underline;	
}

a:visited {
	color: var(--color-links);
	text-decoration: none;	
}


section {
	
}
section a:link {
	
	/* text-decoration: none; */
}

section a:visited {	
	text-decoration: none;
}

h2,h3,h4 {
	color: #941918; 	
}

h1 {
	font-size: 2.5em;
	font-family: "Oooh Baby"; 	
}

/*
header {	
	padding: 25px 25px;
	text-align: right;
	font-size: 0.9em;	
}
/*
header a:link {
	color: black;
	font-size: 1.2em;
}
*/

div.background {
	padding-top:45px;
	 
	/* volledige pad opnemen anders laadt de achtergrond foto niet! */
	/* background: url("http://192.168.178.12/weblog/img/header.jpg") no-repeat; */
	    
	/* Bij online plaatsen: */
	background: url("https://weblog-gitaarbouw.nl/img/header.jpg") no-repeat; 
	height: 200px;  
	text-align: center;	
	/* border: 1px solid #ededed; */
	margin-bottom: 35px;
}

div.parent {
	/* margin-top: 35px; */
}

div.seperator {
	height: 20px;
}

div.logo {
	margin: 10px;
	float: left;
}

div.counter {	
	float: right;
}

span.title, span.subtitle {	
			
}

span.title {	
	font-family: "Oooh Baby";
	font-size: 90px;
	color: var(--font-color_title); 	
	/* color: #9A8E89; */
	padding-bottom: 12px;	 
}

span.subtitle {
	font-size: 28px;
	font-family: "Oooh Baby";
	color: var(--font-color_subtitle);
}

span.update {
	color: ruby;	
}

section {	
	/* width: 900px;
	margin-right: 20px;
	line-height: 1.6; */
	/* border-top: 1px solid lightgrey; */ 
 	margin-top: 15px;  
	line-height: 1.7em;
	margin-bottom: 15px; 
}

span.bijschrift {
	font-size: 0.9em;
	font-style: italic;
}

span.bold {
	/* color: #9b111e; */
	color: #9b111e;
	font-weight: bold; 	
}

.bio {
	float: right;
	padding-left: 25px;
}

ul {
	
}
/* afstand tussen list-items */
li:not(:last-child) {
    margin-bottom: 10px;
}

img {
	/* padding-bottom: 3px; */
}

img.bio {
	float: left;
}

footer {
	float: clear;	
	
	border-top: 1px solid lightgrey; 	
	text-align: center;
	font-size: 0.9em;
}

btn {
	border: none;
}

.button {
  border: none;
  color: white;
  font-weight: normal;
  font-size: 0.9em;
  margin-top: 5px;
  padding: 5px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;    
  cursor: pointer;
  /* background-color: #EDE7DA; */
  border-radius: 5px;
}

a.button { 
	color: #525150; /* #66443E */	
	
}

.button a:visited { 
	color: white;	
}

.parent img {
	/* border-radius: 8px; */
}

.comment {
	font-size: 0.8em;
}

<script>
let slideIndex = 0;
showSlides();

function showSlides() {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 5000); // Change image every 5 seconds
}
</script>