[class*="col-"] {
  float: left;
  padding: 10px;
  border: 1px solid white;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

/* If the screen size is 601px or more, set the font-size of <div> to 80px */
@media only screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}

/* If the screen size is 600px or less, set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}

/*	Dit hoort bij HTML
<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

Dit is weer CSS
.row::after{
  content: "";
  clear: both;
  display: table;
}
*/
@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
  }
  
@media only screen and (min-width: 600px) {
body{
	background: white;
}
}


body {
	width: 100%;
	height: 100%;
	display: block;
}

header{
 	background: purple;
	height: 100px;
	padding:5px 5px 0px 5px;
	border-bottom-right-radius: 0px;
}

#menubalk nav{
	background: green;
	height:25px;
	width: inherit;
}

#menubalk ul{
	list-style-type:none;
	display:inline;
	margin-left:0px;
	padding-left:0px;
}

#menubalk li{
	display:inline;
	margin-left:0px;
}

#logoall img{
	width: 120px;
	float: left;
}

#home img{
	width= 100%;
}


#blog, #overwegingen, #gedichten {
	width: 100%;
	height: 100%-120px;
	display: block;
	float: right;
}

aside {
	background:green;
    margin-bottom:10px;
	height: max-height-120px;
	float: left;
	display:inline-block;
	color: white;
	font-weight: bold;
	text-decoration: none;
	padding: 10px 10px 10px 10px;
	border-radius: 5px 5px 5px 5px;
	line-height: 20px;
	width: 25%;
	overflow: hidden auto;
}
/*
section{
	float: right;
	height: 100%;
 	width: 70%%;
	border: 2px solid green; 
 	display:inline-block;
   overflow: hidden auto; 
}
*/

iframe{
	float: right;
	height: 100%-120px;
	min-height: 600px;
	width: 70%;
/*	display: inline-block;   */
}


#blog nav, #overwegingen nav, #gedichten nav{
	background:green;
	margin-bottom:10px;
	height: 100%;
	float: left;
	color: white;
	font-weight: bold;
	text-decoration: none;
	padding: 3px 6px 3px 0px;
	border-radius: 5px 5px 5px 5px;
	line-height: 21px;
}

#blog nav a, #overwegingen nav a, #gedichten nav a{
	color: white;
	font-weight: bold;
	text-decoration: none;
	padding: 3px 6px 3px 0px;
	border-radius: 5px 5px 5px 5px;
	line-height: 21px;
}

#blog nav a:hover, #overwegingen nav a:hover, #gedichten nav a:hover{
	color: black;
	background: #4ea64e;
}

ul{
	list-style-type: none;
}

footer{
	background: dodgerblue;
	text-align:center;
}
	
#formulier form{
	float: right;
	width: 60%;
	height: 100%;
	padding: 20px;
	display: block;
	border: 3px solid green;
}

.rechts{
	float:right;
} 

.clearright{
	clear: right;
}

.dikkerand{
	border: 10px solid white;
	border-radius:30px 30px 30px 0px;
}

.rondehoeken{
	border-radius:20px 20px 20px 0px;
}

 .mySlides img{
	float: right;	
	width: 70%;
	height: 70%;
	max-height: 500px;
	object-fit: contain;
}

/* Hide the images by default */
.mySlides{
	display: inline;
	display: none;
}

.slideshow-container{
	height = 100%;
	width = 70%;
	float  right;
}

.slideshow-container div{
	float: right;
/*	object-fit: contain;*/
}
	
 div #aanwijzing{
	display: inline;
}

.fotosentekst img, .fotosentekst p {
	display: inline;
}

#aanwijzing p{
	border: 2px solid green;
	text-align: center;
}

.prev, .next {
  cursor: pointer;
  position: relative;
  padding:0 15px 0px 15px;
  color: red;
  font-weight: bold;
  font-size: 12 px;
}
/* Position the buttons to the left and the right */
.prev{
float: left;
}

.next{
float: right;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}