* { margin: 0; padding: 0; }

body { font-family: 'Hind', sans-serif; font-size: 18px; color: #404041; background: #fff; }
h1 { position: relative; z-index: 1; font-size: 72px; font-weight: normal; line-height: 64px; }
h1:after { position: absolute; left: 0; bottom: 0; width: 182px; height: 1px; content : ""; border-bottom: 4px solid #002a53; }
h2 { font-size: 36px; line-height: 185px; }
p { margin-bottom: 13px; line-height: 150%; }

#container { width: 100%; }

header { padding: 0; height: 100%; color: #fff; border: 13px solid #002a53; border-left: 0; border-right: 0;/* background: url(../assets/background-header.jpg) center top; */  background-image: url(../assets/background-header.jpg); background-size: 100% 100% }
header .header { position: relative; margin: 250px auto 0 auto; max-width: 1154px; min-height: 100%; height: inherit; background: rgba(0,42,83,.2); }
header .header span { display: block; padding-left: 32px; width: calc(100% - 32px;) min-height: 68px; font-size: 40px; line-height: 68px; text-transform: uppercase; letter-spacing: 3px; background: #002a53; }
header .header img { display: block; max-width: inherit; max-height: inherit; height: 100%; width: 100%; border-bottom: 10px solid #002a53; }
header .header .slogan { padding-top: 80px; min-height: calc(376px - 100px); text-align: center; font-size: 64px; line-height: 76px; text-shadow: 3px 3px #000; }
/*
header .sub-header { position: relative; margin: 384px auto 0 auto; max-width: 1153px; max-height: 284px; min-height: 100%; background: rgba(0,42,83,.2); }
header .marktberichten p { display: none; }
header p { position: absolute; top: 400px; width: 100%; text-align: center; font-size: 64px; line-height: 76px; text-shadow: 3px 3px #000; }
*/
header a { position: absolute; top: 46px; display: block; width: 66px; height: 65px; } 
header a.nl { right: 158px; background: url(../assets/flag-nl.png);  background-size: 100% 100%; } 
header a.de { right: 70px; background: url(../assets/flag-de.png);  background-size: 100% 100%;  } 
header a span { display: none; } 

#body { width: 100%; overflow: hidden; }
#body .body { margin: 0 auto; padding: 116px 42px 42px 42px; max-width: 1070px; text-align: justify; background: #ccd4dd; }
#body .body p:last-child { font-size: 24px; line-height: 50px; }
#body .body p:nth-last-child(2) { font-size: 21px; }

footer { position: relative; min-height: 100px; text-align: center; line-height: 112px; color: #000; }
footer a.arrow { position: absolute; left: calc(50% - 19px); top: -20px; width: 38px; height: 40px; font-size: 36px; color: #fff; text-decoration: none; line-height: normal; background: #002a53; }

@media only screen and (max-width:1280px) { 
  h1 { font-size: 48px; }
  h1:after { width: 124px; }
  h2 { font-size: 24px; line-height: 124px; }
  p { font-size: 12px; }

  header .header { margin: 254px auto 0 auto; max-width: 772px; }
  header .header span { font-size: 26px; line-height: 37px; }
  header a { width: 42px; height: 42px; }
  header a.nl { right: 94px; } 
  header a.de { right: 36px; } 
  header .header .slogan { min-height: 256px; }
  header .header .slogan p { font-size: 48px; }

  #body .body { max-width: 688px; }
  #body .body p:last-child { font-size: 14px; line-height: 50px; }
  #body .body p:nth-last-child(2) { font-size: 16px; }

  footer { font-size: 12px; }
  footer a.arrow { left: calc(50% - 12px); top: -14px; width: 24px; height: 27px; font-size: 24px; }
}

@media only screen and (max-width:1024px) { 
  h1 { font-size: 36px; }
  h1:after { width: 90px; }
  h2 { font-size: 18px; line-height: 100px; }

  header .header { margin: 204px auto 0 auto; max-width: 618px; }
  header .header span { display: block; font-size: 24px; line-height: 34px; }
  header .header .slogan { min-height: 200px; }
  header .header .slogan p { font-size: 42px; }

  #body .body { padding: 60px 25px 25px 25px; max-width: 568px; }
}

@media only screen and (max-width:768px) { 
  h1 { font-size: 30px; }
  h1:after { width: 80px; }

  header { border-top-width: 5px; border-bottom-width: 5px; }
  header .header { margin: 136px auto 0 auto; max-width: 572px; }
  header .header span { padding-left: 10px; font-size: 23px; }
  header .header .slogan { padding-top: 40px; min-height: 136px; text-shadow: 2px 2px #000; }
  header .header .slogan p { font-size: 36px; }
  header a { top: 11px; width: 30px; height: 30px; }
  header a.nl { right: 44px; } 
  header a.de { right: 9px; } 

  #body .body { max-width: 522px; }
  #body .body p:nth-last-child(2) { font-size: 14px; }
}

@media only screen and (max-width:480px) { 
  h1 { font-size: 24px; }
  h1:after { width: 64px; }

  header .header { margin: 90px auto 0 auto; max-width: 412px; }
  header .header span { padding: 2px 0 0 10px; font-size: 14px; line-height: normal; }
  header .header .slogan { padding-top: 24px; min-height: 100px; }
  header .header .slogan p { font-size: 28px; }

  #body .body { max-width: 362px; }
}

@media only screen and (max-width:320px) { 
  h1 { font-size: 24px; }
  h1:after { width: 64px; }
  h2 { font-size: 18px; line-height: 100px; }
  p { font-size: 12px; }

  header { border-top-width: 3px; border-bottom-width: 3px; }
  header .header { margin: 90px auto 0 auto; max-width: 320px; }
  header .header span { padding: 2px 0 0 10px; font-size: 14px; line-height: normal; }
  header .header .slogan { padding-top: 24px; min-height: 100px; }
  header .header .slogan p { font-size: 24px; }

  #body .body { padding: 30px 10px 10px 10px; max-width: 300px; }
  #body .body p:nth-last-child(2) { font-size: 13px; }
}