/* CSS Document */
@import url(normalize.css);
/* reset css */
html {box-sizing: border-box;}
*, *::before, *::after {box-sizing: inherit;}
h1, h2, h3, h4, figure, p {margin: 0; padding: 0;}
@font-face {
    font-family: 'viner_hand_itcregular';
    src: url('vineritc-webfont.woff2') format('woff2'),
         url('vineritc-webfont.woff') format('woff');
    font-weight: normal; font-style: normal;}

/* general css*/
html, body{height: 100%; margin: 0; padding: 0; font-size: 100%;}
body{display: flex; flex-direction: column; align-items: stretch; max-width: 1200px; margin: 0 auto; background-color: rgba(253,253,240,.5);}

/*bckgrndcolor css*/
header{background-color: rgba(255,255,255,0.66); flex: 0 0 auto;}
nav{flex: 0 1 auto;background-color: #fdfdf0;}
main{ flex: auto; justify-content: space-around;background-color: #fdfdf0;}
.flexymain{display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-around; padding-bottom: 20%;}
.flexymain>p{padding-bottom: 5%;}
footer{background-color: #fdfdf0; margin-top: auto;}

/*header css*/
header{ min-height: 19rem; background-image: url("../img/headerimg.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover;}

/*nav css*/
ul{font-family: "viner_hand_itcregular"; list-style: none;
    display: flex;flex-direction: row; flex-wrap: wrap; justify-content: space-around; margin-left:0; padding-left: 0;}



li{width: 45%; margin: 1.5rem 0 .5rem 0; text-align: center;/*background-color: rgba(255,0,4,0.28);*/}
li a.aktief{color:#fdb546; cursor: default; text-decoration:underline; }
li a{font-size: 1.65rem;font-weight: 600;}
a:link, a:visited {color:#931100; text-decoration-color:#931100; }
a:hover {color:rgba(147,17,0,.6); text-decoration-color:rgba(147,17,0,.6);}

/*main css*/
main{padding: 0 0.25rem 2rem 0.25rem; color:rgba(60,42,43,1.00)}
/*h1{margin: 2rem 0 0 0; text-align: center;font-size: 3rem; color:#931100;}*/
main h2, main h1{font-size: 2rem; margin: 1.5rem 0 .75rem 0; color:rgba(60,42,43,1.00);}
p, td{font-size: 1.2rem;}
h1, h2, p{font-family:  sans-serif;}
.extra{display: flex;flex-direction: column-reverse}
.pic{margin: 2.5rem auto 0 auto;}
div.img{}
.text{}





/*footer css*/
footer{background-color:#fdb546; display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: 2rem; color:rgba(60,42,43,1.00); justify-content:  space-between;}
footer article{padding: 2rem 0.25rem 0 0.25rem;}
footer section {width: 100%;}
a.dark{color:#931100;text-decoration: underline;}
.koptekst{font-family: "viner_hand_itcregular";font-size: 22px;margin-bottom: .5rem; font-weight: 600; color:rgba(60,42,43,1.00);}
.aanbod{order: 1; max-width: 85%;}
.vlaggen{order: 2;}
.contact{order: 3; width: 60%;}
.reacties{order: 4; width: 100%;}
.english{margin-bottom: 2rem;}

@media screen and (max-width:460px){
    table tr td p{font-size: 1rem;}
    li a{font-size: 1.3rem;}
    h1, h2{font-size: 1.3rem;}}

@media screen and (min-width: 530px){
    footer{padding-bottom: 0;}
    table tr td p{font-size: 1rem;}
    .aanbod{order:1; max-width: 60%;}
    .contact{order:2; width: 39%;}
    .reacties{order:3; max-width: 50%;}
    .vlaggen{order:4; width: 40%; display: flex; flex-direction: row; wrap: nowrap; justify-content: space-around;}}

@media screen and (min-width: 635px){
    .aanbod{order:1; max-width: 60%;}
    .contact{order:2; max-width: 40%;}
    .reacties{order:3}
    .vlaggen{order:4}
    table tr td p{font-size: 1.0rem;}}

@media screen and (min-width: 725px){
    footer{padding-bottom: 2rem;}
    .koptekst{font-size: 24px;}
    .aanbod, .contact{width: 40%;}
    .vlaggen{order: 3; flex-direction: column; wrap: nowrap; width: 19%;}
    .reacties{order: 4;}
    .extra{flex-direction: row;}
    .pic{ margin: 1.5rem 1rem 0 0;}
    div.pic img{ max-height: 375px;}
}

@media screen and (min-width: 850px){
    .li1{flex: 2;}
    .li2{flex: 4;}
    .li3{flex: 2;}
    li{margin: 2.5rem 0 0 0;}
    footer article p{font-size: 1.1rem;}
    div.pic img{ min-height: 475px;}
}