/* Header */

.topbar-responsive {
	position: fixed;
    background: #ffffff;
   	padding: 0.75rem 1.5rem;
	width: 100%;
	z-index: 1;
  }

.topbar-responsive .topbar-responsive-logo {
    color: #ffffff;
   
  }

.topbar-responsive .topbar-responsive-logo img{
    width: 180px;
	padding-top: 1rem;
  }
 
.topbar-responsive .menu {
   background: #ffffff;
}
 
.topbar-responsive .menu li:last-of-type {
   margin-right: 0;
}
 
.topbar-responsive .menu a {
   color: #000000;
}
 
.topbar-responsive .menu a:hover {
    color: black;
	text-decoration: underline
}

.topbar-basisles{ 
	margin-top: -10rem;
}

.show-sidebar img{ 
	width: 2.5%;
}
 
.top-bar-right { 
	margin-top: -5rem;

}
.top-bar-right img{
    height: 17px;
}

 
.medium-horizontal li a {
    display: inline-block;
    position: relative;
}
 
.medium-horizontal li a:hover:not(.active) {
    background-color: #F2F2F3;
}

.zoeken img { 
	margin-top: -4rem;
	margin-left: 10.5rem;
}

form { 
	padding-top: 1.5rem;
	text-decoration-color: black;
}

input[type=text]{ 
	color: black;
	border-color: black;
}
 

/* Einde header */

/* sidebar */

.ingeklapte-sidebar{ 
display: none;
}

.sidebar {
   	 position: fixed;
     width: 250px;
     top: 110px;
     /* hoogte van de header */
     left: 0;
     background-color: white;
	height: 800px;
 }

 .sidebar a {
     padding: 10px 15px;
     text-decoration: none;
     color: #000000;
         display: block; 
          }

 .sidebar a:hover {
     background-color: #89287D;
     color: white;
	 text-decoration: underline;
 }

 .sidebar a.active {
     background-color: #89287D;
	 color:white;
	 text-decoration: underline;
	
 }
 
.sidebar img { 
 width: 10%;
}

.fa-check { 
  margin-left: 2.75rem;
}

/* Einde sidebar */ 

/* Main content */ 

body { 
background: #E5EEFC ; 
}

h1 { 
	padding-top: 2rem;
	font-size:40px;
	font-weight: 500
}

h2 { 
	padding-top: 2rem;
}

h3 { 
	font-weight: 450;
}

h4{ 
	font-style:italic;
	font-size: 15px;
}

a { 
	color: black;
	text-decoration: underline;
}

a:hover { 
	color: #89287D; 
	text-decoration: underline;
}

/* Homepagina voor Routeplanner */

.dropdown{ 
	display:none;
}

.menu-hover-lines {
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1px;
  transition: all 0.35s ease;
  padding-bottom: 3rem;
  padding-top: 10rem;
  padding-left: 18.30rem;
}

.menu-hover-lines li a {
  	padding: 0.75rem ;
  	color:black;
  	position: relative;
  	margin-left: 1rem;
	text-decoration: none;
}

.menu-hover-lines li:first-child a {
  	margin-left: 0;

}

.menu-hover-lines a:before,
.menu-hover-lines a::after {
 	 height: 3px;
 	 position: absolute;
 	 content: '';
 	 transition: all 0.35s ease;
 	 background-color: #89287D;
 	 width: 0;
	
}

.menu-hover-lines a::before {
 	 top: 0;
	 left: 0;

}

.menu-hover-lines a::after {
 	 bottom: 0;
	 right: 0;

}

.menu-hover-lines a:hover,
.menu-hover-lines li.active > a {
  	color: #0a0a0a;
  	transition: all 0.35s ease;
	
}

.menu-hover-lines a:hover::before,
.menu-hover-lines .active a::before,
.menu-hover-lines a:hover::after,
.menu-hover-lines .active a::after {
 	 width: 100%;

}

.ecommerce-product-slider h2{
	color: black;
	font-size: 15px;
}

.ecommerce-product-slider{
	margin-left: 15rem;	
}

.ecommerce-product-slider .orbit-previous .orbit-next {
    color: grey;
}

.orbit-bullets button {
    height: 0.65rem;
    width: 0.65rem;
	margin-top: 8rem;
 }

.niveau-kiezen {
	margin-left: -8rem;
}

.weekplanning-zonder-sidebar { 
	margin-left: -1.25rem;
}

.product-card {
    background-color: white;
    border: 1px solid black;
    padding: 0.9rem;
    margin-bottom: 3rem; 
}

.week17card{
   	background-color: #FFFFFF;
    border: 4px solid #89287D;
    padding: 0.9rem;
}

.product-card-thumbnail {
   	display: flex;
}
	
.product-card-title {
    font-family: 'Open sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.45rem;
    margin-top: 0.75rem;
    margin-bottom: 0;
}

.product-card-desc {
    color: black;
   	display: block;
    font-family: 'Open sans', sans-serif;
    font-size: 0.85rem;
}

.product-card-desc-small { 
 	display: none;
 }

.product-card-price {
    color: black;
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.8rem;
 }

.product-card-colors {
    display: block;
    margin-top: 0.8rem;
}

.product-card-color-option {
    display: inline-block;
    height: 25px;
    width: 25px;
}

.column h2{ 
	padding-top: 2rem;
	font-size: 18px;
	font-weight:800;
}

/* Einde homepagina voor Routeplanner */

/* Lesweek voor week 17 */

.lessen-week17 { 
	padding-top: 10rem;
	padding-left:  18rem;
}

.titel-lessen-week-17 {
    display:flex;/* Maak een flex container */
    align-items: center; /* Center-align items verticaal */
}

.titel-lessen-week-17 h1 {
    margin-right: 700px; /* Voeg wat ruimte toe tussen de h1 en de knop */
}

.titel-lessen-week-17-nosidebar { 
	margin-left: -9rem;
}

.week17-no-sidebar { 
	display:none;
}

.week17-met-sidebar { 
	display: none;
}

.eigen-les-toevoegen {
	margin-top:10rem;
    background-color: #89287D;
    color: white;
    border: none;
    padding: 15px 20px;
    border-radius: 5px;
    cursor: pointer;
}

.lessen-week-17 { 
	height: 420px;
}

.maandag-card{
   	background-color: #FFFFFF;
    border: 4px solid #89287D;
    padding: 0.9rem;
 }

/* Einde lesweek voor week 17 */

/* Begin basisles week 17 */ 

.primary { 
	width: 70%;
	height: 200px;
	margin-left: 22rem;
	margin-top: 10rem;
}

.callout.large { 
	background-color: #89287D;
}

.subtitel-pagina { 
	color: white;
	margin-top: -3rem;
}

.subheader { 
	color: white;
	margin-top: -1rem;
}

.callout img{ 
	width: 5%;
	float: left;
	margin-top: 0.5rem;
	margin-right: 2rem;
	
}
	
.callout li {
	display: block; 	
	margin-bottom: 1rem;
}

.blog-post { 
	margin-left: 2rem;
}

.stappenplan{ 
	font-weight: 700;
}

.einde-stappenplan {
	padding-bottom: 5rem;
	
}

.callout-nosidebar { 
	margin-left: 15rem;
}
/* Einde main content */

/*Footer*/
 
.marketing-site-footer {
    background: #435061;
    color: #8aa0ae;
    padding: 2rem 0 0;
  }
 
  .marketing-site-footer .marketing-site-footer-menu-social a {
    color: #fefefe;
  }
 
  .marketing-site-footer .column-block {
    margin-bottom: 30px;
  }
 
  .marketing-site-footer  .row {
    margin-bottom: 1rem;
  }
 
.titel-socialmedia-footer { 
	font-size: 25px;
	font-style: normal;
}
  .social-media-iconen-footer {
    text-align: left;
	color: white;
	padding-top: 2rem;
  }
 
  .social-media-iconen-footer .social-button {
    display: inline-block;
    cursor: pointer;
    width: 3.125rem;
    height: 3.125rem;
    border: 0.125rem solid transparent;
    padding: 0;
    text-decoration: none;
    text-align: center;
    color: #fefefe;
    font-size: 1.5625rem;
    font-weight: normal;
    line-height: 2em;
    border-radius: 1.6875rem;
    transition: all 0.5s ease;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
  }
 
  .social-media-iconen-footer .social-button:hover, .rounded-social-buttons .social-button:focus {
   	transform: rotate(360deg);
  }
 
  .social-media-iconen-footer .social-button.facebook {
    background: white;
  }
 
  .social-media-iconen-footer .social-button.facebook:before {
    font-family: "FontAwesome";
   
  }
 
  .social-media-iconen-footer .social-button.facebook:hover, .rounded-social-buttons .social-button.facebook:focus {
    color: #FFAF00;
    background: #fefefe;
    border-color: #FFAF00;
  }
 
  .social-media-iconen-footer .social-button.linkedin {
    background: white;
  }
 
  .social-media-iconen-footer .social-button.linkedin:before {
    font-family: "FontAwesome";
   
  }
 
  .social-media-iconen-footer .social-button.linkedin:hover, .rounded-social-buttons .social-button.linkedin:focus {
    color: #FFAF00;
    background: #fefefe;
    border-color: #FFAF00;
  }
 
  .social-media-iconen-footer .social-button.youtube {
    background: white;
  }
 
  .social-media-iconen-footer .social-button.youtube:before {
    font-family: "FontAwesome";
  }
 
  .social-media-iconen-footer .social-button.youtube:hover, .rounded-social-buttons .social-button.youtube:focus {
    color: #FFAF00;
    background: #fefefe;
    border-color: #FFAF00;
  }
 
  .social-media-iconen-footer .social-button.instagram {
    background: white;
  }
 
  .social-media-iconen-footer .social-button.instagram:before {
    font-family: "FontAwesome";
   
  }
 
  .social-media-iconen-footer .social-button.instagram:hover, .rounded-social-buttons .social-button.instagram:focus {
    color: #FFAF00;
    background: #fefefe;
    border-color: #FFAF00;
  }
 
 
  .social-media-iconen-footer img{
    height: 45px;
    padding-bottom: 7px;
  }
 
.marketing-site-footer-bottom .marketing-site-footer-bottom-links {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
	padding-top: 2rem;
}
 
 
  .marketing-site-footer-bottom .marketing-site-footer-bottom-links a {
    color: #ffffff;
    padding-left: 5rem;
  }
 
 
  .marketing-site-footer-bottom-links li a:hover:not(.active) {
    background-color: #39404E;
  }

 /* Einde Footer*/
 
 
@media screen and (max-width: 650px) {

/* header */ 
	 
.top-bar-right { 
	display: none;
}
	
.topbar-responsive .menu a {
    padding: 0.875rem 0;
}
 
.topbar-responsive .menu .topbar-responsive-button {
    color: #000000;
    border-color: #ffffff;
    border-radius: 5000px;
    transition: color 0.15s ease-in, border-color 0.15s ease-in;
 }
 
.topbar-responsive .menu .topbar-responsive-button:hover {
    color: #c6d1d8;
    border-color: #c6d1d8;
 }
	  
.topbar-responsive .menu .topbar-responsive-button {
    width: 100%;
    margin: 0.875rem 0; 
}
		
.topbar-responsive {
    padding: 0.75rem;
} 
	  
.topbar-responsive .top-bar-title {
    position: relative;
    width: 100%;
}
	  
.topbar-responsive .top-bar-title span {
    position: absolute;
    right: 0;
    border: 1px solid #fefefe;
    border-radius: 5px;
    padding: 0.25rem 0.45rem;
    top: 50%;
}
	  
.topbar-responsive .top-bar-title span .menu-icon {
    margin-bottom: 4px;
}
	  
.topbar-responsive-links {
      animation-fill-mode: both;
      animation-duration: 0.5s;
      width: 100%;
      animation: fadeIn 1s ease-in;
}

/* einde header */
	  
/* sidebar */

.sidebar { 
	display:none;
}
	  
/* einde sidebar */ 
	  
/* Home pagina voor de routeplanner */

 .menu-hover-lines { 
	display:none;
}

.lessen-container h1 {
   	margin-left: 20rem;
}
	  
.show-sidebar img{ 
	width: 50%;
}
	  
/* Niveau kiezen op kleiner scherm */ 
	  
.dropbtn {
  	background-color: #89287D;
  	color: white;
  	padding: 16px;
  	font-size: 16px;
  	border: none;
  	cursor: pointer;
  	border-radius: 8px; 
	justify-content: center;
}

.dropdown {
	margin-top: 150px;
	min-width: 160px;
  	display: inline-block; 
  	margin-left: 12.50rem; /* Center de dropdown */
}

.dropdown-content {
  	display: none;
  	background-color: #f9f9f9;
  	min-width: 160px;
  	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  	z-index: 1;
}

.dropdown-content a {
  	color: black;
  	padding: 12px 16px;
  	text-decoration: none;
  	display: block;
}

.dropdown-content a:hover {
  	background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  	display: block;
}

.dropdown:hover .dropbtn {
  	background-color: #89287D;
}

.dropdown-content .active { 
	color: white;
	background-color: #BE58B1;
}	  
	  
/* Einde niveau kiezen op kleiner scherm */ 
	  
.row.small-up-1 {
	width: 60%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
 }
	  
.row.small-up-1 .product-card { 
	 margin-bottom: 2rem;
}
	  
.row.small-up-1  .card-week15 { 
	margin-top: 3rem;
}	

.column-block img{
   	width: 30px;
}
	  
.column-block {
    margin: 1px 1px; 
}

.weekplanning-met-sidebar {
	padding-top: 1rem;;
	margin-left:-15px;	  
}

.product-card-title{
	margin-top: -7rem;
	}
	
.product-card-desc { 
	display: none;
}
	
.niveau { 
	display: contents;
}
	  
.lesduur { 
	padding-top: 0.75rem;
}

.product-card-desc-small { 
	display: flex;
}	  
 
/* Einde homepagina voor de routeplanner */
	  
	  
/* Lesweek van week 17 */

.ecommerce-product-slider {
    margin-left: 0rem;
}
	
.weekplanning-zonder-sidebar { 
	margin-left: -3.75rem;
	width: 113%
}
	
.titel-lessen-week-17 {
    display: flex;
    flex-direction: row;
    align-items: center;   
}
	  
.lessen-week17 {
	display:none; 
}

.week17-no-sidebar { 
	display: flex;
	margin-top: 5rem; 
	margin-left: 13rem;
}
	
.week17-met-sidebar { 
	display: flex;
	margin-top: 5rem; 
	margin-left: 22rem;
}
	
.eigen-les-toevoegen {
    margin-top: 20rem; 
	margin-left: -54.35rem;
}
 
.column-block img{
    width: 30px;
}
 
.lessen-week-17{ 
	width: 100%;
    display: flex;
    flex-wrap: wrap;
}	  
	
.week-17 {
	margin-left: 2.75rem;
}

	.maandag-card{ 
		height: 100px;
	}
	
	.dinsdag-card { 
		height: 300px;
	}
	
	.woensdag-card { 
		height: 100px;
	}
	
	.donderdag-card { 
		height: 300px;
	}
	
	.vrijdag-card { 
		height: 620px;
	}

.product-card-thumbnail{ 
	margin-bottom: 6rem;
	
	}
	
	.basisles-titel { 
		padding-top: 1rem;
	
	}
	
	.schrijfles-titel { 
		padding-top: 1rem;
	
	}
	
	.technisch-lezen-titel { 
		padding-top: 1rem;
	
	}
	
	.toets-titel { 
		padding-top: 1rem;

	
	}
	.lessen-vrijdag{ 
	height: 620px;
	
	}
	
	
	.lesduur-basisles { 
		margin-left: -3.60rem;
		margin-top: -1rem;
	}
	
	.lesduur-schrijfles { 
		margin-left: -3.95rem;
		margin-top: -1rem;
	
	}
	
	.toets-lesduur { 
		margin-left: -2.40rem;
	}
	
	.technisch-lezen-lesduur { 
		margin-left: -7rem;
		margin-top:-5rem;
		width: 10rem;
	}
	
	.niveau{
		display: none;	
		
	}

	
.hoeveelheid-lessen {
	padding-top: 0.75rem; 
}
	
	.no-sidebar { 
		margin-left: -2.2rem;
		margin-top: -2rem;
	}
	
	.titel-no-sidebar { 
		margin-top: -5rem;
	}

	.lesduur-no-sidebar { 
		margin-left: -6.75rem;
	}
	
	.lesduur-sidebar { 
		margin-top: -2rem;
		margin-left: -3.5rem;
	}
/* Einde lesweek van week 17*/
	  
	
/* Begin basislessen week 17 */ 
	
	.primary {
		width: 80%;
		margin-left: 3.5rem;
			
	}
/* Footer */
	  
.marketing-site-footer .columns { 
    margin-bottom: 1rem;
}
 
.marketing-site-footer-name {
    color: #fefefe;
    margin-bottom: 1rem;
    font-size: 2rem;
}
 
.titel-socialmedia-footer {
    color: #fefefe;
	margin-top: 1rem;
    font-size: 1.25rem;
 }
 
.marketing-site-footer-block {
    display: flex;
   	margin-bottom: 1rem;
 }
 
.marketing-site-footer-block .fa {
    font-size: 2rem;
    color: #061e36;
 }
 
.marketing-site-footer-block p {
    margin-left: 1rem;
    line-height: 1.125rem;
 }
 
.marketing-site-footer-bottom {
    background: #435061;
    padding: 1rem 0;
 }
 
.marketing-site-footer-bottom p,
.marketing-site-footer-bottom .menu {
    margin-bottom: 0;
	margin-top: -6rem;
 }
 
.marketing-site-footer-bottom .marketing-site-footer-bottom-links {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
 
.marketing-site-footer-bottom .marketing-site-footer-bottom-links a {
  	color: #ffffff;
	text-align: center;
	margin-left: -5rem;
}
   
.marketing-site-footer-bottom-links li a:hover:not(.active) {
    background-color: #39404E;
	
}	
	.social-media-iconen-footer {
	margin-top: -1rem;
	margin-left: 10rem;
	margin-bottom: 2rem;
	}
}

/* einde footer */

	@keyframes fadeIn{ 
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }