/* (S)CSS written by Mattijs Lingsma - Lingsma | Electric Upright Basses - https://electric-upright-bass.com/  */
/* This website is cookie free and track free */
/* Thanks to https://www.w3schools.com/ and Microsoft Visual Code Studio */
/*kleuren definieren*/
/*rgb(160, 105, 80); #A0522D; */
/* offset-x | offset-y | blur-radius | color */
/* latin-ext - local load to avoid google tracking and need for GDPR cookie consent */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../style/fonts/EB-garamond-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin -local load to avoid google tracking and need for GDPR cookie consent */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../style/fonts/EB-garamond-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
  scroll-behavior: smooth;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
  color: #443e39;
  padding-right: 3%;
  background: -webkit-gradient(linear, left top, right top, from(#b1a99a), color-stop(9%, #b7b3a8), color-stop(62%, #b7b3a8), to(#9c9485));
  background: linear-gradient(90deg, #b1a99a 0%, #b7b3a8 9%, #b7b3a8 62%, #9c9485 100%);
}

body p {
  /* offset-x | offset-y | blur-radius | color */
  text-shadow: 0.1em 0.1em 0.1em #77514428;
}

/* GLOBALE NAVIGATIE STICKY MENU EN TARGET LINKS */
div.stickyMenu {
  /*POSITIE*/
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  /*TEKST*/
  font-family: 'Segoe UI light',Arial,sans-serif;
  font-size: 0.8em;
  font-weight: bolder;
  line-height: 1.5em;
  letter-spacing: 0.15em;
  font-variant: small-caps;
  /*UITLIJNING*/
  padding-left: 0.2em;
  padding-bottom: 0.3em;
  margin-bottom: 2.5em;
  /*OPMAAK*/
  background: #b7b3a8;
  border-bottom: 1px solid orangered;
  -webkit-box-shadow: 0em 0.2em 0.5em -0.5em #000000;
          box-shadow: 0em 0.2em 0.5em -0.5em #000000;
}

/* navigatie menu naar targets*/
[id*="target-"] {
  height: 1.5em;
}

/* SITE RIJEN EN KOLOMMEN NAAR SCHERMGROOTTE*/
/* hoofdindeling in rijen*/
.row::after {
  content: "";
  /* zet dit een spatie na de div met class 'row'? */
  clear: both;
  display: table;
}

/* rijen verdelen in 12 kolommen*/
/* row van links naar recht vullen met col */
/* voor alle class waarvan een deel van de naam col- is, geldt {} */
[class*="col-"] {
  float: left;
}

/* For mobile phones tot 600px schermbreedte */
/* voor alle class waarvan een deel van de naam col- is, geldt {} */
[class*="col-"] {
  width: 100%;
}

.articlewrapper {
  width: 92%;
  margin: auto;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-t-1 {
    width: 8.33%;
  }
  .col-t-2 {
    width: 16.66%;
  }
  .col-t-3 {
    width: 25%;
  }
  .col-t-4 {
    width: 33.33%;
  }
  .col-t-5 {
    width: 41.66%;
  }
  .col-t-6 {
    width: 50%;
  }
  .col-t-7 {
    width: 58.33%;
  }
  .col-t-8 {
    width: 66.66%;
  }
  .col-t-9 {
    width: 75%;
  }
  .col-t-10 {
    width: 83.33%;
  }
  .col-t-11 {
    width: 91.66%;
  }
  .col-t-12 {
    width: 100%;
  }
  body {
    font-size: 18px;
  }
  .articlewrapper {
    width: 90%;
    margin: auto;
  }
}

@media only screen and (min-width: 769px) {
  /* For laptops: */
  .col-lt-1 {
    width: 8.33%;
  }
  .col-lt-2 {
    width: 16.66%;
  }
  .col-lt-3 {
    width: 25%;
  }
  .col-lt-4 {
    width: 33.33%;
  }
  .col-lt-5 {
    width: 41.66%;
  }
  .col-lt-6 {
    width: 50%;
  }
  .col-lt-7 {
    width: 58.33%;
  }
  .col-lt-8 {
    width: 66.66%;
  }
  .col-lt-9 {
    width: 75%;
  }
  .col-lt-10 {
    width: 83.33%;
  }
  .col-lt-11 {
    width: 91.66%;
  }
  .col-lt-12 {
    width: 100%;
  }
  body {
    font-size: 18px;
    padding-left: 8%;
    padding-right: 8%;
  }
  .articlewrapper {
    width: 80%;
    margin: auto;
  }
}

@media only screen and (min-width: 1200px) {
  /* For big screen laptops: */
  body {
    font-size: 19px;
    padding-left: 12%;
    padding-right: 12%;
  }
  .articlewrapper {
    width: 70%;
    margin: auto;
  }
}

@media only screen and (min-width: 1450px) {
  /* For 4K: */
  .col-1 {
    width: 8.33%;
  }
  .col-2 {
    width: 16.66%;
  }
  .col-3 {
    width: 25%;
  }
  .col-4 {
    width: 33.33%;
  }
  .col-5 {
    width: 41.66%;
  }
  .col-6 {
    width: 50%;
  }
  .col-7 {
    width: 58.33%;
  }
  .col-8 {
    width: 66.66%;
  }
  .col-9 {
    width: 75%;
  }
  .col-10 {
    width: 83.33%;
  }
  .col-11 {
    width: 91.66%;
  }
  .col-12 {
    width: 100%;
  }
  body {
    font-size: 20px;
    padding-left: 15%;
    padding-right: 15%;
  }
  .articlewrapper {
    width: 60%;
    margin: auto;
  }
}

/* ++++++++++++++ logo ++++++++++++++++++++ */
.logo {
  width: 65%;
  margin: auto;
}

@media only screen and (min-width: 500px) {
  /* grootte logo */
  .logo {
    width: 33%;
    margin: auto;
  }
}

/* ++++++++++++++ positioneren ++++++++++++++++++++ */
img {
  width: 100%;
}

.right {
  float: right;
  clear: both;
}

.left {
  float: left;
  clear: both;
}

.centertext {
  text-align: center;
}

.BottomCorrection {
  margin-bottom: 1em;
}

.rightCorrection {
  margin-right: 1em;
  margin-bottom: 1em;
}

.TopLinkblockImage {
  padding-top: 1.2em;
}

.BottomLinkblockImage {
  padding-bottom: 1em;
}

@media only screen and (min-width: 600px) {
  .linkblockBreedte {
    padding-left: 1.2em;
    padding-right: 1.2em;
  }
  .TopLinkblockImage {
    padding-top: 1.8em;
  }
  .BottomLinkblockImage {
    padding-bottom: 0.7em;
  }
}

@media only screen and (min-width: 600px) {
  .minHeightA {
    min-height: 20em;
  }
}

/* ++++++++++++++ p h1 h2 h3 h4 h5 h6 ++++++++++++++++++++ */
h3 {
  font-family: 'Segoe UI light',Arial,sans-serif;
  letter-spacing: 0.17em;
  font-weight: 800;
  font-variant: small-caps;
  line-height: 1.8em;
  padding: 0em;
  margin-top: 1.5em;
  text-shadow: 0.2em 0.2em 0.25em #77514428;
}

h4 {
  /* font-weight: bold; */
  font-family: 'Segoe UI light',Arial,sans-serif;
  font-size: 1.1em;
  line-height: 1.1em;
  letter-spacing: 0.15em;
  font-variant: small-caps;
  border-left: 0.3em solid orangered;
  padding-left: 0.8em;
  margin-left: -1em;
  margin-top: 1.8em;
  margin-bottom: 0em;
}

@media only screen and (min-width: 769px) {
  h4 {
    margin-left: -1.7em;
  }
}

/* ++++++++++++++ HEADER ++++++++++++++++++++ */
.header {
  font-family: 'EB Garamond', serif;
  font-variant: small-caps;
  color: #443e39;
  text-shadow: 0.2em 0.2em 0.25em #77514428;
}

h1.header {
  letter-spacing: 0.1em;
}

@media only screen and (min-width: 635px) {
  /* centreren nobr */
  h1.header {
    text-align: center;
  }
}

h2.header {
  font-size: 1em;
  line-height: 1.2em;
  letter-spacing: 0.11em;
}

@media only screen and (min-width: 380px) {
  /* centreren nobr */
  h2.header {
    text-align: center;
  }
}

span.header {
  color: orangered;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5em;
  font-weight: 900;
}

p.header {
  font-size: 0.8em;
  font-weight: lighter;
  font-family: sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.25em;
}

.paragraaftitel {
  font-family: 'EB Garamond', serif;
  font-variant: small-caps;
  color: red;
  /*$letterkleur;*/
  text-shadow: 0.2em 0.2em 0.25em #77514428;
}

/* +++++++++++++++  +++++++++++++++++ */
/*.index-image {
    width:100%;
    margin-top: -2em;
}*/
/* ========= indexpagina intro-categorieblok ============= */
.introductieblok {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8em;
  margin: 0.5em 0em 2em 0em;
}

.introductieblok p {
  float: right;
}

.introductieblok h2 {
  font-family: 'Segoe UI light',Arial,sans-serif;
  font-size: 1.3em;
  line-height: 1.8em;
  letter-spacing: 0.2em;
  font-variant: small-caps;
  border-left: 0.3em solid orangered;
  border-bottom: 1px solid orangered;
  -webkit-box-shadow: 0em 0.2em 0.5em -0.5em #000000;
          box-shadow: 0em 0.2em 0.5em -0.5em #000000;
  padding-left: 0.4em;
  margin-left: -0.4em;
  margin-bottom: 1.2em;
  text-shadow: 0.1em 0.1em 0.15em  #74747488;
}

/* ==================indexpagina linkblokken ======================== */
.linkblock p {
  font-size: 0.8em;
}

.linkblock h3 {
  font-family: 'Segoe UI light',Arial,sans-serif;
  letter-spacing: 0.15em;
  font-size: 1em;
  font-weight: 800;
  font-variant: small-caps;
}

/* let op: inhoud van linkblok is een <a href>  */
a:link, a:visited {
  text-decoration: none;
  color: #443e39;
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
}

a:link img, a:visited img {
  border: 0px solid #ffffff;
  -webkit-box-shadow: 0.3em 0.3em 0.5em #00000073,  #00000031 -0.3em -0.3em 0.5em;
          box-shadow: 0.3em 0.3em 0.5em #00000073,  #00000031 -0.3em -0.3em 0.5em;
}

a:link span.blokje, a:visited span.blokje {
  /*color:orangered; */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.7em;
  font-weight: 900;
  line-height: 3em;
  letter-spacing: 0.8em;
}

a:link span.pijltje, a:visited span.pijltje {
  color: orangered;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  font-weight: 900;
  line-height: 3em;
  letter-spacing: 0.2em;
}

a:hover, a:active {
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
}

a:hover img, a:active img {
  -webkit-box-shadow: 0.5em 0.5em 0.7em #00000060, #797671 -0.3em -0.3em 0.5em;
          box-shadow: 0.5em 0.5em 0.7em #00000060, #797671 -0.3em -0.3em 0.5em;
  -webkit-transform: scale(1.02);
  transform: scale(1.02);
}

a:hover span.blokje, a:active span.blokje {
  color: orangered;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.7em;
  font-weight: 900;
  line-height: 3em;
  letter-spacing: 0.8em;
}

a:hover span.pijltje, a:active span.pijltje {
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  font-weight: 900;
  line-height: 3em;
  letter-spacing: 0.2em;
}

.schaduw-plaatje {
  -webkit-box-shadow: 0.1em 0.1em 0.2em #00000073,  #00000031 -0.1em -0.1em 0.2em;
          box-shadow: 0.1em 0.1em 0.2em #00000073,  #00000031 -0.1em -0.1em 0.2em;
}

.schaduw-plaatje p {
  margin-left: 1em;
  margin-right: 1em;
  padding-bottom: 1em;
  font-size: 0.8em;
}

/* cookie trail, bijv  home > article */
.cookie-trail {
  font-family: 'EB Garamond', serif;
}

/* =========== article.php titel van het artikel========== */
h1.article {
  font-family: 'EB Garamond', serif;
  font-variant: small-caps;
  font-size: 3em;
  letter-spacing: 0.2em;
  border-left: 1.5em solid #3f0f0f;
  padding-left: 0.5em;
  background-color: #f8f4f4;
}

.article h3 {
  font-family: 'Segoe UI light',Arial,sans-serif;
  font-size: 1.1em;
  line-height: 1.1em;
  letter-spacing: 0.15em;
  font-variant: small-caps;
  border-left: 0.3em solid orangered;
  padding-left: 0.8em;
  margin-left: -1em;
}

@media only screen and (min-width: 769px) {
  .article h3 {
    margin-left: -1.7em;
  }
}

.article p {
  font-size: 0.9em;
}

/* ============= footer ============= */
.footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #b7b3a8;
  border-top: 1px solid orangered;
  -webkit-box-shadow: 0.5em 0.1em 0.9em -0.5em #6843438c;
          box-shadow: 0.5em 0.1em 0.9em -0.5em #6843438c;
  margin-top: 3em;
}

.footerOpmaak {
  background-color: #b7b3a8;
  padding: 0.5em;
}

.footerOpmaak p {
  font-family: 'EB Garamond', serif;
  font-size: 0.9em;
  line-height: 0.9em;
  color: black;
}

.footerOpmaak h4 {
  font-family: sans-serif;
  font-size: 0.8em;
  font-weight: ligher;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

#BackTop {
  z-index: 1;
  position: fixed;
  border: 1px solid lightgray;
  border-radius: 1em;
  background-color: orangered;
  width: 2em;
  height: auto;
  bottom: 0.1em;
  right: 0.1em;
  -webkit-box-shadow: 0.1em 0.1em 0.3em  #535353;
          box-shadow: 0.1em 0.1em 0.3em  #535353;
}

#BackTop p {
  font-size: 1em;
  text-align: center;
  line-height: 0.01em;
  color: #9e9e9e;
}

/* This text is in Courier New */
.class-courier {
  font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
  font-weight: bold;
}

/* ArtikelIntro opmaak */
p.class-ArtikelIntro {
  font-family: Calibri, 'Trebuchet MS', sans-serif;
  font-size: 1em;
}

div.class-ArtikelIntro {
  padding-left: 2em;
  padding-right: 2em;
  padding-top: 2em;
  padding-bottom: 4em;
}

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}

.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/*# sourceMappingURL=style.css.map */