/* cmsms stylesheet: mini_reset modified: zondag 27 juni 2021 16:50:32 */
/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */
html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal
}

ul {
    list-style: none
}

button, input, select, textarea {
    margin: 0
}

html {
    box-sizing: border-box
}

*, *:before, *:after {
    box-sizing: inherit
}

img, embed, iframe, object, audio, video {
    height: auto;
    max-width: 100%
}

iframe {
    border: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td, th {
    padding: 0;
    text-align: left
}
/* cmsms stylesheet: bxslider modified: dinsdag 29 juni 2021 10:26:02 */
/** VARIABLES
===================================*/
/** RESET AND LAYOUT
===================================*/
.bx-wrapper {
  position: relative;
/*  margin-bottom: 60px;*/
  padding: 0;
  *zoom: 1;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}
.bx-wrapper img {
  max-width: 100%;
  display: block;
}
.bxslider {
  margin: 0;
  padding: 0;
  /*fix flickering when used background-image instead of <img> (on Chrome)*/
  -webkit-perspective: 1000;
}
ul.bxslider {
  list-style: none;
}
.bx-viewport {
  /* fix other elements on the page moving (in Chrome) */
  -webkit-transform: translateZ(0);
}
/** THEME
===================================*/
/*.bx-wrapper {
  box-shadow: 0 0 5px #ccc;
  background: #fff;
}*/
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  position: absolute;
  bottom: -30px;
  width: 100%;
}
/* LOADER */
.bx-wrapper .bx-loading {
  min-height: 50px;
  background: url('images/bx_loader.gif') center center no-repeat #ffffff;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
}
/* PAGER */
.bx-wrapper .bx-pager {
  text-align: center;
  font-size: .85em;
  font-weight: bold;
  color: #666;
  padding-top: 20px;
}
.bx-wrapper .bx-pager.bx-default-pager a {
  background: #666;
  text-indent: -9999px;
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  outline: 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
  background: #000;
}
.bx-wrapper .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
  display: inline-block;
  vertical-align: bottom;
  *zoom: 1;
  *display: inline;
}
.bx-wrapper .bx-pager-item {
  font-size: 0;
  line-height: 0;
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
  left: -5px;
/*  background: url('https://www.iemandzoalsjij.nl/img/controls.png') no-repeat 0 -32px;*/
  background: url('https://www.iemandzoalsjij.nl/img/controle_vorige.png') no-repeat 0;
  background-size:cover;

}
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus {
  background-position: 0 0;
}
.bx-wrapper .bx-next {
  right: -5px;
  background: url('https://www.iemandzoalsjij.nl/img/controle_volgende.png') no-repeat;
}
/*.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-next:focus {
  background-position: -43px 0;
}*/
.bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 40%;
  margin-top: -16px;
  outline: 0;
  width: 75px;
  height: 75px;
  text-indent: -9999px;
  z-index: 9999;
}
.bx-wrapper .bx-controls-direction a.disabled {
  display: none;
}
/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
  text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
  display: block;
  text-indent: -9999px;
  width: 10px;
  height: 11px;
  outline: 0;
  background: url('images/controls.png') -86px -11px no-repeat;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active,
.bx-wrapper .bx-controls-auto .bx-start:focus {
  background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
  display: block;
  text-indent: -9999px;
  width: 9px;
  height: 11px;
  outline: 0;
  background: url('images/controls.png') -86px -44px no-repeat;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active,
.bx-wrapper .bx-controls-auto .bx-stop:focus {
  background-position: -86px -33px;
}
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
  text-align: left;
  width: 80%;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
  right: 0;
  width: 35px;
}
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #666;
  background: rgba(80, 80, 80, 0.75);
  width: 100%;
}
.bx-wrapper .bx-caption span {
  color: #fff;
  font-family: Arial;
  display: block;
  font-size: .85em;
  padding: 10px;
}
/* cmsms stylesheet: style modified: zaterdag 8 november 2025 09:09:57 */
@font-face {
    font-family: 'Comic Sans MS';
    src: url('https://www.iemandzoalsjij.nl/font/ComicSansMS-Bold.woff2') format('woff2'),
    url('https://www.iemandzoalsjij.nl/font/ComicSansMS-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
* {
    margin: 0;
    padding: 0;
}
html, body {
    width: 100%;
    height: 100%;
    font-family: 'Poppins', sans-serif;
    -ms-overflow-style: none;
    scrollbar-width: none;


}
html::-webkit-scrollbar {
    display: none;

}
body {
    padding-right: 17px;
    box-sizing: content-box;


}
/*algemeen*/
img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

h1 {
    font-size: calc(0.94vw + 18.34px);
    font-family: Comic Sans MS;
    color: #18256e;
}

h2 {
    font-size: 2.027rem;
    color: #be1a1a;
}

h3 {
    font-size: 1.802rem;
    color: #be1a1a;
}

.slide h3 {
    color: #000000;
}

h4 {
    font-style: 1.602rem;
    color: #be1a1a;
    font-weight: 700;

}
.txtRechts {
    text-align: right !important;
}
p, input, button, a, li {
    font-size: 1.125rem;
}
.txtWit {
color:#ffffff !important;
}

p {
    margin: 1rem 0;
}

.bold {
    font-weight: 700;

}

.alert {
    color: #be1a1a;
}

a {
    color: #000000;
    text-decoration: none;
}

a img {
    margin-left: 1.5rem;
}

/*ol {
    width: 90%;
    padding: 0 1.5rem;
    counter-reset: nummer;
}*/

ol li {
    margin-left: 1rem;
}

/*ol li:before {
    counter-increment: nummer;
    content: " " counter(nummer) ". ";
    margin-left: -1rem;
}*/

li.subMenu {
    color: #ffffff;
    margin-right: 1rem;
    width: calc(1.8vw + 110px);
    float: left;
    text-align: center;
}

li {
    list-style: none;
}

label {
    cursor: pointer;
}
span.roodTekst {
font-size:1.125rem;
}
header {
    width: 100%;
    height: auto;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background: #F97E21;
}

nav {
    width: 100%;
    height: auto;
    background: #181D27;
}

nav ul {
    width: auto;
    height: auto;
    padding: 0.25rem 0;
    z-index: 100;
    float: right;
}

nav ul li {
    margin-right: 1rem;
    width: calc(1.8vw + 110px);
    height: auto;
    float: left;
    text-align: center;
padding:0.5rem 0rem;
}

nav ul li a {
    color: #ffffff;
}

nav ul li:first-of-type {
    background: #8AC926;
}

nav ul li:nth-of-type(2) {
    background: #EF3E36;
}

nav ul li:nth-of-type(3) {
    background: #1982C4;
}

nav ul li:nth-of-type(4) {
    background: #791E94;
}
nav ul li:nth-of-type(5) {
    background: #2D3047;
}
nav ul li:nth-of-type(n):hover {
    background: #18256E;
}

nav ul li ul {
  width: auto;
    display: none;
    z-index: 100;
    position: absolute;
    background: #EF3E36;
}

nav ul li ul li {
    width: auto;
padding:0.5rem;
    border-bottom: 2px solid #122372;
margin-right:0;

}

nav ul li.subMenu ul li {
    background: unset;
}


nav ul li:hover ul, nav ul li:focus ul {
    display: flex;
    flex-direction: column;
height: auto;
margin-top:0.5rem;
}

nav ul li ul li a:hover, nav ul li ul li a:focus {
    background: #18256E;

}
.aparteLink {
margin-right: 1rem;
width: auto;
height: auto;
float: left;
text-align: center;
padding: 0.5rem 1rem;
margin-top:0.25rem;
background: #b4c1b6;
}
/*eind algemeen*/

.navLinks {
    grid-column: 1/3;
    height: auto;
    background: #D5D9D6;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.linkHolder {
    width: 50%;
    height: 50vh;
    display: flex;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.breadCrum {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 75%;
    margin-top: 1.5rem;
}

.breadCrum div {
    width: 33.333%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background: #002060;
}

.breadCrum img[src*=logo] {
    width: 50px;
    height: 50px;
    border: 3px solid #ffffff;
    border-radius: 50%;
}

.breadCrum img[src*=deur_breadcrump] {
    width: 50px;
    height: auto;
}

.breadCrum h2 {
    width: 100%;
    text-align: center;
    color: #be1a1a
}

.breadCrum div:first-of-type {
    border-right: 1px solid #ffffff;
    box-sizing: border-box;
}

.breadCrum div h4 {
    width: 100%;
    text-align: center;
    color: #ffcf00;
}

.breadCrum div p {
    color: #ffffff;
    margin-top: 0.5rem;
    text-align: center;
    width: 100%;
}

.breadCrump div img {
    align-self: center;
}

.linksWrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 50%;
    margin-top: 1.5rem;
}

.linksWrap p {
    text-align: center;
}

.linksWrap p.roodTekst {
    color: #be1a1a;
    width: 100%;
}

.linksWrap div:first-of-type img {
    width: 100%;
    height: auto;
    margin-left: 12.5%;
}

.linksWrap h2 {
    width: 100%;
    text-align: center;
}

.linksWrap div {
    background: #ffd03b;
}

.linksWrap a img {
    margin: 0;
}

.linksWrap div:first-of-type {
    width: 33.333%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    margin-right: 12%;
}

.linksWrap div:last-of-type {
    width: 45%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.linksWrap div:last-of-type a {
    width: 28px;
    height: 28px;
    background: #ffffff;
    border: 1px solid #000000;
    margin: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.linksWrap div:last-of-type a:hover, .linksWrap div:last-of-type a:focus {
    background: #002060;
    color: #ffffff;
}

.linksWrap div:last-of-type a.active {
    background: #002060;
    color: #ffffff;
}

/*inloggen*/

.inlogWrap {
    width: calc(5vw + 303px);
    height: auto;
    margin: auto;
}

.inloggen {
    width: calc(100% - 6px);
    height: auto;
    align-self: center;
    border: 3px solid #EF6D16;
    box-sizing: border-box;
    padding: 1rem;
}

.logo {
    width: calc(100% - 36px);
    margin: 2rem auto;

}

.inloggen form {
    width: 100%;
    height: auto;
}

.inloggen form .row {
    width: 100%;
    margin-bottom: 1rem;
    /*    display: flex;
        flex-wrap: wrap;*/
}

.inloggen form .row p {
    width: 100%;
    margin: unset;
}

.inloggen form .row p input {
    width: 100%;
}

button {
    width: 100%;
    border: none;
    background: #122372;
    color: #fefef3;
    padding: 0.5rem 0;
    box-shadow: 5px 5px 5px rgba(56, 54, 54, 0.75);
    text-align: center;
}

/*eind inloggen*/

/*infro*/
main {
    width: 100%;
    height: 74vh;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.tekstvak {
    grid-column: 1/3;
    min-height: 69.4vh;
    background: #D5D9D6;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/*.gebouw {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}*/

.tekstvak div {
    width: 85%;
    margin-top: 1rem;
    padding-bottom: 1rem;
}

.tekstvak div h3, .tekstvak div p {
    width: 75%;
}

.tekstvak div p:first-of-type {
    margin: unset;
}

.tekstvak label[for=lift] {
    margin: unset;
}

.tekstvak h1 {
    margin-bottom: 1.5rem;
}

.tekstvak h3 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.tekstvak h4 {
    margin-top: 0.5rem;
}

.tekstvak h4:last-of-type {
    margin-top: 2rem;
}

.tekstvak p {
    color: #000000;
    margin: unset;
}

.tekstvak a {
    width: 75%;
    display: flex;
    align-items: center;
    margin-top: 0.75rem;
}

/*.tekstvak a img[src*="introFilmButton"] {
    min-width: 50%;
    max-width: 100%;
}*/

.tekstvak .wrap {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
}

.tekstvak .wrap a {
    width: auto;
}

.tekstvak .wrap p {
    width: 27.5%;

}

.tekstvak .wrap label {
    margin-left: 0.75rem;
}

.beeldvak {
    grid-column: 3/6;
}


/*eind intro*/

/*home*/
.lobby {
    grid-column: 3/6;
    grid-row: 1;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: center;
    background: url("https://www.iemandzoalsjij.nl/img/lobby.png") center center no-repeat;
    background-size: contain;
    overflow: hidden;
}

.lobby input {
    display: none;
}

.liftDeel {
    width: 100%;
    height: 100%;
    grid-column: 1;
    grid-row: 1;
    z-index: 10;
    transform: scale(0);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: #B4C1B6;
    transition: all 1200ms linear;
}

input#lift:checked ~ .liftDeel {
    transform: scale(1);
    transition: transform 1200ms ease;
}

.liftWrap {
    width: 100%;
    height: 75%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-bottom: 30px solid grey;

}

.liftPaneel {
    width: auto;
    height: auto;
    background: #cfcfcf;
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    margin-bottom: 3rem;
}

.liftPaneel label {
    width: 58px;
    height: 58px;
    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;
    /*    background: #F1FAEE;*/
    margin-bottom: 0.5rem;
    font-size: 2.027rem;
}

.liftPaneel label[for=etage_1] {
    background: url("https://www.iemandzoalsjij.nl/img/liftKnopAanpakker.png") center center no-repeat;
    background-size: cover;
}

.liftPaneel label[for=etage_2] {
    background: url("https://www.iemandzoalsjij.nl/img/liftKnopBetrokken.png") center center no-repeat;
    background-size: cover;
}

.liftPaneel label[for=etage_3] {
    background: url("https://www.iemandzoalsjij.nl/img/liftKnopAmbitie.png") center center no-repeat;
    background-size: cover;
}

.liftPaneel label[for=etage_4] {
    background: url("https://www.iemandzoalsjij.nl/img/liftKnopTeamspeler.png") center center no-repeat;
    background-size: cover;
}

.liftPaneel label[for=etage_5] {
    background: url("https://www.iemandzoalsjij.nl/img/liftKnopOmgang.png") center center no-repeat;
    background-size: cover;
}
.lift {
    width: calc(17vw + 307px);
    height: 97%;
    background: #999999;
    background: -webkit-linear-gradient(top, #999999, #F7F7F7);
    background: -moz-linear-gradient(top, #999999, #F7F7F7);
    background: linear-gradient(to bottom, #999999, #F7F7F7);
    margin-left: 6.25%;
    align-self: flex-end;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.deurWrap {
    width: 88%;
    height: 100%;
    background: #A8A8A8;
    background: -webkit-linear-gradient(top, #A8A8A8, #F7F7F7);
    background: -moz-linear-gradient(top, #A8A8A8, #F7F7F7);
    background: linear-gradient(to bottom, #A8A8A8, #F7F7F7);
    align-self: flex-end;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 6% 90%;
    flex-wrap: wrap;
    overflow: hidden;
    align-content: flex-end;
}

.liftTekst {
    grid-column: 1/6;
    grid-row: 2;
    height: calc(100% - 36px);
    display: flex;
    align-self: flex-end;
    background: #D8BF6F;
    border-top: 4px solid #999999;
}

.liftTekst [class*=etage_] {
    display: none;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.liftTekst [class*=etage_] p {
    width: 75%;
}

.liftTekst [class*=etage_] h3 {
    color: #000000;
    font-weight: 700;
}

.liftTekst a {
    width: 76px !important;
    height: 76px !important;
    color: #ffffff;
    background: #122372;
    display: flex;
    justify-content: center;
    align-items: center;

}

.liftTekst [class*=etage_] img {
    width: auto;
    margin-bottom: 1rem;

}

.deurWrap input {
    display: none;
}

.infoBord {
    grid-column: 2/4;
    grid-row: 1;
    width: 146px;
    height: 46px;
    justify-self: center;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.infoBord span {
    font-size: 1.25rem;
    width: 100%;
    height: auto;
    color: #ff0000;
    background: #666666;
    display: flex;
    justify-content: center;
    border: 4px solid #9a9a9a;

}

.deurLinks, .deurRechts {
    height: calc(100% - 36px);
    background: rgb(234, 233, 237);
    background: linear-gradient(-167deg, rgba(234, 233, 237, 1) 0%, rgba(157, 158, 158, 1) 100%);
    transition: all 600ms ease;
    grid-row: 2;
    align-self: flex-end;
}

.deurLinks {
    grid-column: 1/3;
    background: rgb(234, 233, 237);
    background: linear-gradient(167deg, rgba(234, 233, 237, 1) 0%, rgba(157, 158, 158, 1) 100%);
    border-right: 1px solid #fefef3;
}

.deurRechts {
    grid-column: 3/5;
    border-left: 1px solid #fefef3;
}

input#etage_1:checked ~ .deurLinks {
    transform: translate(-97%, 0);
    transition: transform 1000ms linear;
}

input#etage_1:checked ~ .deurRechts {
    transform: translate(97%, 0);
    transition: transform 1000ms linear;
}

input#etage_1:checked ~ .liftTekst .etage_1 {
    display: flex;
}

input#etage_2:checked ~ .deurLinks {
    transform: translate(-97%, 0);
    transition: transform 1000ms linear;
}

input#etage_1:checked ~ .infoBord span:before {
    content: "1";

}

input#etage_2:checked ~ .deurRechts {
    transform: translate(97%, 0);
    transition: transform 1000ms linear;
}

input#etage_2:checked ~ .liftTekst .etage_2 {
    display: flex;
}

input#etage_2:checked ~ .infoBord span:before {
    content: "2";
}

input#etage_3:checked ~ .deurLinks {
    transform: translate(-97%, 0);
    transition: transform 1000ms linear;
}

input#etage_3:checked ~ .deurRechts {
    transform: translate(97%, 0);
    transition: transform 1000ms linear;
}

input#etage_3:checked ~ .liftTekst .etage_3 {
    display: flex;
}

input#etage_3:checked ~ .infoBord span:before {
    content: "3";
}

input#etage_4:checked ~ .deurLinks {
    transform: translate(-97%, 0);
    transition: transform 1000ms linear;
}

input#etage_4:checked ~ .deurRechts {
    transform: translate(97%, 0);
    transition: transform 1000ms linear;
}

input#etage_4:checked ~ .liftTekst .etage_4 {
    display: flex;
}

input#etage_4:checked ~ .infoBord span:before {
    content: "4";
}

input#etage_5:checked ~ .deurLinks {
    transform: translate(-97%, 0);
    transition: transform 1000ms linear;
}

input#etage_5:checked ~ .deurRechts {
    transform: translate(97%, 0);
    transition: transform 1000ms linear;
}

input#etage_5:checked ~ .liftTekst .etage_5 {
    display: flex;
}

input#etage_5:checked ~ .infoBord span:before {
    content: "5";
}

/*
/*video*/
.beeldMateriaal {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    min-height: 74.2vh;
    border-bottom: unset;
}

.video {
    grid-column: 1/7;
    height: 100%;
    background: url("https://www.iemandzoalsjij.nl/img/bios.png") center bottom no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.video video {
    margin-top: 1.5rem;
 min-width: 500px;
    max-width:600px;
    height: auto;
}

.video_youtube {
    grid-column: 1/7;
    height: 100%;
    background: url("https://www.iemandzoalsjij.nl/img/bios.png") center bottom no-repeat;
    background-size: cover;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
}


.video_youtube iframe {
    grid-column: 2;
    width: 100%;
    height: 315px;
    margin-top: 3.5rem;

}

.terug {
    position: fixed;
    bottom: 0;
    right: 1rem;

}

[href*=introductie] {
    color: #ffffff;
}

.terug a {
    display: flex;
    align-items: center;
}

.terug a:after {
    content: url("https://www.iemandzoalsjij.nl/img/pijl_terug.jpg");
    margin-left: 0.5rem;
}

/*etages aanpakker*/
.beeldvak.svg {
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
background:#DBDAD9;
}

/*opdrachten*/

.opdrStart {
    grid-column: 3/6;
    height: 100%;
    display: flex;
    justify-content: center;
}
.mainOpdrachten {
    width: 100%;
    height: 87.5%;
    background: url("https://www.iemandzoalsjij.nl/img/bgOpdrachten.jpg") center center no-repeat;
    background-size:contain;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:1.5rem;
}

.opdrBeschr {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-left: 4.5rem;
}

.opdrBeschr div {
    width: 85%;
    display: flex;
    flex-wrap: wrap;
align-items: center;
}

.opdrBeschr div:first-of-type span {
    margin-right: 0;
}

.opdrBeschr div span {
    font-size: 2rem;
    color: #000000;
    font-family: Comic Sans MS;
    margin-left: -1rem;
    margin-right: 0.5rem;
}

.imgKolom {
    display: flex;
    flex-direction: column;
}

.imgKolom a:first-of-type {
    margin-bottom: 1rem;
}

.opdrBeschr div span.roodTekst, .roodTekst {
    font-family: 'Poppins', sans-serif;
    margin: unset;
    color: #d40404;
    font-weight: 700;
    font-size: 1rem;

}
.opdrBeschr p {
    margin:0;
width:75%;
}

.opdrBeschr h2 {
    background: #d40404;
    color: #ffffff;
    margin-bottom: 1.5rem;
    padding: 0.5rem 1rem;
    width: auto;
    align-self: flex-start;
}
/*.opdrBeschr img[src*="img/werkmap_blad"]  {
width:50%;
height: auto;
}*/

.opdrBeschr div h4 {
    width: 75%;
    font-family: 'Poppins', sans-serif;
    color: #be1a1a;
    margin-left:-0.5rem;
}

.opdrBeschr div:first-of-type p {
    width: 57.5%;
}

.opdrBeschr div:first-of-type a {
    width: 35%;
}
.filmTwee {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.filmTwee p {
    width: 50% !important;
}

.filmTwee div {
    width: 50%;
}

.filmTwee div a {
    margin-right: 1rem;
}

.opdrNummer {
    transform: rotate(353deg);
    align-self: flex-start;
    margin-top: 1.12rem;
    position: absolute;
    right: 9.5rem;

}

/*scores/web*/
.webTekst {
    grid-column: 1/3;
    background: #D5D9D6;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: top;
padding-top: 3rem;
}

.webTekst div {
    width: 80%;
    margin: 0;
}
.webTekst h1 {
    margin-top: 1.5rem;
}

.webTekst div p img {
    float: right;
    margin-left:0;
}

.webTekst div p a {
    display: flex;
    margin: 1rem 0;

}


img.shape {
    width: calc(10.8vw + 12px);
    height: auto;
    clip-path: polygon(35% 1%, 70% 16%, 100% 16%, 95% 46%, 82% 83%, 50% 100%, 0 100%, 8% 48%, 9% 28%, 13% 11%);
    shape-outside: polygon(35% 1%, 70% 16%, 100% 16%, 95% 46%, 82% 83%, 50% 100%, 0 100%, 8% 48%, 9% 28%, 13% 11%);
}

.wrapScores {
    background: url("https://www.iemandzoalsjij.nl/img/bgGrafiek.png") center top no-repeat;
    background-size: cover;
    grid-column: 3/6;
}

.scoresBgKleur {
    background: url("https://www.iemandzoalsjij.nl/img/bgGrafiekKleur.jpg") center top no-repeat;
    background-size: cover;
    grid-column: 3/6;

}

.scores {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    opacity: 0;
    transition: opacity 1200ms ease;
    margin-top: 3rem;
}

input#scores {
    display: none;
    position: absolute;
}

.tekstvak.web label {
    float: left;
    width: auto;
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
}

.tekstvak.web label img {
    margin-left: 0.5rem;
}

/*input#scores:checked ~ .scores {
    opacity: 1;
    transition: opacity 1200ms ease;
}*/
.scores {
    opacity: 1;
    width: 100%;
}

.scores .naam {
    width: 100%;
}

.scores .naam h3 {
    text-align: center;
    margin: 1.5rem 0;
    padding: 0.25rem;
    height: auto;
    color: #18256E;
    /*    background: #18256E;*/
}

.tabelScores {
    width: 45%;
}

.grafiek {
    width: calc(15.5vw + 264px);
    width: 45%;
    min-width: 330px;
    max-width: 520px;
}

.tabelScores table {
    min-width: calc(1.32vw + 365px);
    margin-left: 1.5rem;
}

.tabelScores table tr:nth-child(1) td:first-child {
    background: #0070c0;
    color: #ffffff;
    padding-left: 0.5rem;
}

.tabelScores table tr:nth-child(2) td:first-child {
    background: #ff6600;
    color: #ffffff;
    padding-left: 0.5rem;
}

.tabelScores table tr:nth-child(3) td:first-child {
    background: #fa0000;
    color: #ffffff;
    padding-left: 0.5rem;
}

.tabelScores table tr:nth-child(4) td:first-child {
    background: #8030a0;
    color: #ffffff;
    padding-left: 0.5rem;
}

.tabelScores table tr:nth-child(5) td:first-child {
    background: #009900;
    color: #ffffff;
    padding-left: 0.5rem;
}

.scores table th {
    font-weight: 400;
}

.scores table th:first-child {
    color: #DBDBDB;
}

.tabelScores table .count {
    background: #ffffff;
    border: 1px solid #000000;
    text-align: center;
}

/*web grafieken beter*/
input[id*="scores_"] {
    display: none;
}

input[id*="scores_"]:checked ~ .scores {
    opacity: 1;
}

/*einde web grafieken*/

/*websplitsing*/
.webLinkLeerling {
    width: 100%;
}

.webLinkLeerling ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.webLinkLeerling ul li {
    width: 100%;
}

/*einde websplitsing*/


/*k2_start_6*/

.kolom_2 {
    display: flex;
    flex-wrap: wrap;
}
.kolom_2 div:first-of-type p {
    width:100%;
}
.kolom_1 {
    width: 100%;
}

/*.kolom_2 div:first-of-type {
    width: 54%;

}

.kolom_2 div:last-of-type {
    width: 46%;

}*/
.opdrBeschr {
    counter-reset: nummers;
}

span.nummer:before {
    counter-increment: nummers;
    content: counter(nummers) ". ";
    margin-left: -2rem;
}

/*k2 opdr 8*/

.opdrBeschr .kolom_2 {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
}
.kolom_2 div:first-of-type {
    width: 45%;
    height: auto;
    display: flex;
    flex-wrap: wrap;


}
.kolom_2 div:last-of-type {
 width:43%;
    /*height: auto;
    display: flex;*/
    flex-direction: column;

}
.kolom_2 div:last-of-type a {
width:100%;
}
.opdrBeschr div span.roodTekst {
    width: 100%;
}

/* aanpakker k3 opdracht 4, betrokken k2 opdracht 2*/
.fotoVolleBreedte {
    width:100%;
    display: flex;
    height:100%;
    justify-content: center;
    align-items: center;
    background: #FFC000;
}
.fotoVolleBreedte img {
    align-self: center;
}

/*initiatief*/
.tekstvak h1 span {
    margin-left: 7rem;
}


/*slide in alle varianten*/


.slide {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.slide.hogerSlide {
    height: 640px;
}

.slideContent {
    width: 598px;
    max-height: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
background:#ffffff;
}
.slideContent h4 {
    width:100%;
    padding:0.25rem 1rem;
    /*background: #000000;*/
    color:#000000;
    font-size:1.5rem;
}
.slideContent h4:last-of-type {
    text-align: center;
}

img[src="img/meedenken_opdr4_s1.png"] {
    margin-top:-2rem;
}
.slideParagraaf {
    width: 548px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: #FFFFFF;
}

.slideParagraaf img {
    float: left;
    margin: -1rem 0.5rem 0.5rem -1rem;
}

.slideParagraaf p {
    width: 85%;
    padding: 2rem 1rem;
}

.slideContent .fotoBoven {
    width: 180px;
    height: auto;
    object-fit: scale-down;
    margin-right: 0.5rem;
    z-index: 10;
    position: absolute;
    left: 0;
    top: 0rem;
}

.slideContent .tekstMidden .bgZwartcolWit {
    width: 100%;
    height: auto;
    background: #000000;
    color: #FFFFFF;
    padding: 0.5rem;
    font-family: Comic Sans MS;
    text-transform: uppercase;
}

.slideContent .tekstMidden .bijzType {
    font-family: Comic Sans MS;
    text-transform: uppercase;
    font-size: 2.25rem;
}

.tekstMidden {
    padding: 1rem 5rem;
}

.slideFotoBoven .fotoBoven {
    margin-top: -1rem;
    margin-left: -1rem;
}

.slideContent .kruis {
    position: absolute;
    bottom: 148px;
    right: 242px;
    z-index: 10;
}

.slideContent .fotoBeneden {
    width: 280px;
    height: 210px;
    object-fit: scale-down;
    margin-top: 1rem;
    position: absolute;
    right: 0;
    bottom: -1rem;
}

.slideContent .fotoRechtsOnder {
    width: 280px;
    height: 210px;
    position: absolute;
    right: 76px;
    bottom: 74px;
}
.ficheKaart {
    background: url("https://www.iemandzoalsjij.nl/img/fichekaart.png") center center no-repeat;
    background-size: contain;
    display: flex;
    width: 598px;
    height: 360px;
    justify-content: center;
    align-items: center;

}
.ficheKaart img {
    width: auto;
    height: 90%;
    margin: 0 2.5rem 0 0.5rem;
}
.ficheKaart table {
    width: 68%;
    height: 50%;
}
.ficheKaart table tr:nth-of-type(3) td:last-of-type {
    padding: 0.125rem 0;
    display: flex;
    justify-content: center;
    width: 50%;
}

.ficheKaart table td:first-of-type {
    width: 40%;
}

.ficheKaart table td:last-of-type {
    width: 58%;
    display: flex;
    align-items: center;
}

.ficheKaart table img {
    width: 100%;
}

.bgGrijsBlauw {
    background: #adb9ca;
    width: 100%;
    height: 100%;
    display: grid;
    grid-auto-columns: 35% 10% 55%;
    grid-template-rows: repeat(2, 1fr);
}

.bgGrijsBlauw .fotoMobiel {
    grid-column: 1;
    grid-row: 2;
    align-self: flex-end;
}

.bgGrijsBlauw .tekstSlider {
    grid-column: 2/4;
    grid-row: 1/3;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: url("https://www.iemandzoalsjij.nl/img/tekstballonnen.png") center center no-repeat;
    background-size: contain;
    margin-left: -1.75rem;
}

.bg_wit {
    background: #FFFFFF;
}

.bgGrijsBlauw .tekstSlider p {
    width: 65%;
    margin-left: 6.5rem;
}
img[src="img/lamp_idee_slider.png"] {
width:120px;
height: auto;
}
.tekstSlider {
    padding: 0 1rem;
}

.firstImg {
    margin-left: calc(50% - 120px);
    float: unset;
}

.centreer {
    width: 100%;
    text-align: center;
}

.tekstSlider p img {
    float: left;
    margin-right: 1rem;
    margin-bottom: 0.5rem;
}

.tekstSlider h3 {
    color: #000000;
}

.tekstSlider ul {
    width: 100%;
    display: inline-block;
}

.tekstSlider ul li, .volleBreedteSlide ul li {
    margin-left: 1rem;
}

.tekstSlider ul li:before, .volleBreedteSlide ul li:before {
    content: "\2022  ";
    margin-left: -1rem;
}
ul.marginBottom li {
    margin-bottom:1rem;
}
.slideIdeeen, .slideSec {
    background: #FFFFFF;
    width: 100%;
    height: 80%;
    display: flex;
    align-items: center;
    padding:2rem 0;
}

.slideSec img {
    width: 75%;
    height: auto;
    padding: 1rem;
    box-sizing: border-box;
}

.slideSec h3 {
    width: 100%;
    height: auto;
}

.slide2Kolom, .slide2KolomCent {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 50%);
    align-items: center;
    /*   justify-content: center;*/
}
.slide2Kolom img {
    align-self: center;
}
.slide2Kolom p, .slide2Kolom h3 {
    padding:0 1rem;
    box-sizing: border-box;

}
.slide2Kolom h3 {
    grid-column: 1/3;
    color: #122372;

    font-family: 'Comic Sans MS';
    font-size:1.5rem;

}
/*.slide2Kolom div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  padding: 0 2rem;
    box-sizing: border-box;

}*/

.slide2KolomCent div {
    box-sizing: border-box;
    padding: 1rem;
    margin-top: 2.5rem;

}

figure:first-of-type {
    border-right: 5px solid #7f7f7f;
}

figure:last-of-type {
    border-left: 5px solid #7f7f7f;
}

figure.noBorder {
    border: 0;

}

figure.noBorder img {
    transform: rotate(0);
    padding: 0;
}

.slide2Kolom figcaption {
    background: #7f7f7f;
    text-align: center;
    color: #FFFFFF;
}

.slide2Kolom div p {
    width: 90%;
    align-self: flex-end;
}

.slide2Kolom .geenCentreer p {
    align-self: center;
    padding: 0;
    margin: 0;
}

.slide2KolomOngelijk {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns:35% 55%;
    column-gap: 5%;
    align-items: center;
}

.slide2KolomOngelijk img {
    padding: 1.5rem 1rem;
    align-self: flex-start;
    transform: rotate(-4deg);
}

.slide2KolomOngelijk div {
    padding: 1.5rem 1rem;
}

.slide2KolomOngelijk img.imgNoRotate {
    transform: rotate(0);
}

.slide3Kolom {
    width: 100%;
    height: 420px;
    display: grid;
    grid-template-columns: repeat(3, 33.3333%);
    justify-content: center;
    align-items: center;
}

.slide3Kolom div:first-of-type {
    grid-column: 1/2;
}

.slide3Kolom div:last-of-type {
    grid-column: 2/4;
}

.slide3Kolom h3 {
    color: #000000;
    font-weight: 400;
}

.slide3Kolom .margin {
    padding: 1.5rem 0;
}

.slide3Kolom .margin p {
    margin: 0;
}

.slide3Kolom .margin p.bold {
    margin: 0.125rem 0;
}

p.metVink span:before {
    content: "\2713";
    margin-left: -1.5rem;
    font-size: 1.5rem;
    color: green;
}

.slideSec p {
    width: 90%;
}
.slideIdeeen h3 {
    font-family: 'Comic Sans MS';
    color:#122372;
    font-size:2.5rem:

}
.slideIdeeen img:first-of-type {
    width: 35.5%;
    height: auto;
    padding: 1rem;
    box-sizing: border-box;
}

.slideIdeeen img:last-of-type {
    width: 10%;
    height: auto;
    align-self: flex-start;
    margin-top: -3.5rem;
}

.slideIdeeen .tekstSlider {
    width: 54.5%;
}

.slideIdeeen .tekstSlider_geen_img {
    margin-left: 1.5rem;
    width: 82%;
}

.slideIdeeen img[src*="img/lamp_idee_0"] {
    width: 15%;
    margin-top: -4.5rem;

}
.bgTrans {
  background: none;
}
.bgWit {
    background: #ffffff !important;
    color: #000000 !important;
}

.bgRed {
    background: #c00000;
}

.bgBlue {
    background: #00b0f0;
}

.bgDonkerBlauw {
    background: #002060;

}

h3.bgDonkerBlauw {
    color: #FFFFFF;
}

.bgBrown {
    background: #663300;
}

.bgBlack {
    background: #000000;
}

p.bgBlack, h3.bgBlack {
    color: #FFFFFF;
    text-align: center;
    margin-top: 0;
    padding: 0.5rem 0;
}

h3.bgBlack {
    padding: unset;
}

.bgDonkerBlauw p.bgWit, .bgDonkerBlauw p.bgBlack {
    text-align: center !important;
}

.bgDonkerBlauw p.bgRed.txtCenter {
    text-align: center;
}

.txtCenter {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

.bgDonkerBlauw p:first-of-type, .bgBlack p:first-of-type {
    text-align: left;
    padding: 0.5rem;
    color: #FFFFFF;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

.bgBlack p:first-of-type {
    text-align: center;
}

.bgDonkerBlauw p:last-of-type {
    text-align: right;
    padding: 0.5rem;
    color: #FFFFFF;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

.volleBreedteSlide {
    width: 100%;
    display: block;
    padding:1rem;
    box-sizing: border-box;
}
.volleBreedteSlide h3, .volleBreedteSlide h4 {
    color: #122372;
    font-family: 'Comic Sans MS';
    font-size:2.25rem;
    text-align: center;
    width:100%;
    float: left;
    margin-bottom:1.5rem;
}
.slideContent .volleBreedteSlide h4 {
    text-align: left;
    font-size:2.25rem;
    padding:0;
}
img[src="img/motivatie_opdr2_sl2B.png"] {
margin-right:-2rem;
}
.mainSlider {
    counter-reset: letterGrootte;
}
.volleBreedteSlide h4:before {
    counter-increment: letterGrootte;
    content: counter(letterGrootte);
    font-size:5rem;
    float: left;
    margin-right:0.5rem;
    margin-top:-0.25rem;
}
.volleBreedteSlide img {
    float: right;
}
img[src="img/collegiaal_opdr4_s1.png"] {
    margin-bottom:1.5rem;
}
.volleBreedteSlide div img {
    float: left;
    margin-right:1rem;
}
.volleBreedteSlide div p {
    padding:0 1.5rem;
}
.volleBreedteSlide ul li {
    width:100%;
    float: left;
}
.volleBreedteSlide p.smalCent {
    width:90%;
    text-align: center;
}
.bgTrans {
    background:none;
}
.slideBorder {
    border-top: 10px solid #000000;
}
.volleBreedte {
    width: 100%;
    height: auto;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.volleBreedte img {
    width: 50%;
}
.volleBreedte p {
    /* display: flex;
     flex-wrap: wrap;*/
    width: 50%;
    padding: 0 1rem;
    box-sizing: border-box;
}
.volleBreedte .kopje{
    font-size:1.75em;
    font-family: 'Comic Sans MS';
    width:100%;
    color:#122372;
}
.volleBreedte .getal{
    font-size:3rem;
    font-family: 'Comic Sans MS';
    width:100%;
}
.volleBreedte h4 {
    width: 100%;
    color: #FFFFFF;
    padding-left: 1rem;
    box-sizing: border-box;
}

.slide1Kolom {
    width: 100%;
    height: 420px;

    overflow: hidden;
}

.slide1Kolom p, .slide1Kolom img {
    width: 100%;
}

.slide1Kolom p {
    padding-left: 2.5rem;
}

.slideContent p.volleBreedteSlide {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 1rem;
    box-sizing: border-box;
    text-align: left;
    justify-content: center;
}
.slideContent p.volleBreedteSlide span {
    color:#ffffff;
}
.volleBreedteSlide.bgWit h3 {
    width: 100%;
    text-align: center;
    color: #000000;
    font-weight: 300;
}

.volleBreedteSlide.bgWit h4 {
    width: auto;
    color: #000000;
    font-size: 1.602rem;
    margin-top: 1rem;
}

.volleBreedteSlide.bgWit img {
    float: left;
}

.volleBreedteSlide.bgWit p {
    padding: 0 1.5rem;

}

.volleBreedteSlide.bgWit div {
    display: grid;
    grid-template-columns: 50% 50%;

}

.volleBreedteSlide.bgWit div p {

}

.volleBreedteSlide.bgWit div a {
    margin-bottom: 1rem;

}

p.volleBreedteSlide span {
    width: 45%;
    margin-left: 1rem;
}

.skew {
    width: 538px;
    height: 382px;
    border: 5px solid #000000;
    transform: skew(-13deg);
    background: #ffffff;
    margin-top: 3rem;
    display: flex;
    align-items: center;
    padding: 0 2rem;
    box-sizing: border-box;

}

.skewBg1 {

    background-image: url("https://www.iemandzoalsjij.nl/img/omgangsvormen_opdr4_s1.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.skewBg2 {
    background-image: url("https://www.iemandzoalsjij.nl/img/omgangsvormen_opdr4_s2.png");
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
}

.skewBg3 {
    background: #FFFFFF;
    background-image: url("https://www.iemandzoalsjij.nl/img/omgangsvormen_opdr4_s3.png");
    background-position: right center;
    background-repeat: no-repeat;
    background-size: cover;
}

.skewBg4 {
    background: #FFFFFF;
    background-image: url("https://www.iemandzoalsjij.nl/img/omgangsvormen_opdr4_s4.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.skewBg5 {
    background: #FFFFFF;
    background-image: url("https://www.iemandzoalsjij.nl/img/omgangsvormen_opdr4_s5.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.skewBg6 {
    background: #FFFFFF;
    background-image: url("https://www.iemandzoalsjij.nl/img/omgangsvormen_opdr4_s6.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

}

.skewBg7 {
    background: #FFFFFF;
    background-image: url("https://www.iemandzoalsjij.nl/img/omgangsvormen_opdr4_s7.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

}

.skew .skewWrap {
    transform: skew(13deg);
    width: 95%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.skew .skewWrap img {
    width: 35%;
    margin-right: 2rem;
}

.skew .skewWrap p {
    align-self: center;
}

.skewWrap img[src*=indruk_opdr4] {
    width: auto;
    margin-left: 0.25rem;
}

.skew[class*="skewBg"] .skewWrap div {
    width: 45%;
    align-self: center;
    margin-left: 45%;
}

.skew .skewWrap .volleBreedteSlide {
    width: 100%;
}

.skew .naamTitel {
    transform: skew(-13deg);
    position: absolute;
    top: -1.875rem;
    right: -2rem;
    width: auto;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
    border: 4px solid #000000;
}

.skew .naamTitel h3 {
    color: #ffffff;
    font-weight: 700;
    transform: skew(13deg);
}

.sliderHolder {
    width: 598px;
    height: 450px;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    margin-top: 3rem;
}

.sliderHolder p {
    color: #FFFFFF;
    width: 65%;
    background: #000000;
    margin: 0;
    padding-left: 1rem;
}

.sliderHolder div {
    background: #000000;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.sliderHolder div img {
    width: 40%;
}

.sliderHolder div .slideTekst {
    width: 60%;
    height: 100%;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 2rem;

}

.sliderHolder div .slideTekst p {
    width: 100%;
    color: #000000;
    background: none;
    margin: 0;
    padding: 0;
}

.skewWrap .volleBreedteSlide {
    align-self: center;
}

.lastSlide {
    background: #002060;
    width: 598px;
    height: 350px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.lastSlide p {
    width: 100%;
    color: #ffffff;
    text-align: center;
    height: 10%;
}

.lastSlide p:first-of-type {
    width: 100%;
    height: 10%;
    background: #000000;
    text-align: left;
    padding-left: 1rem;
    box-sizing: border-box;
    margin-top: 0;
    display: flex;
    align-items: center;
}

.lastSlide p:last-of-type {
    background: #000000;
    text-align: right;
    padding-right: 1rem;
    height: 10%;
    margin-bottom: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-self: flex-end;

}

/*slides beter*/
.mainSlider {
    margin: auto;
    width: 100%;
height:100%;
    display: flex;
    justify-content: center;
    /*align-items: center;*/
    background: #ffc000
}

.slide {
    width: 780px;
    height: 560px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
}

.bgWit {
    background: #ffffff;
    color: #000000;
}

.bgGrijsBlauw {
    background: #adb9ca;

}

.slide6Kolom {
    width: 598px;
    height: 90%;
    display: grid;
    grid-template-columns: repeat(6, 16%);
    grid-template-rows: repeat(4, 1fr);
}

.fotoBoven {
    grid-column: 1/3;
}

.tekst {
    grid-column: 1/7;
    grid-row: 1/4;
    padding: 1rem;
    background: #ffffff;
}

.tekst img {
    float: left;
    margin: -3rem 1rem 1rem -2rem;
}

.fotoBeneden {
    grid-row: 4;
    grid-column: 4/7;
    margin-top: -3.5rem;
    margin-right: -1rem;
}

.slide5Kolom {
    width: 598px;
    height: auto;
    display: grid;
    grid-template-columns: repeat(5, 20%);

}

.slide5Kolom .kop {
    grid-column: 1/4;
    margin: 0;
    background: #000000;
}

.slide5Kolom .kop p {
    color: #FFFFFF;
    padding-left: 1rem;
}

.slide5Kolom .imgHolder {
    grid-column: 1/3;
    grid-row: 2;
    background: #000000;
}

.slide5Kolom .imgHolder img {
    width: 100%;
}

.slide5Kolom .slideTekst {
    grid-column: 3/6;
    background: #FFFFFF;
    grid-row: 2;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.slide4Kolom {
    width: 598px;
    height: 90%;
    display: grid;
    grid-template-columns: repeat(4, 25%);
    justify-content: center;
}

.slide4Kolom .imgHolder {
    grid-column: 1/3;
    margin: -1rem;
    grid-row: 1;
}

.slide4Kolom .tekst {
    grid-column: 2/5;
    display: flex;
    align-items: center;
    background: transparent;
}


.slide2KolomBoek {
    width: 598px;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 49.5%);

}

.slide2KolomBoek img {
    grid-column: 1/3;
    grid-row: 1;
}

.slide2KolomBoek .slideParagraaf {
    grid-column: 2/3;
    grid-row: 1;
    margin-left: 5%;
    width: 85%;
    height: 90%;
    background: transparent;
    align-items: center;
}

.slide2KolomBoek .slideParagraaf p {
    text-align: left;
    color: #000000;
    margin: 0 !important;
    /*    margin-top:-2rem !important;*/
    padding: 0 !important;
    font-size: 1rem;

}

.slide2KolomBoek .slideParagraaf h4 {
    color: #000000;
    margin: unset;
    width: 100%;
text-align: left;
padding:0;
}

.lastSlide {
    background: #002060;
    width: 598px;
    height: 350px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.lastSlide p {
    width: 100%;
    background: #000000;
    color: #ffffff;
    height: 10%;
    padding-left: 1rem;
}

.lastSlide p:first-of-type {
    text-align: left;
    box-sizing: border-box;
    margin-top: 0;
    display: flex;
    align-items: center;
}

.lastSlide p:last-of-type {
    text-align: right;
    margin-bottom: 0;
    padding-right: 1rem;
    align-self: flex-end;

}

/*eind betere slides*/

/*alle formulieren*/
.error_message, .fb_invalid {
    color:#e63946;
}
.error_message {
    display: none;
}

/*aanvraagformulier*/
.formulier {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(8,12.5%);
    height:73.4vh;
}

.formulier .tekstblok {
    grid-column: 1/4;
    background: #D5D9D6;
    display: flex;
    justify-content: center;
    height:73.4vh;

    overflow-y: scroll;
}

.formulier .tekstblok div {
    width: 75%;
    margin-top: 1rem;
}

.formulier .tekstblok div p {
    font-size: 1rem;
}

.formulier .tekstblok div h1 {
    font-family: 'Poppins', sans-serif;
}

.formulier .tekstblok div h3 {
    color: #18256e;
    font-size: 1.25rem;
    margin-top: 1rem;
}

.formulier .tekstblok div ul li {
    list-style-type: disc;
    margin-left: 1rem;
    font-size: 1rem;
}

.formulier .formBlok {
    grid-column:4/9;
    height:73.4vh;
    overflow-y: scroll;
}
.formBlok p, .formBlok h3, .formBlok h2 {
    color:#000000;
    font-size:1.25rem;
    width:auto;
    margin-left: 10%;
    margin-top: 2.5rem;
}
.formBlok h2 {
    font-size:2.027rem;
    font-size:2.5rem;
}
* {
    scrollbar-width: thin;
    scrollbar-color: #1C2E4F  #CCE2A3;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 6px;
}

*::-webkit-scrollbar-track {
    background: #1C2E4F;
}

*::-webkit-scrollbar-thumb {
    background-color: #CCE2A3;

}

.aanmeldFormulier {
    width: 80%;
    margin-left: 10%;
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
    border:1px solid #1D2D4F;
    margin-top:1.5rem;
}
.aanmeldFormulier div {
  width:100%;
}
.aanmeldFormulier div h1 {
   font-family: 'Poppins', sans-serif;
text-align: center;
}
.aanmeldFormulier .schoolnaam {
width:75%;
margin:2rem 0;

}
.aanmeldFormulier .schoolnaam label {
background:#8AC926;
color:#ffffff;
padding:0.5rem;
margin-bottom:1rem;
display: block;
width:calc(55% + 0.5rem);
text-align: center;
}

.aanmeldFormulier input {
    width: 100%;
    border:0;
    background:#EBF2FA;
    color:#002060;
}
.aanmeldFormulier input:hover, .aanmeldFormulier input:focus {
    background:#002060;
    color:#FFFFFF;
}
.aanmeldFormulier fieldset {
    width: 45%;
    display: flex;
    flex-wrap: wrap;
    border: none;
    margin-bottom:2rem;
}

.aanmeldFormulier legend {
    padding:0.5rem 0;
    background:#1C2E4F;
    color:#FFFFFF;
    width:100%;
    text-align: center;
    margin-bottom:0.5rem;
}

.aanmeldFormulier .submit {
    width:100%;
    display: flex;
    justify-content: center;
}
.aanmeldFormulier .submit input {
    width:100%;
    border: none;
    background:#C2E812;
    color:#190933;
    padding:0.25rem 1rem;
    font-size:1.5rem;
}

.aanmeldFormulier .melden {
display: flex;
width:100%;
justify-content: center;
}

.aanmeldFormulier .melden input {
display: none;
}
.aanmeldFormulier .melden div {
width:33%;
}
.aanmeldFormulier .melden label {
display: flex;
align-items: center;
}
.aanmeldFormulier .melden label:before {
content: "\2610";
font-size:2rem;
margin-right:1rem;
}
.aanmeldFormulier .melden input:checked ~ label:before {
content: "\2611";
font-size:2rem;
margin-right:1rem;
}


/*formulier opdracht*/
.container {
    /*    width: calc(64vw + 186px);*/
    width: calc(29vw + 452px);
    margin: auto;
}
.formulier_opdracht {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.formulier_opdracht h2 {
    margin-top:4rem;
    width:75%;
}
.formHeader {
    align-items: center;
    justify-content: space-between;
    display: grid;
    grid-template-columns: repeat(9, 11.111%);
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 45%, rgba(154,154,154,1) 45%, rgba(154,154,154,1) 52%, rgba(0,212,255,0) 52%);
    margin-top:3rem;
    width:100%;
}
.formHeader p:first-of-type {
    grid-column: 1;
    grid-row: 1;
    z-index:10;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.formHeader p:last-of-type {
    grid-column: 9;
    grid-row: 1;
    z-index:10;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.formHeader p img {
    margin:0.5rem 0;
}

/*.nummer {
    width:76px;
    height:76px;
    border:5px solid #9a9a9a;
    border-radius: 50%;
    background:#FF6600;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    font-size:3rem;
    z-index:10;
}*/
.formParagraaf {
    grid-column: 1/10;
    display: flex;
    flex-direction: column;
}
.formParagraaf p:first-of-type {
    display: flex;
    align-items: center;
    align-self: center;
    color:#ff0000;
    font-weight: 700;
}
.formParagraaf p:first-of-type:before {
    content: url("https://www.iemandzoalsjij.nl/img/waarschuwingsTeken.jpg");
    margin-right:1rem;
}
.formParagraaf p:nth-child(2) {
    text-align: center;
}
.formOpdracht {
    margin-top: 2rem;
    counter-reset: nummers;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.formOpdracht  .nummerOpdracht:before {
    counter-increment: nummers;
    content: counter(nummers) ".  ";
    font-size: 2rem;
    font-weight: 700;
    margin-right: 1rem;
}
.formOpdracht .naam {
    margin-bottom:1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding:0 1rem;
    box-sizing: border-box;
    width:45%;
}
.formOpdracht .naam label {
    margin-right:1rem;
}

.formOpdracht textarea {
    height:3rem;
    width: calc(19.05vw + 344px);
}
.formOpdracht fieldset {
    border: none;
    margin-bottom:3rem;
    padding:0.5rem  1rem;
    box-sizing: border-box;
    width:100%;
}
.formOpdracht fieldset:nth-of-type(odd) {
    background:#f7f7f7;
}
.formOpdracht fieldset div:first-of-type {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width:100%;
}
.formOpdracht .voorbeeld {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0.25rem;
}
.formOpdracht .voorbeeld label {
    width:15%;
    margin-right:1rem;
}
.formOpdracht .vraag_2 {
    display: flex;
    flex-wrap: wrap;
}
.formOpdracht .vraag_2 .keuze {
    width:auto;

}
.formOpdracht .vraag_2 .keuze input {
    display: none;
}
.formOpdracht .vraag_2 label:first-of-type {
    display: none;
}

.formOpdracht .vraag_2 .keuze  div label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width:100%;
}
.formOpdracht .vraag_2 .keuze label:before {
    content:"\2610";
    font-size:2rem;
}
.formOpdracht .vraag_2 .keuze input:checked ~label:before {
    content:"\2611";
    font-size:2rem;
}
.formOpdracht .vraag_2 .keuze div:last-of-type label:after {
    content:"\261E";
    font-size:3rem;
    margin:0 0.5rem;
}
.formOpdracht .vraag_2 .toelichting {
    align-self: flex-end;

}
.formOpdracht .vraag_2   .toelichting label {
    margin-right:1rem;
    display: block;
}
.formOpdracht  .opties div {
    width:100%;
}
.formOpdracht  .opties input  {
    display: none;
}
.formOpdracht  .opties  div label {
    display:inline-flex;
    align-items: center;
}
.formOpdracht  .opties div label:before {
    content:"\2610";
    font-size:2rem;
    margin: 0 1rem;
}
.formOpdracht  .opties input:checked ~label:before {
    content:"\2611";
    font-size:2rem;
    margin-left:1rem;
}
.formOpdracht  .opties div:last-of-type label:after {
    content:"\261E";
    font-size:3rem;
    margin-left:  2.5rem;
    transform: rotate(90deg);
    height:1rem;
}
.formOpdracht .vraag_3 .toelOpties  {
    width:75%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    margin-left:20%;
}
.formOpdracht .vraag_4  {
    margin-bottom:7.5rem;
}
.formOpdracht .vraag_4 .radioButtons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.formOpdracht .vraag_4 .radioButtons div {
    width:20%;
    height:26px;
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 47%, rgba(0,0,0,1) 47%, rgba(0,0,0,1) 53%, rgba(0,0,0,0) 53%);
}
.formOpdracht .vraag_4  input {
    display: block;
    transform: scale(2);
}

.formOpdracht .vraag_4 label {
    width:100%;
    text-align:center;

}
.formOpdracht p {
    font-size: 1.25rem;
}
.formOpdracht .vraag_4 .titel {
    margin-top:3.5rem;
    margin-left:3rem;
}
.formOpdracht .vraag_5 {
    display: grid;
    grid-template-columns: 17.5% 75%;
    grid-row-gap: 2px;
    grid-column-gap: 5%;
}
.formOpdracht .vraag_5 div {
    grid-column: 1/3;
}
.formOpdracht .vraag_5 .opties {
    grid-column:1;
}
.formOpdracht .vraag_5 .opties label {
    width: 100%;

}
.formOpdracht  .vraag_5 .opties div:last-of-type label:after {
    content:"\261E";
    font-size:3rem;
    transform: rotate(0deg);
    margin-top:-3.6rem;
    margin-left:1rem;
}
.formOpdracht .vraag_5 div:nth-of-type(3) {
    margin-top:66px;
}
.formOpdracht .vraag_5 .toelichting {
    grid-column: 2;

}
.formOpdracht .vraag_6 .toelichting {
    margin-left:4rem;
    display: flex;
    flex-wrap:   wrap;
    align-items: center;
}
.formOpdracht .vraag_6 .toelichting label {
    margin-right:1rem;
    margin-left: 2rem;

}
.slotzin {
    display: flex;
    flex-wrap: wrap;
    width:100%;
    justify-content: center;
}
.slotzin p {
    width:50%;
    background: #EBF2FA;
    text-align: center;
    font-weight: 400;
    font-size: 1.5rem;
}
.submit {
    width: 100%;
    display: flex;
    justify-content: center;
}
.submit input {
    width:50%;
    padding:1rem 0;
    border: none;
    background: #002060;
    color: #EBF2FA;
}
/*dank pagina*/
.dank {
    height: 35vh;
    width:45%;
    margin: 3.5rem auto;
}
.dank h3 {
    color:#002060;
    margin-top:1.5rem;
    font-weight: 300;
    width:100%;
}
.dank p {
    margin: 0.75rem 0;
}
.dank ul {
    display: flex;
    width:100%;
    justify-content: space-between;
    margin:0;
}
.dank ul li a {
    color: #791E94;
    font-weight:700;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.dank ul li a img {
margin-left:0;
}

@media all and (max-width: 1420px) {
    .scores {
        flex-direction: column;
        align-items: center;
    }

    .grafiek {
        margin-top: 1.5rem;
    }

    .tabelScores {
        align-self: flex-start;
    }

}

@media all and (max-width: 1148px) {

    .tekstvak.web p {
        width: 100%;
    }
}