/* Opmaak voor de-piramide.org
========================================*/
:root {
  /* KLEUREN
========================================*/
  --merkkleur: #b7378f;
  --kleur-licht: hsl(0, 0%, 95%);
  /* TEKSTEN EN LINKS */
  --tekstkleur-licht: hsl(0, 0%, 95%);
  --tekstkleur: #000;
  --tekstkleur__kop: var(--merkkleur);
  --tekstkleur__header: var(--merkkleur);
  --tekstkleur__footer: var(--tekstkleur-licht);
  --tekstkleur__success: hsl(120, 32%, 20%);
  --tekstkleur__danger: hsl(2, 47%, 30%);
  --tekstkleur__knop: var(--tekstkleur-licht);
  --tekstkleur__skipto: var(--linkkleur);
  --linkkleur: var(--merkkleur);
  --linkkleur__hover: inherit;
  /* ACHTERGRONDEN */
  --achtergrond__body: #751657;
  --achtergrond__website: var(--merkkleur);
  --achtergrond__header: var(--achtergrond__inhoud);
  --achtergrond__inhoud: var(--kleur-licht);
  --achtergrond__aside: var(--achtergrond__inhoud);
  --achtergrond__footer: var(--merkkleur);
  --achtergrond__knop: var(--merkkleur);
  --achtergrond__skipto: var(--achtergrond__inhoud);
  --achtergrond__hoofdmenu-1: var(--kleur-licht);
  --achtergrond__hoofdmenu-2: #b7378f;
  --gradient__navicon: linear-gradient(to left, var(--achtergrond__header), var(--achtergrond__knop) 32%, var(--achtergrond__knop) 68%, var(--achtergrond__header));
  /* RANDEN */
  --randkleur: var(--merkkleur);
  --randkleur__input: var(--randkleur);
  --randkleur__skipto: var(--randkleur);
  /* VARIABELEN
========================================*/
  /* TEKST */
  --lettertype: "Josefin sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif;
  --lettergrootte: 1rem;
  --lettergrootte__kop-1: 2.7rem;
  --lettergrootte__kop-2: 2rem;
  --lettergrootte__kop-3: 1.1rem;
  --lettergrootte__kop-4: var(--lettergrootte);
  --lettergrootte__kop-5: var(--lettergrootte);
  --lettergrootte__kop-6: var(--lettergrootte);
  --lettergrootte__header: 1.4em;
  --lettergrootte__skipto: 1.3em;
  --lettergrootte__navicon: 2em;
  --letterdikte: 700;
  --regelafstand: 1.7;
  --regelafstand__kop: 1.2;
  /* MARGES & PADDING (VULLING) */
  --marge__website: 20px;
  --vulling__input: 5px;
  /* RANDEN, RADIUS & OMTREK */
  --rand__input: 2px solid var(--randkleur__input);
  --rand__skipto: 1px solid var(--randkleur__skipto);
  --radius: 3px;
  --radius__website: 15px;
  --radius__knop: 3px;
  /* MATEN */
  --grootte__checkbox: 1em;
  --grootte__radio: 1em;
}
/* MEDIA QUERIES
========================================*/
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  background: var(--achtergrond__body);
  color: var(--tekstkleur);
  font-family: var(--lettertype);
  font-size: var(--lettergrootte);
  line-height: var(--regelafstand);
}
@media (min-width: 960px) {
  body {
    padding: var(--marge__website) 0;
  }
}
@media (min-width: 1400px) {
  body {
    padding-top: 50px;
  }
}
h1,
h2,
h3,
h4 {
  color: var(--tekstkleur__kop);
}
h1 {
  font-size: var(--lettergrootte__kop-1);
  text-align: center;
}
h2,
h3 {
  line-height: var(--regelafstand__kop);
}
h2 {
  font-size: var(--lettergrootte__kop-2);
  margin-bottom: 0;
}
h3 {
  font-size: var(--lettergrootte__kop-3);
  margin-bottom: 0;
}
h3 + p {
  margin-top: 0;
}
h4 {
  font-size: var(--lettergrootte__kop-4);
  margin-bottom: 0;
}
h4 + p {
  margin-top: 0;
}
dd {
  margin: 0;
}
a {
  color: var(--linkkleur);
}
a:hover {
  color: var(--linkkleur__hover);
}
img {
  height: auto;
  max-width: 100%;
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
label,
input,
textarea {
  font-size: var(--lettergrootte);
  width: 100%;
}
label {
  margin-top: 1em;
}
input,
textarea {
  border: var(--rand__input);
  border-radius: var(--radius);
  font-family: var(--lettertype);
  padding: var(--vulling__input);
}
.contact-verplicht {
  color: var(--tekstkleur__danger);
  display: block;
}
input[type="checkbox"],
input[type="radio"] {
  height: var(--grootte__checkbox);
  width: var(--grootte__checkbox);
}
button,
#contact_verstuur,
.btn {
  background: var(--achtergrond__knop);
  border-radius: var(--radius);
  color: var(--tekstkleur__knop);
  cursor: pointer;
  display: inline-block;
  padding: 5px;
  max-width: 62%;
  width: 100%;
}
#contact_verstuur {
  margin: 1px 0;
}
.website {
  background: var(--achtergrond__website);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  max-width: 960px;
  min-height: 100%;
}
@media (min-width: 960px) {
  .website {
    border-radius: var(--radius__website);
    box-shadow: 0 0 15px 10px #000;
  }
}
header,
main,
footer,
aside,
.hoofdmenu-container {
  flex: 1 100%;
}
@media (min-width: 750px) {
  .inhoud-rechts {
    flex: 0 1 79%;
  }
}
@media (min-width: 750px) {
  aside {
    flex: 0 1 21%;
  }
}
@supports (display: grid) {
  .website {
    display: grid;
    grid-template-columns: [links] 210px [inhoud] 1fr [rechts];
    grid-template-rows: [kop] auto [menu] auto [menu2] auto [body] 1fr [voet] auto [onderaan];
  }
  @media (min-width: 750px) {
    .website {
      grid-template-rows: [kop] auto [menu] auto [body] 1fr [voet] auto [onderaan];
    }
  }
  header,
  main,
  footer,
  aside,
  .hoofdmenu-container {
    grid-column: links / rechts;
  }
  header {
    grid-row: kop;
  }
  .hoofdmenu-container {
    grid-row: menu;
  }
  footer {
    grid-row: voet;
  }
  main {
    grid-column: links / rechts;
    grid-row: body;
  }
  @media (min-width: 750px) {
    main.inhoud-rechts {
      grid-column-start: inhoud;
    }
  }
  aside {
    grid-column: links / rechts;
    grid-row: menu2;
  }
  @media (min-width: 750px) {
    aside {
      grid-column-end: inhoud;
      grid-row: body;
    }
  }
}
header {
  background: var(--achtergrond__header);
  color: var(--tekstkleur__header);
  font-size: var(--lettergrootte__header);
  padding: var(--marge__website);
  text-align: center;
}
@media (min-width: 750px) {
  header {
    position: relative;
  }
}
@media (min-width: 960px) {
  header {
    border-radius: var(--marge__website) var(--marge__website) 0 0;
  }
}
header h4 {
  line-height: 1;
  margin: 0;
}
@media (min-width: 750px) {
  .sitenaam-onderschrift {
    margin: 15px 0 15px 150px;
  }
}
.sitenaam {
  display: block;
  font-size: 1.6em;
  font-weight: var(--letterdikte);
}
@media (min-width: 960px) {
  .sitenaam {
    font-size: 2.2em;
  }
}
.siteonderschrift {
  display: block;
  font-weight: var(--letterdikte);
}
@media (min-width: 450px) {
  .logo-piramide {
    float: left;
  }
}
@media (min-width: 750px) {
  .logo-piramide {
    max-width: 150px;
    position: absolute;
  }
}
@media (min-width: 960px) {
  .logo-piramide {
    max-width: 200px;
  }
}
@media (min-width: 1400px) {
  .logo-piramide {
    margin: -2em 0 0 -2em;
    max-width: 250px;
  }
}
.logo {
  filter: drop-shadow(0 0 10px #000);
  width: 38%;
}
@media (min-width: 450px) {
  .logo {
    width: auto;
  }
}
main {
  background: var(--achtergrond__inhoud);
  padding: 0 var(--marge__website);
}
aside {
  background: var(--achtergrond__aside);
}
.buitenkant {
  display: none;
}
@media (min-width: 750px) {
  .buitenkant {
    display: block;
    padding: 6.7em 0 0 var(--marge__website);
  }
}
.buitenkant.open {
  display: block;
}
footer {
  background: var(--achtergrond__footer);
  color: var(--tekstkleur__footer);
  font-weight: 700;
  padding: 10px 30px;
  text-align: center;
}
@media (min-width: 960px) {
  footer {
    border-radius: 0 0 var(--radius__website) var(--radius__website);
  }
}
footer span {
  display: inline-block;
  width: 100%;
}
@media (min-width: 750px) {
  footer span {
    width: auto;
  }
}
@media (min-width: 750px) {
  footer span + span {
    margin-left: 1em;
  }
}
address {
  font-style: normal;
}
nav ul {
  line-height: 1.4;
  list-style: none;
  margin: 0;
  padding: 0;
}
nav li {
  border-bottom: 1px solid var(--randkleur);
  font-size: 2em;
  padding: 10px var(--marge__website);
}
@media (min-width: 750px) {
  nav li {
    font-size: var(--lettergrootte);
  }
}
nav li:last-child {
  border: none;
}
@media (min-width: 750px) {
  nav li {
    padding: 10px 0;
  }
}
nav a {
  text-decoration: none;
}
nav .webshop {
  background: url('../afbeeldingen/winkelwagentje.png') no-repeat;
  background-position: 0px center;
  background-size: 25px;
  display: block;
  min-height: 35px;
  padding-left: 35px;
}
@media (min-width: 750px) {
  nav .webshop {
    min-height: 25px;
  }
}
#success,
#error {
  text-align: center;
}
#success {
  color: var(--tekstkleur__success);
}
#error {
  color: var(--tekstkleur__danger);
}
.navicon {
  background: var(--achtergrond__knop);
  border: 0;
  color: var(--tekstkleur__knop);
  font-size: var(--lettergrootte__navicon);
  min-height: 40px;
  padding: 5px;
  min-width: 100%;
}
@media (min-width: 750px) {
  .navicon {
    display: none;
  }
}
@media (min-width: 450px) {
  .navicon-hoofdmenu {
    display: none;
  }
}
.navicon-energie2012menu,
.navicon-ascensionmenu,
.navicon-instrumentenmenu {
  background-image: var(--gradient__navicon);
}
/* SKIPTO-LINKS
========================================*/
.skipto {
  background: var(--achtergrond__skipto);
  border: var(--rand__skipto);
  border-radius: var(--radius);
  box-shadow: 0 0 4px 1px #000;
  color: var(--tekstkleur__skipto);
  display: block;
  font-size: var(--lettergrootte__skipto);
  font-weight: var(--letterdikte);
  left: -999em;
  padding: 1em;
  position: absolute;
  z-index: 10;
}
.skipto:hover {
  color: inherit;
}
.skipto:focus,
.skipto:active {
  left: 1em;
  top: 1em;
}
.hoofdmenu {
  background: var(--achtergrond__hoofdmenu-1);
  display: none;
  min-height: 40px;
}
@media (min-width: 450px) {
  .hoofdmenu {
    background-color: var(--achtergrond__hoofdmenu-2);
    display: block;
    font-size: 1.2em;
    padding: 10px;
  }
}
@media (min-width: 750px) {
  .hoofdmenu {
    background-image: linear-gradient(to right, var(--achtergrond__hoofdmenu-1), var(--achtergrond__hoofdmenu-2) 42%);
  }
}
.hoofdmenu.open {
  display: block;
}
@media (min-width: 450px) {
  .hoofdmenu ul {
    text-align: center;
  }
}
@media (min-width: 750px) {
  .hoofdmenu ul {
    text-align: right;
  }
}
@media (min-width: 450px) {
  .hoofdmenu li {
    border: none;
    display: inline-block;
    padding: 0 10px;
  }
}
@media (min-width: 450px) {
  .hoofdmenu a {
    color: var(--tekstkleur-licht);
    font-weight: var(--letterdikte);
    text-decoration: none;
  }
}
.agendapunten {
  list-style: none;
  padding: 0;
}
.agendapunten li {
  border-top: #000 solid 1px;
  margin-bottom: 1em;
  padding-top: 1em;
}
.agendapunten span {
  display: block;
  padding: 2px 0;
}
.programma_datum,
.programma_naam,
.programma_door {
  font-size: 1.1em;
}
.programma_naam {
  font-weight: 700;
}
.programma_info {
  line-height: 1.4em;
  padding: 10px 0 0;
}
.home .de-mens {
  float: left;
  margin-right: 1em;
  margin-bottom: 1em;
  max-width: 200px;
  width: 50%;
}
.instrumenten {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 -10px;
}
.product {
  flex: 0 1 160px;
  padding: 10px;
  min-width: 160px;
}
.product a {
  text-decoration: none;
}
.productafbeelding {
  height: 140px;
  width: 140px;
}
.product {
  margin-bottom: 1em;
}
.productafbeelding {
  display: block;
}
.productnaam {
  background: var(--merkkleur);
  color: var(--tekstkleur-licht);
  font-size: var(--lettergrootte__kop-3);
  margin: 0;
  padding: 5px 7px;
}
.wheels-voorbeelden {
  text-align: center;
}
.piramide-voorbeeld {
  float: left;
  margin-right: 20px;
}
/*# sourceMappingURL=opmaak.css.map */