@import url('https://fonts.cdnfonts.com/css/28-days-later');



/* Common */

/***************************************************************/

html {

  scroll-behavior: smooth;

  overflow-x: hidden;

}



body {

  font-size: 16px;

  line-height: 20px;

  color: #3a3a3a;

  font-family: Verdana,Geneva,sans-serif; 

  overflow-x: hidden;

}



p{

	font-size: 13px;

	line-height: 30px;

}



/* Buttons */

/***************************************************************/

.btn-purple{

  background-color: #412981;

  color: #fff;

  font-size: 13px;

  line-height: 20px;

  padding: 10px 48px;

  border-width: 2px;

  border-radius: 50px;

}



.btn-purple:hover{

  background-color: #fff;

  color: #412981;

  border: 2px solid #412981;

}



.activebtn-purple{

  background-color: #fff;

  border: 2px solid #412981;

  color: #412981;

}

.activebtn-purple:hover{

  background-color: #412981;

  border: 2px solid #412981;

  color: #fff;

}





.btn-light{

  background-color: #fff;

  color: #412981;

  font-size: 13px;

  line-height: 20px;

  padding: 10px 28px;

  border-radius: 50px;

}



.btn-light:hover{

  background-color: #412981;

  color: #fff;

}





.purple-section .btn-purple{

  background-color: #412981;

  border: 1px solid #fff;

  padding: 10px 28px;

}

.purple-section .btn-purple:hover{

  background-color: #fff;

  color: #412981;

}



.banner-section .btn-light{

  margin-top: 28px;

}



.faq-wrapper .banner-section .btn-light{

  margin-top: 0;

}



.aanmelden-wrapper .banner-section .btn-light{

  padding: 10px 23px;

  margin-top: 0;

}



.aanmelden-wrapper .btn-purple{

  padding: 10px 23px;

}







/* header */

/***************************************************************/

.header{

box-shadow: 0px 15px 10px -15px rgba(237,222,222,0.83);

-webkit-box-shadow: 0px 15px 10px -15px rgba(220,218,227,2);

-moz-box-shadow: 0px 15px 10px -15px rgba(237,222,222,0.83);

position: relative;

padding: 10px 0 18px 0 ;

margin: 0 -60px

}



.navbar{

  padding: 0;

}

.navbar-brand{

  margin: 0;

}

.navbar-nav > li.nav-item > a.nav-link,

.navbar-nav > li.nav-item > a.nav-link:link,

.navbar-nav > li.nav-item > a.nav-link:visited {

  color: #2c2c2c;

  font-size: 13px;

  line-height: 20px;

  margin: 10px 29px;

  letter-spacing: 1px;

  text-transform: capitalize;

  padding: 0;

  display: inline-block;

  border: 2px solid #fff;

  

}

.navbar-nav > li.nav-item > a.nav-link:hover,

.navbar-nav > li.nav-item > a.nav-link:focus,

.navbar-nav > li.nav-item > a.nav-link:active {

  border-bottom: 2px solid #412981;

  

}

.navbar-nav > li.nav-item > a.active{

  border-bottom: 2px solid #412981!important;

}





/* welkom*/

/************************************************************************************************/

.welcom-wrapper .banner-section{

	background: transparent url(images/background-01.jpg) top center no-repeat;

	background-size: cover;

	padding: 114px 0 100px 0;

	margin-bottom: 60px;

}

.banner-section h1{

	color: #412981;

	font-size: 43px;

	line-height: 46px;

	padding-bottom: 26px;

  margin: 0;

  font-family: '28 Days Later', sans-serif;

}







/* MiddleSection*/

/***************************************************************/

.middle-section h2{

	color: #412981;

	font-size: 33px;

	line-height: 37px;

	padding-bottom: 25px;

  font-family: '28 Days Later', sans-serif;

}

.middle-section .section-1,

.middle-section .section-2{

  margin-bottom: 200px;

}

.middle-section .responsivesection-2{

  display: none;

}

.middle-section .section-3{

  margin-bottom: 84px;

}



.middle-section .section-1 .gray-bg{

  width: 336px;

  height: 257px;

  margin: auto;

  background: transparent url(images/gray-bg-1.png) center center no-repeat;

}

.middle-section .section-1 .black-bg img{

  margin-top: 40px;

  margin-left: -100px;

  width: 399px;

  height: 194px;

}

.middle-section .section-2 .gray-bg{

  width: 255px;

  height: 255px;

  background: transparent url(images/gray-bg-2.png) center center no-repeat;

}



.middle-section .responsivesection-2 .gray-bg{

  width: 255px;

  height: 255px;

  background: transparent url(images/gray-bg-2.png) center center no-repeat;

}



.middle-section .section-2 .black-bg img{

  margin-top: 40px;

  margin-left: 45px;

  width: 399px;

  height: 194px;

}

.middle-section .responsivesection-2 .black-bg img{

  margin-top: 40px;

  margin-left: 50px;

  width: 399px;

  height: 194px;

}

.middle-section .section-3 .gray-bg{

  width: 336px;

  height: 257px;

  margin: auto;

  background: transparent url(images/gray-bg-3.png) center center no-repeat;

}

.middle-section .section-3 .black-bg img{

  margin-top: 30px;

  margin-left: -100px;

  width: 399px;

  height: 194px;

}



.middle-section .section-1 h2.responsivehead{

  display: none;

}





/* purple-section*/

/***************************************************************/

.purple-section{

  background: #412981;

  padding: 44px 0;

}

.purple-section p{

  font-family: Arial, Helvetica, sans-serif;

}





/* Professionals*/

/************************************************************************************************/

.professionals-wrapper .banner-section{

	background: transparent url(images/background-02.jpg) top center no-repeat;

	background-size: cover;

	padding: 117px 0 59px 0;

	margin-bottom: 57px;

}



.professionals-wrapper .banner-section .card {

  background: #fff;

  border-radius: 20px;

  padding: 24px;

  height: 100%;

  border: none;

}

.professionals-wrapper .banner-section .card h3{

  font-size: 33px;

  line-height: 37px;

  font-family: '28 Days Later', sans-serif;

}

.professionals-wrapper .banner-section .card ul{

  margin: 0;

  padding: 0;

}

.professionals-wrapper .banner-section .card li{

  list-style: none;

  padding: 10px 0;

}

.professionals-wrapper .banner-section .card li:after{

  display: block;

  width: 20px;

  height: 20px;

  background: url('images/dots.png') no-repeat top left;

  content: "";

  float: left;

  position: relative;

  top: 8px;

  

}

.professionals-wrapper .banner-section .card li a,

.professionals-wrapper .banner-section .card li a:link,

.professionals-wrapper .banner-section .card li a:visited{

  font-size: 13px;

	line-height: 17px;

	letter-spacing: 1px;

  color: #2c2c2c;

  font-family: Arial, Helvetica, sans-serif;

  margin-left: 18px;

  text-decoration: none;

}

.middle-section ul.list li{

  list-style: none;

  text-align: left;

  font-size: 13px;

	line-height: 20px;

	letter-spacing: 1px;

}



.middle-section ul.list li a,

.middle-section ul.list li a:link,

.middle-section ul.list li a:visited{

  color: #2c2c2c;

  text-decoration: none;

}



.middle-section ul.list li:after{

  display: block;

  width: 20px;

  height: 20px;

  background: url('images/dots.png') no-repeat top left;

  content: "";

  position: relative;

  top: -35px;

  right: 38px;

}

/* purple-section*/

/***************************************************************/

.professionals-wrapper .purple-section{

  padding: 40px 0 20px 0;

}



.purple-section h2{

  font-size: 33px;

  line-height: 36px;

  font-family: '28 Days Later', sans-serif;

}



/* stappenplan-section*/

/***************************************************************/

.stappenplan-section{

  margin: 100px 0 158px 0;

}

.stappenplan-section h2 {

  color: #412981;

  font-size: 33px;

  line-height: 37px;

  padding-bottom: 16px;

  font-family: '28 Days Later', sans-serif;

}

.stappenplan-section ul{

  margin: 0;

  padding: 0;

  position: relative;

}



.stappenplan-section ul::after{

  position: absolute;

  content: "";

  height: 90%;

  width: 1px;

  background: #ece9f2;

  top: 6%;

  left: 7px;

}

.stappenplan-section li{

  list-style: none;

  padding: 10px 0;

  text-decoration: none;

}



.stappenplan-section li:after{

  display: block;

  width: 16px;

  height: 16px;

  content: "";

  float: left;

  position: relative;

  top: 5px;

  border-radius: 100%;

  background-color: #fff;

  border: 2px solid #412981;

  z-index: 1;

}



.stappenplan-section li:hover:after{

  background-color: #412981;

  border: 2px solid #412981;

}



.stappenplan-section li a,

.stappenplan-section li a:link,

.stappenplan-section li a:visited{

  font-size: 13px;

	line-height: 16px;

	letter-spacing: 1px;

  color: #2c2c2c;

  font-family: Arial, Helvetica, sans-serif;

  margin-left: 18px;

  text-decoration: none;

}





/* accordion-section*/

/***************************************************************/

.accordion-section{

  margin-bottom: 110px;

}

.accordion-section h2 {

  color: #412981;

  font-size: 33px;

  line-height: 37px;

  padding-bottom: 20px;

  font-family: '28 Days Later', sans-serif;

}

.accordion-section .black-bg img{

  width: 357px;

  height: 356px;

  margin-top: 50px;

  margin-left: 30px;

}

  

.accordion-section .gray-bg{

  width: 384px;

  height: 479px;

  background: transparent url(images/gray-bg-4.png) center center no-repeat;

}



#accordion .card{

  background: #ece9f2;

  margin-bottom: 12px;

  border: 1px solid #ece9f2;

   border-radius: 20px;

   background-color: #ece9f2;

   padding: 16px 12px;

}

#accordion .card-header{

  padding: 0;

  background: #ece9f2;

  border-radius: 20px!important;

  border: 1px solid #ece9f2;

}

#accordion .card-content{

  cursor: pointer;

  font-size: 13px;

   line-height: 16px;

   letter-spacing: 1px;

  color: #34323b;

  font-family: Arial, Helvetica, sans-serif;

  font-weight: bold;

}

#accordion .card-body{

  padding: 0 0 20px 0;

  font-size: 13px;

   line-height: 16px;

   letter-spacing: 1px;

  color: #34323b;

  font-family: Arial, Helvetica, sans-serif;

}





/* Onderwijsorganisaties*/

/************************************************************************************************/

.onderwijsorganisaties-wrapper .banner-section{

	background: transparent url(images/background-03.jpg) top center no-repeat;

	background-size: cover;

	padding: 116px 0 120px 0;

  margin-bottom: 88px;

}



.onderwijsorganisaties-wrapper .banner-section .card {

  background: #fff;

  border-radius: 20px;

  padding: 25px;

  border: none;

  height: 100%;

}

.onderwijsorganisaties-wrapper .banner-section .card h3{

  font-size: 33px;

  line-height: 37px;

  font-family: '28 Days Later', sans-serif;

}

.onderwijsorganisaties-wrapper .banner-section .card p{

  letter-spacing: 0;

  margin-bottom: 0;

  font-size: 13px;

  line-height: 25px;

  font-family: Arial, Helvetica, sans-serif;

}



.onderwijsorganisaties-wrapper .purple-section{

  padding: 70px 0 108px 0;

}



.onderwijsorganisaties-wrapper .purple-section h3{

  font-size: 33px;

  line-height: 37px;

  padding-bottom: 52px;

  color: #fff;

}

.onderwijsorganisaties-wrapper .stappenplan-section{

  margin: 85px 0 130px 0;

}







/* Overons*/

/************************************************************************************************/

.overons-wrapper .banner-section{

	background: transparent url(images/background-01.jpg) top center no-repeat;

	background-size: cover;

	padding: 114px 0 100px 0;

  margin-bottom: 100px;

}

.overons-wrapper .middle-section .section-2{

  margin-bottom: 73px;

}



/* Faq*/

/************************************************************************************************/

.faq-wrapper{

  margin-bottom: 165px;

}



.faq-wrapper .banner-section{

  background: transparent url(images/background-04.jpg) top center no-repeat;

  background-size: cover;

	padding: 112px 0 66px 0;

  margin-bottom: 108px;

}







/* Aanmelden*/

/************************************************************************************************/

.aanmelden-wrapper .banner-section{

	background: transparent url(images/background-04.jpg) top center no-repeat;

	background-size: cover;

	padding: 62px 0 82px 0;

  margin-bottom: 97px;

}



.aanmelden-wrapper .banner-section h1{

  padding-bottom: 15px;

}



.aanmelden-wrapper .banner-section p{

  font-size: 23px;

  line-height: 27px;

  color: #412981;

}







/* footer*/

/************************************************************************************************/

.footer{

  background-color: #ece9f2; 

  padding: 48px 0 19px 0;

  color: #777777;

}

.footer p{

  font-size: 13px;

  line-height: 20px;

  font-family: Arial, Helvetica, sans-serif;

}



.footer h3{

  font-size: 20px;

  line-height: 25px;

  font-family: '28 Days Later', sans-serif;

  color: #777777;

}

.footer ul{

  margin: 0;

  padding: 0;

}

.footer li{

  list-style: none;

}

.footer li a,

.footer li a:link,

.footer li a:visited{

  font-size: 13px;

	line-height: 17px;

	letter-spacing: 1px;

  color: #777777;

  font-family: Arial, Helvetica, sans-serif;

}