body {
	margin: 0 0 0 0;
}

img {
	width: 100%;
}

iframe {
	width: 100%;
	height: 100%;
}

.header{
	height: 5em;
	background-color: rgba(43, 43, 43, 0.7);
	position: fixed;
	width: 100vw;
}


.dummy {
	height: 5em;
}

.newbtn{
	width:8em;
	margin-right: 1rem;
	margin-left: 0.2rem;
}

.headcolumn {
	float: left;
}

.headcolumn.chkbox {
	margin-right: 1em;
	padding-right: 1em;
	border-right-width: 1px;
	border-right-style: solid;
}

.headcolumn.chkbox1 {
	padding-left: 1em;
	border-left-width: 1px;
	border-left-style: solid;
}

.headcolumn.title {
	height:100%;
	display: flex;
	align-items: center;
}

.headcolumn.title h2 {
	color: #f4f4f4;
	margin-bottom: 0.2rem;
	margin-top: 0.2rem;
}

.headcolumn.title a {
	color: #f4f4f4;
}

.headcolumn.title a:active {
	color: #bdbdbd;
}

.chkbox label {
	width: 8em;
	display:inline-block;
	color: #f4f4f4;
}

.chkbox input {
/* 	transform: scale(2); */
	margin-top: 1em;
}


.chkbtn{
	height:50%;
}

.exercisebtn {
	float: right;
	height: 100%;
}

.exercisebtn button {
	width: 8em;
	margin-right: 0.2rem;
}

.btn {
	background-color: #fffc;
	margin-top: 0.2rem;
	margin-bottom: 0.2rem;
	height: 4.6rem;
}


.contentcontainer {
	margin: 2em;
}

.chapterheading {
	height: 4em;
}

.chapterheading div {
	float: right;
	margin-top: 1rem;
}

.chapterheading h2 {
	float: left;
	margin-top: 0.8rem;
}

.chapterheading.first {
	height: 5em;
}

.chapterheading.first div {
	float: right;
	margin-top: 2rem;
}

.chapterheading.first h2 {
	float: left;
	margin-top: 1.8rem;
}

.chapter h3 {
	margin-top: 0;
}

.collapsible {
  background-color: #ccc;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #aaa;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  background-color: #eee;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.collapsible:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}


/* modal (ytoverlay) */

 /* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}