/*--Settings--*/
*{
  transition: 0.5S;
  scroll-behavior: smooth;
}
:root {
	font-size: 62.5%;
}
body{background-color: rgb(226, 226, 226);}
h1, h2, h3, h4, h5, h6, p, em, ul, li{font-size: 1.2em;} 
h1 {font-family: helveticanueRegular; font-size: 3.2em;} 
h2 {font-family: helveticanueBold; font-size: 2.2em;}
h3{ font-family: HelveticanueMedium; font-size: 1.4em;}
h4{ font-family: HelveticanueMedium; font-size: 2em; }
h5{font-family: helveticanueMedium; font-size: 1.4em;}
h6{font-family: HelveticanueMedium; font-size: 1.6em;} 
p,a {font-family: helveticanueRegular; font-size: 14px;}
a p {font-family: helveticaRegular;}
header h1 {font-family:  helveticanueMedium;}
main h1 {font-family: helveticanueBold;}
.inschrijvingen main h5 a{ font-family: helveticanueBold; font-size: 1em; }
.studieaanbod figure h3{font-size:1.3em;}
button{ font-size: 13px;}
i{ font-size: 3.2em;}

.higlight{
  color: #317E9A; 
  font-weight: 600; 
}


a:link{color: #68b14f;}
.SetPosOne a:link {color: #004B5E;}
.SetPosTree a:link {color: #004B5E;}
.SetPosFive a:link {color: #004B5E;}
.SetPosSeven a:link {color: #004B5E;}
a:visited{color: #68b14f;}
a:active{color: #68b14f;}
a:hover{opacity: 50%;}

button span{
  cursor: pointer;
  display: inline-block;
  position: relative;
}

button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 1;
  top: 0;
  right: 0px;

}

button span {padding-right: 10px;}

.space{margin-bottom: 10%;}


main section > i{
  color: #68b14f;
  margin-left: 3em;
}

/*--Navigation--*/
nav{
  background-color: #184A5C;
  position: sticky;
  top: 0;
  z-index: 2000000;
  box-shadow: 0 5px 5px -5px rgba(0,0,0,.5);
}

#navKlein{
  padding: 0 10px;
}

/*HAMBURGER NAVIGATIE*/
nav a:nth-child(2){
    display: none;
  }
/*HAMBURGER NAVIGATIE*/

nav > section{
  display: grid;
  grid-template: 1fr / 1fr 2fr;
}

nav section figure{
  height: 100%;
  width: 100%;
  display: grid;
}

nav section figure img{
  object-fit: contain;
  max-width: 50%;
  padding: 10px;
}

nav section ul{
  align-self: center;
  display: grid;
  grid-template: 1fr / 1fr auto auto auto auto 80px 1fr;
  justify-self: end;

}

nav section ul li a:link, nav section ul li a:visited{
  color: white;
  font-weight: bold;
}

nav section > a:nth-child(1){
  display: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.CurrentPage{border-bottom: solid;}

nav section ul li:nth-child(1){grid-column: 2/3;}
nav section ul li{
  padding: 0px 15px;
}

/*--Header--*/
.home header{
  background-image: url('../beelden/banner.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: grid;
  grid-template: 1.5fr 1fr / 1fr;
}

.home header article{
  display: grid; 
  grid-template: 1fr auto auto 1fr / auto auto 1fr;
  grid-gap: 20px;
}

.home header article h1{
  color: white;
  background-color: #68b14f;
  border-radius: 5px;
  width: auto;
  grid-row: 2/3;
  grid-column: 1/2;
  align-self: center;
}

.home header article h1:nth-child(2){
  grid-row: 3/4;
  grid-column: 1/3;
  background-color: #184A5C;
}

.home header figure{display: grid;}
.home header figure svg{align-self: end;}

/*--Main-pg1--*/
.home main > h2 {
  background-color: #68b14f;
  border-radius: 25px;
  color: white; 
  text-align: center;
  width: 20%;
  margin-bottom: 5%; 
}

.home main div > h2, .home main div p, em {
  color: white; 
  text-align: center;
}

.home div > p {
  padding: 1px;
}

.home main section{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap: 50px;
}

.home main div > h2{
  padding-top: 6%;
  padding-left: 6%;
  padding-right: 6%;
}

.home main section article{
  display: grid;
  grid-template: 2fr 3fr/ 1fr;
}

.home main section article figure{
  background-color: white;
  display: grid;
}

.home main section article figure img{
  object-fit: contain;
  max-width: 50%;
  justify-self: center;
  align-self: center;
  padding: 15px 0;
}

.home main section article figure{ cursor: pointer;}

.home main section article > div i {
  position: absolute;
  right: 15px;
}

.home section article article h5{
  color: white; 
}

.SetPosZero{
  grid-column: 1/2;
  grid-row: 1/2;
  background-color: #184a5c;
  border-bottom: #68b14f solid 10px;
  position: relative;
}
.SetPosZero i{
  color: #68b14f;
}

.SetPosOne{
  grid-column: 2/3;
  grid-row: 1/2;
  background-color: #68b14f;
  border-bottom: #184a5c solid 10px;
  position: relative;
}
.SetPosOne i{
  color: #184a5c;
}

.SetPosTwo{
  grid-column: 3/4;
  grid-row: 1/2;
  background-color: #184a5c;
  border-bottom: #68b14f solid 10px;
  position: relative;
}
.SetPosTwo i{
  color: #68b14f;
}

.SetPosTree{
  grid-column: 1/2;
  grid-row: 2/3;
  background-color: #68b14f;
  border-bottom: #184a5c solid 10px;
  position: relative;
}
.SetPosTree i{
  color: #184a5c;
}

.SetPosFour{
  grid-column: 2/3;
  grid-row: 2/3;
  background-color: #184a5c;
  border-bottom: #68b14f solid 10px;
  position: relative;
}
.SetPosFour i{
  color: #68b14f;
}

.SetPosFive{
  grid-column: 3/4;
  grid-row: 2/3;
  background-color: #68b14f;
  border-bottom: #184a5c solid 10px;
  position: relative;
}
.SetPosFive i{
  color: #184a5c;
}

.SetPosSix{
  grid-column: 1/2;
  grid-row: 3/4;
  background-color: #184a5c;
  border-bottom: #68b14f solid 10px;
  position: relative;
}
.SetPosSix i{
  color: #68b14f;
}

.SetPosSeven{
  grid-column: 2/3;
  grid-row: 3/4;
  background-color: #68b14f;
  border-bottom: #184a5c solid 10px;
  position: relative;
}
.SetPosSeven i{
  color: #184a5c;
}


/*--Header-p2--*/
.inschrijvingen header {
  background-color: white; 
}
 
.inschrijvingen header > figure{
  margin-top: 5%;
  display: grid;
}

.inschrijvingen header figure svg{align-self: end;}

.inschrijvingen article > h2{
  color: #184a5c;
  text-align: left;
  padding-top: 5%;
}
 
.inschrijvingen header > article > p {
  text-align: left;
  color: #184a5c;
}
 
.inschrijvingen main article > p > a {
  color: #49B33E;
}
 
 .st0{fill:rgb(226, 226, 226);}
 .st1{fill:none;stroke:#49B33E;stroke-width:7;stroke-miterlimit:10;}
 .st2{fill:none;stroke:#004B5E;stroke-width:5;stroke-miterlimit:10;}

/*--Main-pg2--*/
.inschrijvingen main h5{
  color:  #184A5C;
  margin-bottom: 2%;
}

.inschrijvingen main section article h6{
  color: #68B14F; 
}

.inschrijvingen main section article p{
  color:#184A5C;
  text-align: left;
}

.inschrijvingen main section{
  background-color: white;
  margin-bottom: 2em;
  display: grid;
  grid-template-columns: 3fr auto;
  padding-right: 2%;
  border-left: 5px solid #184A5C;
}

.inschrijvingen main section > i{
  color: #68b14f;
  margin-left: 0.5em;
}

#witteTekst{
  color: white;
}

.inschrijvingen main section article{
  grid-column-start: 1;
  grid-column-end: 2;
  margin-left: 2%;
  margin-bottom: 2%;
  margin-top: 2%;
}
/*--Header studieaanbod--*/
.studieaanbod article > h2{
  color: #184a5c;
  text-align: left;
  padding: 0;
  margin-top: 5%;
}

.studieaanbod header article >  p {
  text-align: left;
  color: #184a5c;
}

.studieaanbod button {
  background-color: #68b14f;
  color: white; 
  border: none;
  border-radius: 20px; 
  margin-top: 2%;
  margin-bottom: 2%;
  padding: 8px;
}

/*--Header studieaanbod--*/
.studieaanbod article > h2{
  color: #184a5c;
  text-align: left;
  padding: 0;
  margin-top: 5%;
}

.studieaanbod header article >  p {
  text-align: left;
  color: #184a5c;
}

.studieaanbod button {
  background-color: #68b14f;
  color: white; 
  border: none;
  border-radius: 5px; 
  margin-top: 2%;
  margin-bottom: 2%;
  padding: 8px;
  cursor: pointer;
}
.studieaanbod button:hover {
  text-decoration: underline;
  background-color: #49B33E;
}

.studieaanbod button i {
  font-size: 24px;
}

.studieaanbod a:hover {
  opacity: 100%;
}

/*--Main Studieaanbod--*/
.studieaanbod{background-color: white;}
.studieaanbod main h6{
  color: #68b14f;
  padding-left: 2%;
}

.kader{
  background-color: #F8F8F8;
  margin-bottom: 2em;
  display: grid;
  grid-template-columns: 3fr auto;
  margin-top: 5%;
  padding-right: 2%;
  border-left: 5px solid #184A5C;
}

.kader > article {
  padding: 3%;
}

.kader > article > p {
  color:#184A5C;
  text-align: left;
}

.studieaanbod main section i{

  color: #68b14f;
}

.dashed > li > p{
  margin-left: 20px;
  text-align: left; 
  color: #184A5C;
}

.kader ul.dashed > li p:before {
  content: "•";
  text-indent: -5px;
}

.kader article >  p {
  margin-top: 2%;
}

.studieaanbod{background-color: white;}
.studieaanbod main h6{
  color: #68b14f;
  padding-left: 5px;
}



.kader{
  background-color: #F8F8F8;
  margin-bottom: 2em;
  display: grid;
  grid-template-columns: 3fr auto;
  margin-top: 5%;
  padding-right: 2%;
  border-left: 5px solid #184A5C;
}

.kader > article {
  padding: 3%;
}

.kader > article > p {
  color:#184A5C;
  text-align: left;
}

.studieaanbod main section i{
  color: #68b14f;
}

.dashed > li > p{
  margin-left: 20px;
  text-align: left; 
  color: #184A5C;
}
.kader ul.dashed > li p:before {
  content: "-";
  text-indent: -5px;
}

.kader article >  p {
  margin-top: 2%;
}

/*--Main Studieaanbod kolom--*/
/*--HIER KOMEN DE KOLOMEN--*/


/* Studieaanbod tabel*/
section.tabel{
  margin-bottom: 24px;
}

section.tabel header, section.tabel figure{
display: grid;
grid-template-columns: 2.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

section.tabel figure{
justify-content: center;
align-items: center;
background: #68b14f;
border-bottom: 3px white solid;
}

section.tabel.groen header{
  color: #68b14f;
}
table th{
  background-color: white;
}
/*.groen td{
background: #68b14f;
}*/
.groen th{
  color: #68b14f;
}
/*.blauw td{
background-color: #184A5C;
}*/
.blauw th{
  color: #184A5C;
}
section.tabel.groen figure, table tr:nth-child(){
background: white;
}


section.tabel.blauw figure{
background: #1F596E;
}

section.tabel.groen p{
color: #68b14f;
}

section.tabel.blauw p{
  color: #1F596E;
  }

section.tabel h4, section.tabel p{
  align-self: end;
  }

/*section.tabel h5{
color: white;
}*/

section.tabel i, table i{
color: white;
font-size: 22px;
text-align: center;
}

/*tabel eerste graad*/

thead tr th{
  vertical-align: bottom;
  }
  table {
    border: 1px solid white;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout: fixed;
  }
  
  table caption {
    font-size: 1.5em;
    margin: .5em 0 .75em;
  }
  
  table tr {
    padding: .35em;
    border-bottom: 3px solid white;
  }
  
  table th,
  table td {
    padding: .625em;
    text-align: center;
  }
  table td:nth-child(1){
    /*! text-align: left; */
    font-family: HelveticanueMedium;
    color: white;
    font-size: 1.4em;
  }
  
  table th {
    font-size: 14px;
    font-family: HelveticanueRegular;
    color: #68b14f;
    align-self: end;
  }
  th:nth-child(1), td:nth-child(1){
    font-family: HelveticanueMedium;
    /*text-align: left;*/
    font-size: 1.5em;
    width: 26%;
  }

/*einde tabel eerste graad */

/*tabel hogere jaren ©Aron*/

/* Studieaanbod tabel*/
.geen-bg{
  background-color: white;
}



/*table {
  margin: 0 auto;
  margin-top: 4%;
  padding: 0;
  width: 83.5%;
  table-layout: fixed;
}*/

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background-color: #f8f8f8;

  padding: .35em;
}







section.tabel i, table i{
  color: #004B5E;
  }

table th,
table td {
  padding: .625em;
  text-align: center;
}

table td:nth-child(1){
  color: #004B5E;
}

table td.titel-1, table th.titel-1{
  background-color:#004B5E;
  color: white;
}

table td.titel-2, table th.titel-2{
  background-color: #68B14F;
  color:#EAEAEA;
  font-weight:900;
}

table th, table tr td.titel-2, table tr td.titel-1  {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-family: HelveticanueRegular;
}

table th, table tr td.titel-2 p, table tr td.titel-1 p  {
  font-size: .85em;
}

table tr td.titel-2:nth-child(1), table tr td.titel-1:nth-child(1) {
  font-size: 1.2em;
}


table td.titel-3, table th.titel-3{
  background-color: #EAEAEA;
  color:#68B14F;
  font-weight:900;
}

#navKlein {
  position: relative;
}
#navKlein ul {
  position: absolute;
  top: 2rem;
  right: 0;
  background-color: #004B5E;
}

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }
  
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }

table tr.onzichtbaarMobiel{
  display: none;
}

td:nth-child(1){
  width: 100%;
}
  
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  table td:last-child {
    border-bottom: 0;
  }
}

/* einde tabel hogere jaren */

/*-Footer-*/
figure:nth-child(4){ display: grid; }

figure:nth-child(4) h1{
  border-bottom: 4px solid #184A5C;
  margin-left: 39%;
  margin-right: 39%;
  margin-bottom: 0%;
  margin-top: 5%;
  text-align: center;
  font-size: 30px;
  color: #184A5C;
}

figure:nth-child(4) img{
  width:75%;
  align-self: center;
  justify-self: center;
}

footer{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  border-top: 15px solid #6BB15A;
  background-color:#184A5C ;
  color: white;
}

footer img {
  border-radius: 10px;
  background-color: white;
  width: 50%;
  padding: 3%;
  grid-row: 2/3;
  grid-column: 1/2;
  margin-left: 20%;
  margin-right: 20%;
  align-self: center;
}

footer article{
  margin-top: 9%;
  margin-bottom: 9%;
  grid-row: 2/3;
  font-size: 1.3em;
  font-weight: bold;
}

footer article:nth-child(3){
  grid-column: 2/3;
}

footer article:nth-child(4){
  grid-column: 3/4;
}

footer h2{
  grid-row: 1/2;
  grid-column: 1/4;
  text-align: center;
  font-weight: bold;
}

footer p{
  font-size: 1.2em;
}

footer div{
  color: #184a5c;
  font-weight: italic;
  background-color: white;
  grid-column: 1/4;
}

footer div > p{
  text-align: center;
  font-size: 1.2em;
}

footer div:nth-child(5) p{
  color: black;
  padding: 2% 0%;
}

section.nuttigelinks hr{
  width: 20%;

  color: #184a5c;
}

section.nuttigelinks h5{
  margin-left: 0px;
}

section.nuttigelinks {
  margin-top: 5%;
background-color:white;
color: #184a5c;
}

section.nuttigelinks hr{
  width: 20%;
  text-align: center;
  color: #184a5c;
}

section.nuttigelinks {
  margin-top: 5%;
background-color:white;

color: #184a5c;
}



/*NUTTIGE LINKS*/
/*Grid-systeem ( 3 kolommen*/
/* <article>
        <div>
            <section>*/

.nuttigelinks article{
  display:grid;
  grid-template-columns: 1fr 1fr;
  
}

.centreer{
  padding-top:2%;
  text-align: center;
}
.nuttigelinks article div section img{
  width: 85%;
}

.nuttigelinks article div{
  display: grid;
  grid-template-columns: 1fr 2fr;
  margin-top: 10%;
}

.nuttigelinks a {
  color: #184A5C;

}

.nuttigelinks h5 {
  text-align: left;
}
.nuttigelinks{
  padding-bottom: 4%;
}