<!-- style sheet voor de site van Marcel van Nunen -->

@media screen and (max-width: 700px) {.row, .navbar {flex-direction: column; } }

main {float: left; flex: 28%; padding: 80px; }

body {font-family: Arial; margin: 0; }

.row {display: flex; flex-wrap: wrap; }

.img {vertical-align: middle; max-width: 500px; }

.ex1 {max-width: 500px; padding: 2px; background-color: white}

.ex2 {max-width: 500px; padding: 2px; background-color: white; display: flex; flex-wrap: wrap; text-align:left}

.ue {padding: 0px; max-width: 500px; text-align: left; color: black; background: white; }

.uf {padding: 0px; max-width: 500px; text-align: center; color: black; background: white; }

<!-- was

button {#"background-color:#ecf7c1"; 
    "color:#a3b755"#background-color: #cc0000; <!-- rood -->  border: none; color: white; padding:10px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; }

-->

button {background-color:#ecf7c1; color:#a3b755; border: none; padding:10px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; margin: 20px 20px; cursor: pointer; }

button1 {background-color: #a3b755; <!-- groen --> border: none; color: white; padding: 15px 15px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; margin: 4px 2px; cursor: pointer; }

button2 {background-color: #cc0000; <!-- rood --> border: none; color: white; padding: 2px 2px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; }




/* Position the image container (needed to position the left and right arrows) */
.container {position: relative; max-width: 500px; }

/* Hide the images by default */
.mySlides {display: none; }

/* Add a pointer when hovering over the thumbnail images */
.cursor {cursor: pointer; }

/* Next & previous buttons */
.prev,
.next {cursor: pointer; position: absolute; width: auto; padding: 10px; color: black; font-weight: bold; font-size: 20px; border-radius: 0 3px 3px 0;  user-select: none; -webkit-user-select: none; }

/* Position the "next button" to the right */
.next {right: 0; border-radius: 3px 0 0 3px; }

/* Position the "prev button" to the left */
.prev {left: 0; border-radius: 3px 0 0 3px; }

/* On hover, add a background color with a little bit see-through */
.prev:hover,
.next:hover {background-color: #edefbf; }

/* Number text (1/3 etc) */
.numbertext {color: #ffd480; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; }

/* Container for image text */
.caption-container {text-align: center; background-color: #999900; padding: 2px 16px; color: white; }

.row:after {content: ""; display: table; clear: both; }

/* Add a transparency effect for thumnbail images */
.demo {opacity: 0.5; }

.active,
.demo:hover {opacity: 1; }