/*
 Theme Name:   Glabbast
 Description:  brainstorm en concept basisthema
 Author:       brainstorm en concept
 Version:      1.0.0
*/
@font-face {
  font-family: 'Marselis Pro';
  src: url('fonts/MarselisPro.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Marselis Pro';
  src: url('fonts/MarselisPro-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Marselis Pro';
  src: url('fonts/MarselisPro-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Marselis Pro';
  src: url('fonts/MarselisPro-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'Marselis Pro';
  src: url('fonts/MarselisPro-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Marselis Pro';
  src: url('fonts/MarselisPro-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Marselis Pro';
  src: url('fonts/MarselisPro-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Marselis Pro';
  src: url('fonts/MarselisPro-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
}


:root {
  /*--purple: #9060EF; */
  --purple: #FCC12B;
	--pink: #D50D60;
	--pink-25: #ED9EBF;
  --pink-50: #E56D9E;
  --pink-75: #DD3E7F;
  --light: #F2F2F2;
  --aqua: #3ABACB;
}
.cl-white { color:white !important; }
.cl-pink { color:var(--pink); }
.cl-purple { color:var(--purple); }
.cl-black { color:black !important; }

.bg-white {
  background-color:white;
  color:var(--pink);
}

.bg-pink {
  background-color:var(--pink);
  color:white;
}
.bg-aqua {
  background-color:var(--aqua);
  color:white;
}

.bg-bubbles {
  background-image:url('img/bg_landscape.svg');
  background-size:cover;
  background-position:center;
}
@media (orientation: portrait) {
  .bg-bubbles {
    background-image:url('img/bg_portrait.svg');
  }
}

body, html {
	width:100%;
	font-family:marselis pro;
	overflow:auto;
	margin:0px auto;
	*background-color:var(--pink);
  overflow-x:hidden;
  min-height:100%;
}
body {
  height:100%;
}
h1, h2, h3, h4, h5, h6 {
	font-weight:bold;
  color:black;
}
.bg-pink h1 {
  color:white;
}

@media screen and (max-width:576px) {
  h1 {
    font-size:36px;
  }
}
hr {
  border-color:var(--pink);
  opacity:.7;
}
.bg-pink hr {
  border-color:white;
}

.loader {
  position:fixed;
  z-index:10000;
  background-color:rgba(255,255,255,.6);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:var(--pink);
  font-size:30px;
  width:100vw;
  height:100vh;
  transition:.3s;
  opacity:0;
  pointer-events:none;
}
.loader.active {
  opacity:1;
  pointer-events:auto;

}
  .loader i {
    animation:load 1s linear infinite;
  }
@keyframes load {
  0% { transform:rotate(0deg); }
  100% { transform:rotate(360deg); }
}

.top-bar {
	position:fixed;
	top:0;
	left:0;
	height:100px;
	background-color:transparent !important;
	color:var(--pink);
	width:100%;
	padding:20px 15px;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:.3s;
	z-index:999;

}
.top-bar.bg-pink {
	color:white;

}
.scrolling .top-bar.bg-white {
  	background-color:white !important;
}
.scrolling .top-bar.bg-pink {
  	background-color:var(--pink) !important;
}
.scrolling .top-bar {
	height:80px;
}
@media screen and (max-width:767px) {
  .top-bar {
    height:80px;
  }
}

	.top-bar .logo {
		width:200px;
		height:100%;
		background:var(--pink);
		-webkit-mask: url('img/logo.svg') no-repeat center;
	  mask: url('img/logo.svg') no-repeat center;
	  -webkit-mask-size: contain;
	  mask-size: contain;
	}

	.top-bar.bg-pink .logo {
		background:white;
	}


	.top-bar .burger {
		position:absolute;
		right:25px;
		top:calc(50% - 25px);
		height:50px;
		width:50px;
		display:flex;
		align-items:center;
		justify-content: center;
		cursor:pointer;
    border-radius:50%;
	}
  .top-bar.bg-pink .burger {
    background-color:var(--pink);
  }
		.top-bar .burger .lines {
			width:45%;
			height:2px;
			border-radius:2px;
			background-color:var(--pink);
			box-shadow:0px -8px 0px var(--pink), 0px 8px 0px var(--pink);
			transition:.3s;
		}
		.top-bar .burger:hover .lines {
			box-shadow:5px -8px 0px var(--pink), -5px 8px 0px var(--pink);
		}
		.top-bar.bg-pink .burger .lines {
			background-color:white;
			box-shadow:0px -8px 0px white, 0px 8px 0px white;

		}
		.top-bar.bg-pink .burger:hover .lines {
			box-shadow:5px -8px 0px white, -5px 8px 0px white;
		}

nav {
	width:100vw;
	height:100vh;
	position:fixed;
	top:0;
	right:0;
	max-width:400px;
	z-index:1000;
	background:var(--pink);
	transform:translateX(100%);
	opacity:0;
	transition:.5s;
	overflow:hidden;
}
nav.opened {
	transform:translateX(0%);
	opacity:1;
}
nav:after {
	content:" ";
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0%;
	z-index:-1;
	background-color:rgba(0,0,0,.1);
}

	nav .close {
		position:absolute;
		right:25px;
		top:30px;
		height:40px;
		width:40px;
		display:flex;
		align-items:center;
		justify-content: center;
		cursor:pointer;
		z-index:2;
		opacity:1 !important;
		transition:.3s;
	}
	.scrolling nav .close {
		top:20px;
	}
			nav .close:before,
			nav .close:after {
				width:2px;
				height:26px;
				position:absolute;
				content:" ";
				pointer-events:none;
				background-color:white;
				transform:rotate(45deg);
				transition:.25s;
			}
				nav .close:after {
					transform:rotate(-45deg);
				}
				nav .close:hover:before {
					height:14px;
					margin-top:9px;
				}
				nav .close:hover:after {
					height:14px;
					margin-bottom:9px;
				}

  nav .logout {
    position:absolute;
		right:25px;
		bottom:30px;
		height:40px;
		width:40px;
		display:flex;
		align-items:center;
		justify-content: center;
		cursor:pointer;
		z-index:2;

		transition:.3s;
    color:white;
    font-size:30px;
    text-decoration:none;
  }
    nav .logout:hover {
      opacity:.7;
    }
	nav .menu-items {
		width:100%;
		margin-top:100px;

		transition:.3s
	}

	.scrolling nav .menu-items {
		margin:80px 0 0 0;
		padding:0;
	}
	nav .menu-items ul {
		padding:0;
		margin:0;
	}
		nav .menu-item {
			list-style-type:none;
			width:100%;
			color:white;
			text-overflow:ellipsis;
			white-space:nowrap;
			overflow:hidden;
		}

			nav .menu-item a {
				padding:20px 20px 20px 50px;
				text-overflow:ellipsis;
				white-space:nowrap;
				overflow:hidden;
				width:100%;
				color:white;
				display:block;
				text-decoration:none;
				transition:.3s;
				font-size:18px;
			}
			nav .menu-item a:hover {
				background-color:rgba(0,0,0,.1);
			}


header {
  width:100%;
  background-color:white;
  margin:0px auto 30px auto;
  padding-top:110px;
  position:relative;
  overflow:hidden;
  min-height:350px;
}
header.bubble-mask {
  -webkit-mask-image: url(img/bubble_mask.svg);
  mask-image: url(img/bubble_mask.svg);
  mask-repeat: no-repeat;
  mask-size:100% auto;
  mask-position:center bottom;
  aspect-ratio:1 / .5;
  max-width:1400px;
}
header.bubble-mask.small {
  min-height:220px;
  aspect-ratio:1 / .25;
}

  @media screen and (max-width:1199px) {
    header.bubble-mask {
      mask-size:150% 200%;
      aspect-ratio:1 / .7;
    }
  }
  @media screen and (max-width:991px) {
    header.bubble-mask {
      mask-size:180% 200%;
      aspect-ratio:1 / 1;
    }
    header.bubble-mask.small {
      aspect-ratio: 1 / .4;
    }
  }
  @media screen and (max-width:767px) {
    header {
      padding-top:90px;
    }
    header.bubble-mask.small {
      aspect-ratio: 1 / .6;
    }

  }

header.bg-pink {
  color:white;
}
  header h1 {
    text-align:center;
  }

  header .bg-image {
    width:50%;
    position:absolute;
    bottom:0;
    right:0;
    z-index:-1;
    max-height:calc(100% - 110px);
    object-fit:contain;
    pointer-events:none;
    animation:slide-up .6s 1;
  }

main {
	padding:110px 0 20px 0;
  overflow:hidden;
  *overflow:visible;
  min-height:100vh;
  position:relative;
  display:block;
}
.bubble-mask + main {
  min-height:0;
}
header + main {
  padding-top:20px;
}

@media screen and (max-width:767px) {
  main {
    padding:90px 0px 20px 0;
  }
}


@keyframes slide-up {
  0% { transform:translateY(50%); opacity:0; }
  100% { transform:translateY(0); opacity:1; }
}
.slide-up {
  animation:slide-up .4s 1;
}

@keyframes drop-down {
  0% { transform:translateY(-50%); opacity:0; }
  100% { transform:translateY(0); opacity:1; }
}
.drop-down {
  animation:drop-down .4s 1;
}


.button {
	padding: 10px 20px;
	background-color:var(--purple);
	color:white !important;
	display:inline-block;
	border-radius:7px;
	cursor:pointer;
	position:relative;
	z-index:1;
	font-weight:bold;
	overflow:hidden;
	transition:.3s;
	text-decoration:none !important;
  text-align:center;
  border:0 !important;
  outline:0;
}
.button.disabled {
  opacity:.5;
  pointer-events:none;
}
.button.small {
	border-radius:30px;
	font-size:14px;
  padding:5px 15px;
  white-space:nowrap;
}
.button.bg-white {
	background-color:white;
	color:var(--pink) !important;
}
	.button:after {
		content:" ";
		width:100%;
		height:100%;
		top:0;
		left:0;
		position:absolute;
		z-index:-1;
		background-color:rgba(0,0,0,.3);
		border-radius:inherit;
		opacity:0;
		transition:.3s;
	}
	.button.bg-white:after {
		background-color:rgba(0,0,0,.15);
	}
		.button:hover:after {
			opacity:1;
		}

		.button + .button {
			margin-left:5px;
		}

.button i {
  font-size:20px;
  margin:0px 5px 0px -5px;
  position:relative;
  top:3px;
}
.button.small i {
  font-size:16px;
  margin:0px 3px 0px -3px;
  top:2px;

}
.button.small i.end {
  margin:0px -3px 0px 3px;
}

.form-group {
	width:100%;
}
.form-group + .form-group {
	margin-top:10px;
}
	.form-label, .custom-form label {
		display:inline-block;
		width:100%;

	}
  .bg-white .form-label {
    color:black;
  }
	.form-control, .input {
		-webkit-appearance:none;
		background:rgba(255,255,255,.7);
		border:1px solid var(--pink);
		border-radius:7px;
		color:black;
    padding:5px 10px;
    width:100%;
	}

	.form-control:focus, .input:focus {
		outline:none;
		border-color:var(--pink);
		box-shadow:0px 0px 0px 2px var(--pink);
	}



	.form-control *, .input *, ::placeholder {
		color:black;
	}

	select.form-control, select.input {
		background-image:url('img/caret-down.png');
		background-repeat:no-repeat;
		background-size:14px;
		background-position:calc(100% - 10px) 50%;
    padding-right:30px;
    text-overflow:ellipsis;
    white-space:nowrap;
    height:initial !important;
	}

  input[type="checkbox"] {
    border:0px solid white;
    background:white;
  }
::placeholder {
	 color:black;
 }




.alert {
  color:inherit !important;
  background-color:rgba(0,0,0,.2);
  border-radius:7px;
  border:0 !important;
}
  .bg-pink .alert {
    padding:10px 10px 12px 12px;
  }
  .bg-white .alert {
    background-color:var(--light);
  }

  .alert i {
    font-size:22px;
    position:relative;
    top:4px;
    margin-right:5px;
  }
  .alert a {
    color:inherit;
  }

.tinylink {
  color:inherit;
  width:100%;
  display:inline-block;
  font-size:12px;
}
  .tinylink:hover {
    color:inherit;
  }


.form-control.searching {
  border-radius:7px 7px 0px 0px;
}
.form-search {
  display:none;
}
.form-control.searching + .form-search {
  display:block;
}
.search-options {
  width:100%;
  border:1px solid var(--pink);
  border-radius:0px 0px 7px 7px;
  	box-shadow:0px -1.5px 0px -1px white, 0px 0px 0px 2px var(--pink);
    z-index:2;
    position:relative;
    border-top:0;
    background:white;
}
  .search-options .option {
    padding:5px 10px;
    width:100%;
    animation:drop-down .4s 1;
    cursor:pointer;
    color:black;
    transition:.3s;
  }
    .search-options .option:nth-of-type(odd) {
      background-color:rgba(0,0,0,.04);
    }
    .search-options .option:hover {
      color:var(--pink);

    }
    .search-options .option:visible + .empty {
      display:none;
    }

    .search-options .empty {
      color:#bbb;
      padding:5px 10px;
    }




.student-card {
  padding:15px 15px 12px 15px;
  border-radius:15px;
  font-size:14px;
  position:relative;
  margin-bottom:15px;
  border:1px solid var(--pink);
  color:#717171;
}

  .student-card .edit {
    position:absolute;
    top:12px;
    right:12px;
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    text-decoration:none;
    opacity:.8;
    color:var(--purple);
  }
  .student-card .edit:hover {
    opacity:1;

  }
  .student-card h5 {
    padding:0;
    margin:0;
    padding-right:30px;
    color:black;
  }
  .student-card hr {
    margin:8px 0 12px 0;
    opacity:.5;
  }
  .student-card a {
        color:#717171;
    font-size:14px;
  }
    .student-card .button {
      background-color:var(--pink-25);
    }



  .progress {
    width:100%;
    height:20px;
    border-radius:10px;
    background-color:var(--light);
    margin:15px 0 25px 0;
    padding:3px;
    position:relative;
    overflow:visible;
  }
    .progress .bar {
      height:100%;
      border-radius:inherit;
      width:0%;
      background-color:var(--pink);
      transition:.4s;
    }

    .progress .icon {
      width:36px;
      height:36px;
      background-color:var(--pink);
      position:absolute;
      top:calc(50% - 18px);
      left:0;
      border-radius:50%;
      color:white;
      text-align:center;
      line-height:38px;
      font-size:20px;
      z-index:2;
    }
    .progress .icon.end {
      left:unset;
      right:0;
    }




    .progress-circle {
      width: 120px;
      aspect-ratio:1 / 1;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      background-color:var(--light);
      font-family: sans-serif;
      margin:15px auto;
    }
/*
      .progress-circle .bar {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        border-radius:inherit;
        z-index:1;
        --percentage:0;
        --color: var(--pink);
        --bg-color: var(--light);
        background: conic-gradient(
          var(--color) calc(var(--percentage) * 1%),
          var(--bg-color) 0
        );
      } */
    .progress-circle .content {
      background: white;
      border-radius: 50%;
      width: calc(100% - 30px);
      height: calc(100% - 30px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index:2;
      color:#717171;

    }
    .progress-circle img {
      width:100%;
    }

        .progress-circle .icon {
          font-size: 40px;
          margin-bottom: 4px;
        }

        .progress-circle .perc {
          font-weight: bold;
          font-size:13px;
        }



        .progress-circle .bar {
          display:none;
        }
        .progress-circle {
          background:transparent;
        }
        .circular-chart {
          width: 100%;
          height: 100%;

          position:absolute;
        }

        .circle-bg {
          stroke: #eee;
        }

        .circle {
          fill: none;
          stroke-linecap: round;
          transition: stroke-dasharray 0.3s;
        }

        .percentage {
          fill: #cc0000;
          font-size: 0.5em;
          dominant-baseline: middle;
          transform: rotate(90deg); /* Revert SVG rotation for text */
        }


.tab-head {
  width:100%;
  font-weight:bold;
  font-size:18px;
  text-align:center;
  padding:10px;
  border-bottom:1px solid white;
  margin-bottom:20px;
  cursor:pointer;
}
  .tab-head:before {
    content: " ";
    width:12px;
    height:14px;
    clip-path:polygon(0% 0%, 100% 50%, 0% 100%);
    background:white;
    display:inline-block;
    margin-right:10px;
    transition:.3s;
  }

  .tab-head.opened:before {
    transform:rotate(90deg);
  }

.tab-content {
  transition:.3s;
  height:auto;
  opacity:1;
}
.tab-content:not(.opened) {
  opacity:0;
  height:0;

  pointer-events:none;
  margin:-50px 0 50px 0;
}




.plyr {
  --plyr-color-main:var(--pink);
}

.plyr > button.plyr__control {
  opacity:1;
}
.plyr > button.plyr__control:hover {
  transform:translate(-50%, -50%);
}
.plyr input[type=range] {
  background:transparent !important;
}
.plyr .plyr__poster {
  background-size:cover;
}
.plyr .plyr__menu__container .plyr__control>span {
  color:var(--text_color);
}
.plyr .plyr__controls__item.plyr__menu {
  display:none !important;
}

.login-bubble {
  width:60%;
  max-height:180px;
  object-fit:contain;
  object-position:center bottom;
  margin:30px auto;
}