/* Opmaak Algemeen + opmaak over verschillende pagina's */

body 
{ 
font-family:Verdana, Geneva, Tahoma, sans-serif; 
letter-spacing: 1px; 
background-color: rgb(221, 248, 221); 
font-size: 1vw;
margin: 0;
}
@media (min-width: 768px) 
{
body
{
background-color: none;
background-image: linear-gradient(135deg,rgb(221, 248, 221), white, white); 
background-repeat: no-repeat; 
}
}

h1
{
font-size: 8vw; 
text-align: center; 
margin-top: 4vw;
text-decoration: underline;
margin-left: 1vw;
margin-right: 1vw;
}
@media (min-width: 768px)
{h1
{
font-size: 6vw;
}
} 
@media (min-width: 1250px)
{h1
{
font-size: 4vw;
}
} 

.inleiding
{
text-align: center; 
font-size: 6vw;
font-style: italic; 
margin-bottom: 4vw; 
font-weight: normal;
margin: 0vw 2vw 3vw 2vw;
}
@media (min-width: 768px)
{
.inleiding
{
font-size: 4vw;
}
} 
@media (min-width: 1250px)
{
.inleiding
{
font-size: 2vw;
}
} 

p
{
margin: 1vw 5vw 1vw 5vw; 
}

.titel
{
text-align: left; 
margin: 1vw 5vw 1vw 5vw; 
text-decoration: underline; 
font-style: italic;
}

a:link
{
text-decoration: none;
}


/*Opmaak navigatiemenu*/

header
{
position: sticky;
top: 0;
display: block;
margin: 0;
}

ul.topnav 
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #00FF99;
font-family: "Gluten"; src: url(Gluten-SemiBold.ttf); 
}

ul.topnav li 
{float: none;}
@media (min-width: 600px)
{
ul.topnav li
{
float: left;
}   
}

ul.topnav li a 
{
float: left;
color: black;
text-align: center;
padding: 2vw;
background-color: #00FF99;
font-size: 4vw;
font-weight: bold; 
width: 45%;
}
@media (min-width: 600px)
{
ul.topnav li a
{
font-size: 3vw;
padding: 1.5vw;
width: auto;
}   
}
@media (min-width: 820px)
{
ul.topnav li a
{
font-size: 3vw;
padding: 1vw;
}   
}


/*Opmaak Homepagina*/

.inleidinghomepagina
{
text-align: center; 
font-size: 4vw;
font-style: italic; 
margin-bottom: 4vw; 
font-weight: normal;
margin: 0vw 3vw 3vw 3vw;
}
@media (min-width: 768px)
{
.inleidinghomepagina
{
font-size: 3vw;
}
} 
@media (min-width: 1250px)
{
.inleidinghomepagina
{
font-size: 2vw;
}
} 

p
{
margin: 1vw 5vw 1vw 5vw; 
}


.bodyhomepagina
{
font-family: "Gluten"; src: url(Gluten-SemiBold.ttf);   
}

.titelhomepagina
{
font-size: 9vw;
margin-bottom: 0vw;
}
@media (min-width: 768px)
{
.titelhomepagina
{
font-size: 7vw;
margin-bottom: 0vw;
}
}
@media (min-width: 1250px)
{
.titelhomepagina
{
font-size: 5vw;
}
} 

.fpandahomepagina
{
display: block; 
width: 35%; 
margin: auto;
}
@media (min-width: 768px)
{
.fpandahomepagina
{
width: 30%;
}
}
@media (min-width: 1250px)
{
.fpandahomepagina
{
width: 25%;
}
}

.container 
{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: auto; 
width: 90%;
height: auto; 
justify-content: space-around;
}
@media (min-width: 768px)
{
.container
{
width: 80%;
}
} 

.box 
{
text-align: center;
background-color: #C3DD82;
margin: 1vw; 
padding: 3vw; 
border: 0.5vw; 
border-style: solid; 
border-color: #457A74;
width: 80%; 
height:auto;
}
@media (min-width: 768px)
{
.box
{
width: 35%;
border: 1vw;
border-style: ridge; 
border-color: #457A74;
background-color: rgb(221, 248, 221);
}
} 

.boxfaq
{
text-align: center;
background-color: #C3DD82;
margin: 1vw; 
padding: 3vw; 
border: 0.5vw; 
border-style: solid; 
border-color: #457A74;
width: 80%; 
height:auto;
}
@media (min-width: 768px)
{
.boxfaq
{
width: 35%;
border: 1vw;
margin-left: 5vw;
margin-right: 5vw;
border-style: ridge; 
border-color: #457A74;
background-color: rgb(221, 248, 221);
}
} 

.titelinblokhomepagina
{
margin: 0; 
font-weight: bold; 
text-decoration: underline; 
margin-bottom: 2vw; 
font-size: 4.5vw;
}
@media (min-width: 768px)
{
.titelinblokhomepagina
{
font-size: 4vw;
}
} 
@media (min-width: 1250px)
{
.titelinblokhomepagina
{
font-size: 2.5vw;
}
} 

.tekstinblokhomepagina
{
margin: 0; 
font-size: 3.5vw; 
padding-left: 0; 
text-align: center;
}
@media (min-width: 768px)
{
.tekstinblokhomepagina
{
font-size: 3vw;
}
} 
@media (min-width: 1250px)
{
.tekstinblokhomepagina
{
font-size: 2vw;
}
} 


/* Opmaak onsverhaal */

/*img - .OV-middenfoto*/

.OV-middenfoto
{ 
display: block; 
margin: auto; 
width: 80%; 
height: auto;
}
@media (min-width: 768px)
{
.OV-middenfoto
{
display: none;
}   
}

.OV-fotolinks
{ 
display: none;
}
@media (min-width: 768px)
{
.OV-fotolinks
{
display: block;
float: left; 
margin-block: 5px; 
margin-left: 5vw; 
margin-right: 2vw; 
width: 30%;
height: auto;
}
} 

/* img - .OV-onderfoto*/

.OV-onderfoto
{ 
display: none;
}
@media (min-width: 768px)
{
.OV-onderfoto
{
display: block;
float: right;
margin-block: 5px; 
margin-left: 2vw; 
margin-right: 5vw; 
width: 30%;
height: auto;
}
}  


/* img - .OV-fotoondermidden*/
.OV-fotoondermidden
{ 
display: block; 
margin: auto; 
width: 80%; 
height: auto;
}
@media (min-width: 768px)
{
.OV-fotoondermidden
{
display: none;
}
}  

.OV-middenfoto
{ 
display: block; 
margin: auto; 
width: 80%; 
height: auto;
}
@media (min-width: 768px)
{
.OV-middenfoto
{
display: none;
}   
}


.titelonsverhaal
{
font-size: 8vw;
margin: 1vw 5vw 1vw 5vw; 
text-decoration: underline; 
font-style: italic;
margin-top: 3vw;
}
@media (min-width: 768px)
{
.titelonsverhaal
{
text-align: left; 
font-size: 4vw;
}   
}
@media (min-width: 1250px)
{
.titelonsverhaal
{
text-align: left; 
font-size: 3vw;
}   
}

.ponsverhaal
{
text-align: center; 
font-size: 5vw;
}
@media (min-width: 768px)
{
.ponsverhaal
{
text-align: left; 
font-size: 2vw;
}   
}
@media (min-width: 1250px)
{
.ponsverhaal
{
font-size: 1.5vw;
}   
}


/* Opmaak termen */

.ptermen, .samenvatting
{
margin: 1vw 5vw 3vw 5vw; 
font-size: 5vw;
text-align: left; 
}
@media (min-width: 768px)
{
.ptermen, .samenvatting
{
font-size: 2vw; 
}   
}
@media (min-width: 1250px)
{
.ptermen, .samenvatting
{
font-size: 1.5vw; 
}   
}

.samenvatting
{
font-weight: bold;
}

iframe
{
display: block; margin: auto; width: 560px; height: 315px; margin-bottom: 3vw;
}
@media (max-width: 768px)
{
iframe
{
display: block; margin: auto; width: 70%; height: auto;
margin-bottom: 5vw;
}   
}

a:link
{
color: black;
}

a:visited
{
color: black;
}

.bron
{
font-style: italic; color: black; margin-bottom: 3vw; display: block; margin-right: 1vw; font-size: 4vw;
}
@media (min-width: 768px)
{
.bron
{
font-size: 2vw;
}   
}
@media (min-width: 1250px)
{
.bron
{
font-size: 1.5vw;
} 
}

.enkelelijst
{
font-size: 5vw; list-style-type: square; font-style: italic; margin-left: 3vw;
}

@media (min-width: 768px)
{
.enkelelijst
{
font-size: 2vw;
}   
}
@media (min-width: 1250px)
{
.enkelelijst
{
font-size: 1.5vw;
} 
}

.dubbelelijst
{
font-size:5vw; 
list-style-type:circle; 
margin-left: 5vw; 
margin-top: 0;
}

.lidubbbelelijst
{
font-size: 4vw;
font-weight: bold; 
margin-top: 0vw;
}
@media (min-width: 768px)
{
.lidubbbelelijst
{
font-size: 2vw; 
margin-top: 0vw;
}   
}
@media (min-width: 1250px)
{
.lidubbbelelijst
{
font-size: 1.5vw; 
margin-top: 0vw;
}
}

.antwoorddubbelelijst
{
margin-left: 0%; 
font-style: italic;
font-size: 4vw;
}
@media (min-width: 768px)
{
.antwoorddubbelelijst
{
font-size: 2vw; 
}   
}
@media (min-width: 1250px)
{
.antwoorddubbelelijst
{
font-size: 1.5vw; 
}
}


/*Opmaak faq*/

.lijstitemfaq
{
list-style-type: none; 
font-size: 4vw; 
margin: 0;
}

@media (min-width: 768px) 
{
.lijstitemfaq
{
font-size: 2.5vw; 
margin-left: 0vw;
}
}
@media (min-width: 1250px)
{
.lijstitemfaq
{
font-size: 2vw; 
margin-top: 0vw;
}   
}

.vraagfaq
{
font-weight: bold; 
margin-top: 2vw;
}

.antwoordfaq
{
font-style: italic; 
margin-bottom: 2vw; 
font-size: 4vw;
}
@media (min-width: 768px) 
{
.antwoordfaq
{
font-size: 2.5vw; 
margin-left: 2vw;
}
}
@media (min-width: 1250px)
{
.antwoordfaq
{
font-size: 2vw; 
margin-top: 0vw;
}   
}


/*Opmaak Extra's*/

.linkennaarrecepten
{
margin: auto; 
text-align: center;
}

.receptenlinkextras
{
font-size: 6vw; 
font-family: "Gluten"; 
src: url(Gluten-SemiBold.ttf);
}
@media (min-width: 768px) 
{
.receptenlinkextras
{
font-size: 4vw; 
}
}
@media (min-width: 1250px)
{
.receptenlinkextras
{
font-size: 3vw;
}   
}

.tussenteken
{
height: 25px; 
width: auto; 
display: block; 
margin: auto; 
margin-top: 1vw; 
margin-bottom: 2vw;
}
@media (min-width: 768px) 
{
.tussenteken
{
height: 35px; 
width: auto;
margin-top: none; 
margin-bottom: none;
}
}
@media (min-width: 1250px)
{
.tussenteken
{
height: 45px; 
width: auto;
margin-top: none; 
margin-bottom: none;
}   
}

.fotogalerij
{
width: 80%; 
display: block; 
margin: auto;
margin-top: 3vw;
}
@media (min-width: 768px)
{
.fotogalerij
{
display: grid;
width: 768px;
height: 768px;
grid-template-columns: 25%;
grid-template-rows: 25%;
margin: auto;
margin-top: 1.5vw;
}   
}

.spaghetti
{
width: 80%;
height: auto;
display: block; 
margin: auto;
margin-top: 2vw;
}
@media (min-width: 768px)
{
.spaghetti
{
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
height: 384px;
width: 384px;
padding: 0;
margin-top: 0vw;
}   
}

.notenenzadenbrood
{
width: 80%;
height: auto;
display: block; 
margin: auto;
margin-top: 2vw;
}
@media (min-width: 768px)
{
.notenenzadenbrood
{
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 2;
height: 192px;
width: 384px;
border: 0;
padding: 0;
margin-top: 0vw;
}   
}

.cake
{
width: 80%;
height: auto;
display: block; 
margin: auto;
margin-top: 2vw;
}
@media (min-width: 768px)
{
.cake
{
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 4;
height: 384px;
width: 384px;
border: 0;
padding: 0;
margin-top: 0vw;
}   
}

.pizza
{
width: 80%;
height: auto;
display: block; 
margin: auto;
margin-top: 2vw;
}
@media (min-width: 768px)
{
.pizza
{
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 4;
grid-row-end: 3;
height: 192px;
width: 384px;
border: 0;
padding: 0;
margin-top: 0vw;
}   
}

.stoofvlees
{
width: 80%;
height: auto;
display: block; 
margin: auto;
margin-top: 2vw;
}
@media (min-width: 768px)
{
.stoofvlees
{
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 4;
grid-row-end: 5;
height: 192px;
width: 768px;
border: 0;
padding: 0;
margin-top: 0vw;
}   
}


/* Opmaak Contact */

.titelform
{
text-align: left; 
text-decoration: underline; 
font-style: italic; 
font-size: 6vw; 
margin-bottom: 3vw; 
margin-top: 2vw; 
margin-left: 2.5vw;
}
@media (min-width: 768px) 
{
.titelform
{
font-size: 4vw;
margin-bottom: 2vw;
}
}
@media (min-width: 1250px)
{
.titelform
{
font-size: 2.5vw;
margin-bottom: 1vw;
}   
}

.eigencontactgegevens
{
font-size: 4vw; 
font-style: italic;
}
@media (min-width: 768px) 
{
.eigencontactgegevens
{
font-size: 3vw;
}
}
@media (min-width: 1250px)
{
.eigencontactgegevens
{
font-size: 1.5vw;
}   
}

label
{
margin-top: 2vw; 
font-size: 4vw;
margin-bottom: 1vw;
}
@media (min-width: 768px)
{
label
{
font-size: 3vw;
}
}
@media (min-width: 1250px)
{
label
{
font-size: 2vw;
}   
}

.tekstinvoerform
{
width: 80%; 
height: 5vw; 
padding: 1vw; 
font-size: 4vw;
margin-top: 1vw;
margin-bottom: 2vw;
display: block;
}
@media (min-width: 768px) 
{
.tekstinvoerform
{
height: 3vw;
font-size: 3vw;
margin-top: 0.5vw;
margin-bottom: 1.5vw;
width: 70%;
}
}
@media (min-width: 1250px)
{
.tekstinvoerform
{
height: 1.5vw;
font-size: 1.5vw;
margin-bottom: 0.5vw;
width: 50%; 
}   
}

select
{
width: 80%; 
height: 8vw; 
padding: 1vw; 
font-size: 4vw;
margin-top: 2vw;
margin-bottom: 2vw;
display: block;
}
@media (min-width: 768px) 
{
select
{
height: 6vw; 
font-size: 2.5vw;
margin-top: 1vw;
margin-bottom: 2vw;
width: 70%; 
}
}
@media (min-width: 1250px)
{
select
{
height: 3vw; 
padding: 0.25vw; 
font-size: 2vw;
margin-top: 1vw;
margin-bottom: 1vw;
width: 50%; 
}   
}

textarea
{
width: 80%;
height: 20vw; 
padding: 1vw; 
font-size: 4vw;
margin-top: 2vw;
margin-bottom: 2vw;
display: block;
}
@media (min-width: 768px) 
{
textarea
{
font-size: 2.5vw;
height: 15vw; 
margin-top: 1vw;
margin-bottom: 1vw;
width: 70%;
}
}
@media (min-width: 1250px)
{
textarea
{
font-size: 1.5vw;
height: 10vw;
margin-top: 0.5vw;
margin-bottom: 0.5vw;
width: 50%;
}   
}

.cfvraag
{
text-align: left; 
width: 100%; 
font-style: italic; 
font-size: 4vw; 
margin: 0vw;
margin-bottom: 2vw;
}
@media (min-width: 768px) 
{
.cfvraag
{
font-size: 3vw; 
}
}
@media (min-width: 1250px)
{
.cfvraag
{
font-size: 2vw; 
}   
}

.datepicker
{
width: 80%;
height: 8vw; 
padding: 1vw; 
font-size: 4vw;
margin-top: 2vw;
margin-bottom: 2vw;
}
@media (min-width: 768px) 
{
.datepicker
{
height: 6vw; 
font-size: 3vw;
padding: 0.5vw;
width: 70%;
}
}
@media (min-width: 1250px)
{
.datepicker
{
height: 3vw; 
font-size: 2vw;
width: 50%;
}   
}

button
{
display: block; 
width: 80%; 
background-color:  #00FF99; 
padding: 5px; 
font-weight: bold; 
font-size: 5vw;
margin-bottom: 2vw;
}
@media (min-width: 768px) 
{
button
{
font-size: 3vw;
width: 70%; 
}
}
@media (min-width: 1250px) 
{
button
{
font-size: 2vw;
width: 50%; 
}
}


/* Opmaak footer */

hr
{
border-color: black; 
width: 85%;
}

#footer
{
padding-top: 2px; 
font-size: 2vw; 
font-style: italic;
text-align: center;
}
@media (min-width: 768px) 
{   
#footer
{
font-size: 2vw;
}
}
@media (min-width: 1250px) 
{
#footer
{
font-size: 1.5vw;
}
}