@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,600,600i,700,700i');

body {
  font-family: Roboto, Arial, Helvetica, sans-serif;
}

a {color: #007ab8; text-decoration: none}

a:hover {color: #007ab8; text-decoration: underline;}

header.py-3 {
  padding-bottom: 0.5rem !important;
}

div.header-image {
    text-align: center;
	background-color: white;
}

div.header-text {
    font-size: 50px;
	font-weight: bold;
	color: #0077b3;
	margin-left: 35px;
	vertical-align: middle;
}

div.nls-kop-tekst-smallscreen {   /* ? */
    font-size: 40px;
	font-weight: bold;
	color: #0077b3;
	margin-left: 10px;
	margin-top: 20px;
	vertical-align: middle;
}

div.stitle {
	width: 100%;
	background-color: #66afd4;
	color: white;
	font-weight: bold;
	font-size: 35px;
	margin-top: 8px;
	padding-left: 12px;	
}

.tocc a {
	color: #007ab8;
	text-decoration: none;
}

.tocc a:hover {text-decoration: underline;}

div.toc-indent {
	margin-left: 1em;
	padding-left: 1em;
	text-indent: -1em;
}

main.col-lg-9 {
	padding-left: 25px;
	padding-right: 25px;
	max-width: 95ch;
}

div.footer {
    margin-top: 20px;
}

hr.footer {
	color: #0066cc;
}

p.copyright {
	font-size: 13px;
}

h1 {
	font-size: 32px;
}

.left-image {
  width: 55%;
  display: inline-block;
}
.right-image {
  width: 40%;
  float: right;
  display: inline-block;
}

.task {
	color: #000000;
	font-size: 120%;
	margin-top: 20px;
}

.extra-text {
	color: #515151;
	margin-top: 8px;
}

.youtube-container {
	width:401px; 
	height:256px;
}

ol {
  counter-reset: list;
  padding-left: 0;
}
ol > li {
  list-style: none;
}
ol > li:before {
  content: "(" counter(list, lower-alpha) ") ";
  counter-increment: list;
}

.arrow {font-size: 110%; font-weight: bold; color: black; font-style: normal;}


/* Stijldedfinities hamburgermenu */
.hamburger-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
 }

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}
/* Einde stijldefinities hamburgermenu */

/* Media-definities: instellingen voor grote en kleine schermen */

/* ============ desktop view ============ */
@media all and (min-width: 992px) {

	.sidebar li{ position: relative; }

	.sidebar li .submenu{ 
		display: none;
		position: absolute;
		left:100%; top:-7px;
		min-width: 240px;
	}

	[dir=rtl] .sidebar li .submenu{ 
		right:100%; left:auto;
	}

	.sidebar li:hover{ background: var(--bs-light); }
	.sidebar li:hover > .submenu{ display: block; }

}	
/* ============ desktop view .end// ============ */

   div#header-smallscreen {
		display: none;
	}
  
  	div#header {
    display: block;
    }


/* ============ small devices ============ */
@media (max-width: 991px) {

	#menu {
		display: none;
	}

	.sidebar .submenu, .sidebar .dropdown-menu {
		position: static!important;
		margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;
	}
   
    div#header-smallscreen {
		display: block;
	}
  
	div#header {
    display: none;
    }
	
}
/* ============ small devices .end// ============ */


.sidebar .nav-link {
    font-weight: 400;
    color: #0077b3;
}
.sidebar .nav-link:hover {
    background: var(--bs-light);
    color: #cc4100;
}

div#leftbox {
  display: inline-block;
  width: 23.5%;
}

div#rightbox {
  display: inline-block;
}

div#leftbox-smallscreen {
  display: inline-block;
  height: 50px;
}

div#rightbox-smallscreen {
  display: inline-block;
  height: 50px;
  float: right;
}

img.smallscreen {
	 height: 100%
}


@media (max-width: 450px) {
	
.youtube-container {
	width:355px; 
}

}