* {
  box-sizing: border-box;
}

body {
background-image: url("../images/poedertorenbrugje.jpg") ;
width:100%;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
font-family:georgia, serif; 
color:rgb(10,10,10);  
margin:0;
padding:0;
}

/* HEADER CSS */

.topheader {
background-color:rgb(73,86,53); /*donkermosgroen*/
background-color:rgba(73,86,53, 0.8); /*donkermosgroen*/
color: rgb(255,251,206);
padding:10px; /*moet even groot zijn als die bij nav om ze mooi onder elkaar te houden! */
font-size:3vw;
}
.topheader h1 {
font-family:Brush Script MT,Georgia ,serif;
 font-size:8vw;
text-align: center;	
margin:0;
padding:0;
}

.topheader h2 {
font-family:'freestyle script', cursive;
 font-size:4vw;
text-align: center;	
margin:0;
padding:0;
}
@media screen and (max-width: 600px) {
   .topheader h1 {
   font-size:54px;
    }
    .topheader h2 {
   font-size:38px;
    }
}

.topheader img {
width:30%;
position: absolute;
margin:1px;
border-radius:1px; /* om hoeken af te ronden */
background-color: transparent;
}	
@media screen and (max-width: 600px) {
    .topheader img {
        width:100%;
       position: relative;
        margin:0px;
        
        background-color: transparent;
    }
}
/* NAV CSS */

.topnav {
background-color:rgb(144,159,67);
background-color:rgba(144,159,67, 0.8); /*lichter blad groen*/
padding:27px 0;  
font-size:1vw;
text-align: center;
}

.topnav a {
padding:10px 20px; /*hiermee grootte kleurkader regelen,samen met padding-bottom*/
margin:5px;
text-align:center;
text-decoration:none;
font-family:"Arial",sans-serif;
font-weight:bold;
border-radius: 15px;
}

.topnav a:link {
color: rgb(240,240,240);
background-color: rgb(144,46,46);
}
.topnav a:visited {
color:  rgb(240,240,240);
background-color:rgb(144,46,46);
}
.topnav a:hover {
color:  rgb(73,86,53);
background-color:rgb(240,236,174);
text-decoration: none;
}
.topnav a:active {
color: rgb(240,240,240);
background-color:rgb(144,46,46);
}
.topnav chosen{
color: rgb(73,86,53);
background-color:rgb(240,236,174);
}
.topnav submenu{
padding:10px; /*hiermee grootte kleurkader regelen, samen met padding-bottom*/
margin:2px;
text-align:left;
text-decoration:none; /*ipv underline, strkethrough,..*/
font-family:"Arial",sans-serif;
font-weight:bold;
color:#902E2E;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
 
  .topnav a.icon {
    float: right;
    display: block;
    width:30%;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
    width:100%;
    font-size:20px;
  }
}

.button{
	font-size:18px;   
	font-weight: bold; 
	background-color:white;
	color:rgb(144,46,46);
	text-align:center;
	border:2px solid rgb(144,159,67);
	border-radius:6px;
	padding: 10px 24px;
}
.button:hover {
  background-color: rgb(144,159,67); /* Green */
  color: rgb(255,251,206);
}
.agendabutton{
	font-size:14px;   
	font-weight: bold; 
	background-color: rgb(235,237,145);
	color:rgb(144,46,46);
	text-align:center;
	border:2px solid rgb(144,159,67);
	border-radius:4px;
	padding: 6px 10px;
}
.agendabutton:hover {
  background-color: rgb(144,159,67); /* Green */
  color: rgb(255,251,206);
}


p.italic {
    font-style: italic;
}

div {
    width:90%;
	margin:30px;
	padding: 1px;
	border-radius: 10px;
}
section {
background-color:rgba(255,251,206, 0.9);
margin:15px;
padding:20px;
width:90%;
float:center;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
}

/* DIV layouts */

.alertbox {
    background-color:rgba(235,237,145, 0.8);
    padding:10px;
	margin:10px;
	margin-left:auto;
	margin-right:auto;
    border-radius:15px; /*afgeronde hoeken*/
}

.tekst{ 
    margin-left:auto;
	margin-right:auto;
    font-family:Lucida Handwriting;
	font-size:100%;   
	color:rgb(73,86,53);
	text-align:center;
}

.tekstcenteren{ 
    width:500px;
    margin-left:auto;
	margin-right:auto;
    font-family:Lucida Handwriting;
	font-size:110%;   
	font-weight: bold; 
    color:rgb(73,86,53);
	text-align:center;
}

@media screen and (max-width: 600px) {
    .alertbox{
        width:100%;
    }
    .tekst{ 
        width:100%;
    }
    .tekstcenteren{ 
        width:100%;
    }
}

.paginatitel{
    font-family: 'Lucida Handwriting',freestyle script;
    font-size: 200%;
    text-align: center;	
    color:rgb(144,159,67);
    color:rgb(73,86,53);
}
.agendamaand{
    font-family: 'Lucida Handwriting',freestyle script;
    font-size: 150%;
    text-align: left;	
    color:rgb(144,159,67);
}
.img-container {
  float: left;
  width: 24%;
  padding: 10px;
  margin:5px;
  background-color:rgb(235,237,145);
  background-color:rgba(235,237,145,0.9);
}
.img-ondertekst {
 float:left;
  width: 23%;
  padding: 5px;
  margin:5px;
}
.img-naasttekstlinks {
    float: left;
  width: 30%;
  padding: 10px;
  margin:10px;
}
.img-naasttekstrechts {
    float: right;
  width: 30%;
  padding: 10px;
  margin:10px;
}


@media screen and (max-width: 600px) {
    .img-container{
        width:100%;
    }
    .img-naasttekstlinks{
        width:100%;
    }
    .img-naasttekstrechts{
        width:100%;
    }
    .img-ondertekst{
        width:100%;
    }
}

.img-container:hover {
    background-color:rgb(144,159,67);
  background-color:rgba(144,159,67,0.8);
   color:rgb(144,46,46);
}

.img-onderschrift{
    color:rgb(73,86,53); 
    padding:15px;
    margin:0;
    border:0;
    text-align:center;
    font-family:"Arial",sans-serif;
    font-weight:bold;
}
.img-onderschrift:hover{
    color:rgb(144,46,46);
}
.img-onderschrift2{
    color:rgb(14,14,14); 
    padding:5px;
    margin:0;
    border:0;
    text-align:center;
    font-family:"Arial",sans-serif;
}
.img-onderschrift2:hover{
    color:rgb(144,46,46);
}
.img-onderschrift2:visited{
    color:rgb(14,14,14);
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

a{
    color: rgb(144,46,46);
    text-decoration:none;
}
a:hover{
    color: rgb(73,86,53);
    text-decoration:none;
}
a:visited{
    color: rgb(144,46,46);
    text-decoration:none;
}

h3{ 
color:rgb(144,46,46);
font-size:150%;
text-align: center;	
}
h4{ /*gebruikt voor contact.php */
color:rgb(76,76,60);
text-align: center;	
}

h5{
color:rgb(235,151,94);
font-size:100%;
text-align: center;	
}

span.error {
color: #9F0013;	
font-size:90%;
	}




footer {
background-color:rgba(144,159,67, 0.8);  
width: 100%;
font-size:100%;
color:#fffbce;  
padding:0px;
margin: 0px;
margin-left:auto;
margin-right:auto;
clear:both;
display:block;
}
footer p {
width:100%;
text-align: center;
padding:10px;
margin-left:auto;
margin-right:auto;
font-weight:bold;
}
footer a:link {
color: rgb(144,46,46);
text-decoration:none;
}
footer a:visited {
color: rgb(144,46,46);
text-decoration:none;
}
footer a:hover {
color: rgb(56,108,95);
text-decoration:underline;

}