/*Digitale Geletterdheid Intro pagina*/

 .placeholder {
      margin: 18px 0;
      padding: 16px;
      color: #555555;
      background: #f2f2f2;
      border: 2px dashed #03738C;
      border-radius: 9px;
    }

    .highlight {
      background: #d7ff65;
      padding: 3px 7px;
      margin-right: 7px;
      border-radius: 3px;
    }

    .slo-domein {
      background: #f9faff;
      color: #00095b;
    }

    /** LEERROUTE DG  Slider**/

    h3,
    h4,
    h5,
    .slo-kader p {
      margin-bottom: 5px;
      margin-top: 5px;
    }

    .slo-kader {
      background-color: #f0f8f0;
      border: 1px solid #a4a7cb;
      border-radius: 9px;
      padding: 24px 32px;
      margin: 5px 0;
      color: #333;
       line-height: 18px;
    }

    .inleiding,
    .toelichting {
      background-color: #03738c;
      border-radius: 9px;
      padding: 32px;
      margin: 15px 0;
      color: #ffffff;

      p {
        font-size: 1.4rem;
        line-height: 2rem;
      }

      a.glossary,
      a {
        color: #ffffff !important;
      }

      h1 {
        color: #ffffff !important;
      }
    }

    .toelichting h1 {
      font-size: 3rem;
    }


    .slo-kader header {
      color: #333;
    }

    .slo-kader header h5 {
      font-size: 22px;
    }

    section {
      display: block;
      margin-bottom: 20px;
      padding: 5px;
    }


    .hexicon {
      display: block;
      width: 80px;
      margin-left: 20px;
      margin-right: 20px;
    }

    .minicon {
      position: relative;
      top: 4px;
    }



    /** Digitale Geletterdheid Slider**/

    h3,
    h4,
    h5,
    .slo-kader p {
      margin-bottom: 5px;
      margin-top: 5px;
    }

    .slo-kader {
      background-color: #f0f8f0;
      border: 1px solid #a4a7cb;
      border-radius: 9px;
      padding: 24px 32px;
      margin: 5px 0;
      color: #333;
    }

    .inleiding,
    .toelichting {
      background-color: #03738c;
      border-radius: 9px;
      padding: 32px;
      margin: 15px 0;
      color: #ffffff;

      p {
        font-size: 1.4rem;
        line-height: 2rem;
      }

      a.glossary,
      a {
        color: #ffffff !important;
      }

      h1 {
        color: #ffffff !important;
      }
    }

    .toelichting h1 {
      font-size: 3rem;
    }


    .slo-kader header {
      color: #333;
    }

    .slo-kader header h5 {
      font-size: 22px;
    }

    section {
      display: block;
      margin-bottom: 20px;
      padding: 5px;
    }


    .hexicon {
      display: block;
      width: 80px;
      margin-left: 20px;
      margin-right: 20px;
    }

    .minicon {
      position: relative;
      top: 4px;
    }


    /* Digitale Geletterdheid Slideshow Navigation */

#slideshow {
  overflow: hidden;
  width: 732px;
  margin: 0 auto;
  min-height: 500px;
}

.slide {
  float: left;
  width: 732px;
  min-height: 100%;
  box-sizing: border-box;
}

.slide-wrapper {
  width: calc(732px * 4);
  margin-left: 0;
  transition: margin-left 0.6s ease;
  display: flex;
  flex-direction: row;
}

    .slider-radio {
      display: none;
    }

    .slider-nav {
      text-align: center;
      margin: 15px 0 25px;
    }

    .slider-nav label {
      display: inline-block;
      background-color: #03738c;
      color: #fff;
      padding: 8px 16px;
      margin: 0 6px;
      border-radius: 6px;
      font-size: 1rem;
      cursor: pointer;
      border: 1px solid #025a6b;
      transition: background 0.2s ease;
    }

    .slider-nav label:hover {
      background-color: #025a6b;
    }

    #slide-po:checked~#slideshow .slide-wrapper {
      margin-left: 0;
    }

    #slide-so:checked~#slideshow .slide-wrapper {
      margin-left: calc(-732px * 1);
    }

    #slide-vso:checked~#slideshow .slide-wrapper {
      margin-left: calc(-732px * 2);
    }

    #slide-vo:checked~#slideshow .slide-wrapper {
      margin-left: calc(-732px * 3);
    }

    #slide-po:checked~.slider-nav label[for="slide-po"],
    #slide-so:checked~.slider-nav label[for="slide-so"],
    #slide-vso:checked~.slider-nav label[for="slide-vso"],
    #slide-vo:checked~.slider-nav label[for="slide-vo"] {
      background-color: #014056;
      font-weight: 600;
    }