:root {
  --primary-color: #663366;
  --secondary-color: #e5007e;

  --grey: #b3b3b3;
  --grey-text: #524d43;
  --blue: #1e90ff;
  --black: #00000;
  --white: #ffffff;
}

/* General */

section {
  padding-top: 20px;
  padding-left: 8%;
  padding-right: 8%;
}

h2 {
  text-transform: uppercase;
  color: var(--black);
  font-size: 48px;
}

h3 {
  color: var(--black);
  font-size: 1.5rem;
}

h5 {
  text-transform: uppercase;
  color: var(--grey);
}

h6 {
  color: var(--grey);
  font-family: Roboto;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

p,
li {
  color: var(--grey-text);
  font-size: 24px;
}

.p-05 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* Padding Top */
.pt-05 {
  padding-top: 0.5rem !important;
}

/* Padding Bottom 0.5 */
.pb-05 {
  padding-bottom: 0.5rem !important;
}

/* Padding Bottom 1 */
.pb-1 {
  padding-bottom: 1rem !important;
}

section button {
  border-radius: 4px;
  border: 1px solid #000;
  background: #fff;
  padding: 10px 15px;
  margin-top: 1rem;
  font-size: 18px;
  align-items: center;
}

.button-text-arrow {
  color: var(--secondary-color);
  padding-left: 15px;
}

.button-text-arrow svg {
  padding-top: 3px;
}

/* General */

/* Leerwijze */

.section-left {
  overflow: hidden;
}

.section-right {
  width: 220px;
  margin-left: 30px;
  float: right;
}

#pagetitle {
  width: 100%;
  margin: 0 auto;
  display: block;
  margin-bottom: 3rem;
}

#subtitle {
  border-bottom: var(--grey) solid 2px;
  height: 8px;
  background-color: white;
}

#subtitle > span {
  background-color: white;
  padding-right: 20px;
}

h2 {
  margin-bottom: 1rem;
}

.article-container {
  margin-bottom: 6rem;
}

.article-container p {
  width: 60%;
}

.leerwijze-3-articles-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6rem;
}

.leerwijze-3-articles-image {
  float: left;
  width: 70px;
  height: 200px;
  margin-right: 30px;
  padding-top: 40px;
}

.leerwijze-3-articles-text {
  width: 370px;
}

.leerwijze-image {
  background-image: url(../img/cover-image.png);
  background-position: bottom -300px right 0px;
  background-repeat: no-repeat;
  height: 314px;
}

.leerwijze-article {
  width: 508px;
  height: 200px;
  margin-top: 57px;
  margin-right: 120px;
  padding-left: 25px;
  float: right;
  background-color: var(--primary-color);
  vertical-align: center;
}

.leerwijze-article h2 {
  color: var(--white);
  font-size: 140px;
  font-weight: 400;
  margin-bottom: -60px;
  margin-top: -40px;
}

.leerwijze-article h3 {
  color: var(--white);
  font-size: 32px;
  font-weight: 500;
}

.leerwijze-article p {
  color: var(--white);
  font-size: 24px;
  font-weight: 400;
}

/* Leerwijze */

/* Toelatingseisen */

.tab {
  overflow: hidden;
}

.tab button {
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 0px;
  margin: 0px 14px;
  color: var(--primary-color);
}

.tab button.active {
  border-radius: 0px;
  border: 0px;
  border-bottom: 1px solid var(--secondary-color);
}

.tabcontent {
  display: none;
  padding: 6px 12px;
}

.tabcontent p {
  width: 100%;
}

/* Toelatingseisen */

/* Weekopbouw */

.weekopbouw p {
  width: 80%;
}

.weekopbouw li {
  margin-bottom: 20px;
}

/* Style the buttons that are used to open and close the accordion panel */
.weekopbouw .accordion {
  /* background-color: #eee; */
  /* color: #444; */
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  outline: none;
  transition: 0.4s;
  border-radius: 0px;
  border: none;
  border-bottom: 1px solid var(--secondary-color);
}

/* Style the accordion panel. Note: hidden by default */
.weekopbouw .panel {
  padding: 10px 18px 0px 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

.weekopbouw .panel p {
  width: 100%;
}

/* Weekopbouw */

/* Kosten */

.kosten-img {
  float: inline-end;
  width: 370px;
  height: 200px;
  margin-left: 10%;
  margin-top: -300px;
}

/* Kosten */

/* Easter Egg */

.easter-egg-video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

/* Easter Egg */

.easteregg-lightsaber1 {
  position: absolute;
  width: 60px;
  height: 60px;
  left: 400px;
}

.easteregg-lightsaber1 img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: 0.3s;
}

.easteregg-lightsaber1 #lightsaber-placeholder:hover {
  opacity: 0;
  cursor: help;
}

.easteregg-lightsaber2 {
  position: absolute;
  width: 60px;
  height: 60px;
  right: 800px;
}

.easteregg-lightsaber2 img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: 0.3s;
}

.easteregg-lightsaber2 #lightsaber-placeholder:hover {
  opacity: 0;
  cursor: help;
}

.easteregg-lightsaber3 {
  position: absolute;
  width: 60px;
  height: 60px;
  right: 800px;
}

.easteregg-lightsaber3 img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: 0.3s;
}

.easteregg-lightsaber3 #lightsaber-placeholder:hover {
  opacity: 0;
  cursor: help;
}