[class*='icon-']:before{
	display: inline-block;
   font-family: 'Raleway';
   font-style: normal;
   font-weight: normal;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale
}
.icon-zwart:before{content:'\0041';}

*{
	color:#ff5e2c;
	font-family: 'Raleway';
	font-weight:300;
	text-transform: uppercase;
	padding:0px;
	margin:0px;
	font-size:16px;
	line-height:24px;
user-select: none;
}
html,
body {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
background:none;
  letter-spacing: 2px;
/*   background-image:url('achter.svg'); */
  background-size: cover;
  background-position: center center;
  width:100vw;
  height:100vh; 
}
b,strong,h3{
	font-weight: 900;
}
.scherm{
	width:1280px;
	margin:0px auto !important;
	height:100vh;
	box-sizing: border-box;
/* 	border:2px solid #aaa; */
	padding:20px;
	margin:0px;
	display:none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: relative;
}

.introscherm, .startscherm{
	padding:0px;
	display:flex;
	align-items: center;
	z-index:999;
}



h2{
font-size:60px;
line-height:60px;
padding:0px;margin:0px;
}

.hand{
	font-family: 'Raleway', cursive;
	text-transform: none !important;
	letter-spacing: 0px !important;
}
.introscherm .hand{
	font-size:30px;
	margin-top:20vw;
	
}

.keuzeblokken {
display:flex;
    position: relative;
    overflow: hidden;
    margin:20px;
    box-sizing: border-box;
}
.keuzeblokken .gradient{
	opacity: 0.2;
}
.keuzeblok {
    flex: 1;
    width: 20vw;
    margin: 0px ;
    border: 4px solid #ff5e2c;
    padding:  20px;
    background: rgba(0,0,0,0.1);
    color:#fff;
}
.keuzeblok:nth-of-type(2){
	margin:0px 20px;
}
.keuzeblokactief{

	background:#ff5e2c;
	color:#000 !important;
	
	z-index: 999;

/* box-shadow: inset 0px 0px 100px #ff5e2c; */
}
.keuzeblokactief *{
 		color:#000 !important; */

}

.gespeeld{

/*
	background:#ff5e2c;
	color:#000 !important;
*/
	border-color:#000 !important;

/* box-shadow: inset 0px 0px 100px #ff5e2c; */
}
.gespeeld *{
/*  		color:#000 !important;  */

}
.gespeeld h4{
	    color: #000;
    text-shadow: 0px 0px 4px #fff;
}
input[type="text"],input[type="time"] {
    background: #fff;
    border: 0px;
    color: #ff5e2c;
    padding: 10px 20px;
    display: block;
    margin-bottom: 10px;
    width: 400px;
    font-weight: 900;
    margin-right:10px;
    box-sizing: border-box;
}
input::-webkit-input-placeholder,input::-moz-placeholder,input::-ms-input-placeholder,{
	color:#aaa !important;
}
.onderdeel input[type="text"] {
    background: #fff;
    color: #ff5e2c;
    width: 120px;
    text-align: center;
    margin: 0px;
    font-weight: 600;
    display: inline;
}
.teamnaam {
    clear: both; 
    float: unset !important; 
    width: 810px !important;
    background-color: #eed272 !important;
}
input[type="text"]::placeholder {
color:#fff;
}

.knop {
 background-color: #ff5e2c;
    color: #fff;
    padding: 10px 20px;
    border-bottom: 4px solid #84361e;
    clear: none;
    display: inline-block;
    font-weight: 900;
    font-size: 20px;
    margin-right:20px;
    text-align: center;
    float:left;
    cursor:pointer;
}
.knop:hover{
	background-color:#84361e;
	    border-top: 4px solid #3c1408;
	    border-bottom:0px;

	
}
.openkolom .knop{
	font-size:14px;
	width:100px;
	padding:5px 10px;
	margin-bottom:3px;
	float:right;
	position:relative;
	clear: none;
	display:inline-block;
	
}
.onderdeel{
    display: inline-block;
    background-color: #eee;
    padding: 5px;
    text-align: center;
    margin-right: 10px;
    margin-bottom: 10px;
        box-shadow:  0px 1px 5px #666;
            border-radius: 4px;
}
.onderdeel input {
    width: 40px;
    text-align: right;
    padding: 3px;
    border: 0px;
    margin: 0px 5px;
}
.onderdelen {
    clear: both;
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: inset 0px 1px 5px #666;
    }
input[type=checkbox]{
	margin:4px;
}
label{
	margin-right:10px;
	font-weight: bold;
}
.aantalspelers {
    width: 820px;
}
.plusspeler{
	background:none !important;
	color:#ff5e2c;
	border:none;
	margin-right:-10px;
	padding:0px 20px;
}

.blokkenscherm{
	display: grid;
  overflow: hidden;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  padding:50px;
}
.blok{
	display: flex;
    border: 4px solid #ff5e2c;
    height: 100%;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.blok *{
	text-align: center;
}
.blokweg{
	transition: 1s;
	transform:rotate(-360deg) scale(0.5);
	opacity: 0;
}
.blok.blokani{
	transition:1s;
	background-color:#ff5e2c !important;
	transform:scale(5) !important;
	transform-origin: center center !important;
	opacity:0 !important;
	transition-delay: 1s !important;;
	
}
.blokani *{
		transition:1s !important;
		color:#000 !important;
	transition-delay: 1s !important;;

	
}
h4{
	font-size: 60px;
    font-weight: 900;
    line-height: 60px;
}

.zintuigenspel1{
	    justify-content: flex-start;
}
.header{
	display: flex;
	flex-direction: row;
	width:100%;
	    height: 120px;
}
.headerblok{
width:120px;
	display: flex;
    background: #ff5e2c;
    height: 100%;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding:10px;
}
.headerblok *{
	text-align: center;
	color:#000 !important;
}
.headerblok h4{
font-size: 100px;
    line-height: 80px;
    }
.headertitel{
	flex: 6;
    font-size: 4vw;
    line-height: 4vw;
    display: flex;
    justify-content: flex-end;
    align-self: center;
    padding-left: 20px;
}
.content{
	flex-grow:1;
	justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}
.uitleg{
	padding: 8vh;
    text-align: center;
    font-size: 20px;
    line-height: 28px
}
.antwoorden {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.antwoord {
    flex: 1;
    padding: 10px 10px;
    flex-grow: 0;
    border: 1px solid #ff5e2c;
    margin: 10px;
      white-space: nowrap;

    }
    .antwoordactief{
	        color: #000;
    background: #ff5e2c;
    }
.verder{
	    position: absolute;
    right: 0px;
    bottom: 10px;
}

.audio{
	display:none;  
}
.hetantwoord {
   
        background-color: #ff5e2c;
    color: #000;
    padding: 10px 20px;
    margin-top: 20px;
}

.hetantwoord *{
	color:#000;
	text-align: center;
}


	.scores {
position: absolute;
bottom: 13px;
left: 67px;
display: none;
font-weight: bold;
font-size: 20px;

}
.descores{
    font-size: 40px;
    color: gold;
    text-shadow: 0px 0px 10px #fff;
    letter-spacing: 0px;
    font-weight: bold;
    }
.stip{
	position: absolute;
	height:60px;
	width:60px;
	background-color:gold;
	border-radius: 100%;
	  animation: pulse 1s infinite;


}
.spelscore{
font-weight: bold;
    font-size: 50px;
    line-height: 0px;
    margin-bottom: -70px;
    }


/* neonletters */
.content>.neoncontainer{
	}
.neoncontainer{
		height: 20vw;
    display: flex;
    width: 30vw;
    position: absolute;
    align-items: center;
    align-content: center;
    justify-content: center;
    margin: 0px;
    overflow: hidden;
    box-sizing: content-box;
    padding:0px;
	top:50%;
	left:50%;
	margin-left:-15vw;
	margin-top:-10vw;
	pointer-events: none;
	mix-blend-mode:lighten;
}
.neoncontainerna{
    left: 16vw;   
     bottom: -10px;
    top: auto;
    right: auto;
    	width:12vw;
    	height:10vw;
    	

}
.neoncontainerna .neon{
	font-size:10vw !important;
	}
.neoncontainerna .neon:after{
	opacity: 0 !important;
	}
	.neoncontainerna .neon:before{
	    filter: blur(0.05em);
	}


.text-effect {
  overflow: hidden;
  position: relative;
          filter: contrast(110%) brightness(190%);
}

.neon {
  position: relative;
  background: black;
  color: white;
    font-family: 'Raleway';

}
.aftel.neon {
    font: 700 28vh 'Raleway';
     font-size: 28vh;
    line-height: 28vh;
    font-weight: bold;
    width:100%;
    height:100%;
     padding:0px; 
    margin:0px;

    
}
.aftel.neon::before, .aftel.neon::after {
	  font-family: 'Raleway' !important;
	   width:100%;
    height:100%;
    padding:0px; 
    margin:0px;
	  }
	  .aftel.neon::before{
		            filter: blur(0.03em);

	  }
.neon::before, .neon::after {
	  font-family: 'Raleway';

  content: attr(data-text);
  color: white;
          filter: blur(0.01em);
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
      padding:1vw;

}
.neon::after {
  mix-blend-mode: difference;
    filter: blur(0.003em);
    opacity: 1;
}

.gradient,
.spotlight {
  position: absolute;
    top: -0%;
  bottom: -0%;
    left: 0vw;

  right: -2px;
  pointer-events: none;
  z-index: 10;
}
.neoncontainer .gradient{
	left: 0vw ;
  right: 0vw ;
}
.gradient {
  background: linear-gradient(45deg, gold, brown);
  mix-blend-mode: multiply;
}

.spotlight {
          animation: light 5s infinite linear;
  background: radial-gradient(circle, white, transparent 25%) 0 0/25% 25%, radial-gradient(circle, white, black 25%) 50% 50%/12.5% 12.5%;
   top: -100%;
  left: -100%;
  bottom: -100%;
  right: -100%;
 
 mix-blend-mode: color-dodge;
}

@-webkit-keyframes light {
  100% {
            transform: translate3d(50%, 50%, 0);
  }
}

@keyframes light {
  100% {
            transform: translate3d(50%, 50%, 0);
  }
}
.neon {
  text-transform: uppercase;
  text-align: center;
  margin: 0;
    font:  400 28vw 'zwartlogo', sans-serif;
    padding:1vw;


}
.neon:focus {
  outline: none;
  border: 0px dotted white;
}

span,b,strong{
	font-size: inherit;
}


.kolom.bewerkkolom {
background: rgba(0,0,0,0.3);
    padding: 10px;
    border-radius: 6px;
}

.groteknop{
	    font-size: 41px;
    line-height: 40px;
    font-weight: 900;
    text-align: center;
    background: #fff;
    padding: 20px;
    box-shadow: 0px 2px 15px #aaa;
}
.code{
	 font-size: 41px;
    line-height: 40px;
    font-weight: 900;
    text-align: center;

	
}
.logo img {
    height: 100px;
}

.logo {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index:99;
}
.logoklant img {
max-height: 100px;
max-width: 280px;
}
.logoklant {
    position: absolute;
    left: 30px;
    bottom: 30px;
    z-index:99;
}
.kaart>img {
width: 540px;
    filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.7));
    }

.naam {
    font-size: 40px;
    font-weight: 900;
    position: absolute;
    top: 26px;
    left: 0px;
    color:#000;
    width:600px;
    word-wrap: break-word;
    text-align: center;
    z-index:999;
}
.naam span{
	font-size:14px;
	display:block;
	clear:both;
	color:#000;
}

.scherm.schemascherm {
    background: none !important;
    /* background-size: 200px; */
}
.scherm.schemascherm:before
{
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    background: url(../achter.jpg) 0 0 repeat;

    transform: rotate(-9deg);
    opacity:0.25;
    background-size: 200px;
}

.blokschema {
    display: inline-block;
    text-align: center;
    color: #fff;
    border: 5px solid #000;
    margin-right: -5px;
    padding: 20px;
    font-size: 20px;
    /* float: left; */
    z-index: 10;
}

.blokschema span {
    display: block;
    font-size: 14px;
    color: #fff;
    line-height: 7px;
    letter-spacing: 3px;
}

.blokschema:nth-of-type(even) {
    /* margin-top: 86px; */
    margin-left: -20px;
    margin-right: -20px;
    transform: translateY(87px);
}

.blokschema:nth-of-type(odd) {
    /* margin-bottom: 100px; */
}

.schema {
    display: block;
    white-space: nowrap;
    height: 206px;
    /* background: #aaa; */
    padding: 20px;
    box-sizing: border-box;
    position: relative;

}
.schema:before{
       content: '';
    width: 100%;
    height: 23px;
    display: block;
    position: absolute;
    z-index: -1;
    top: 27px;
    left: 0px;
    border-top: 64px solid #2acdff;
    border-bottom: 64px solid #2acdff;
    filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5));
    
}  
.kaart {
    display: block;
    position: absolute;
    right: 105px;
    top: -20px;    
}
.schemacontainer {
    bottom: 20px;
    position: absolute;
    /* width: 100vw; */
    display: flex;
    left: 20px;
    right: 20px;
            transform-origin: left bottom;
			
}
#container{
	background: radial-gradient(#604579, #000); 
}
.schemacontainer:before {
   content: '';
    width: 200vw;
    position: absolute;
    height: 400px;
    background: rgba(206, 0, 38, 0.55);
    transform: rotate(2deg);
    left: -20vw;
    z-index: -1;
    top: 35px;
    }
.uitleg {
    padding: 0px;
    text-align: left;
    position: absolute;
    left: 20px;
    top: 120px;
    width: 600px;
    color:#fff;
    min-height: 270px;
        display: flex;
    flex-direction: column;
    justify-content: center;
}
.uitleg *{
	color:#fff;
}
.uitleg h1,.gametitel{
	    font-size: 40px;
    font-weight: 900;
    line-height:40px;
}
.uitleg p,gameuitleg {
    padding: 20px 0px;
}

.kaartoverlay {
    height: 20px;
    width: 20px;
    background: #ff00c8;
    position: absolute;
    display: block;
    left: 120px;
    top: 200px;
    border-radius: 100%;
    border: 4px solid #fff;
    box-shadow: 0px 3px 5px rgba(0,0,0,0.5);
    animation: pulse 2s infinite;
    transform-origin:center center;
}
@keyframes pulse {
  0% {

    box-shadow: 0 0 0 0 rgb(204, 44, 171);
        transform:scale(1.6);

  }
  30% {
    transform:scale(1);

  }
  70% {

      box-shadow: 0 0 0 10px #ff00c800;
  }
  100% {
      box-shadow: 0 0 0 0 rgba(204, 44, 177, 0);
          transform:scale(1.6);

  }
}
@keyframes pulse2 {
  0% {

    box-shadow: 0 0 0 0 rgb(204, 44, 171);
        transform:scale(1.1);

  }
  30% {
    transform:scale(1);

  }
  70% {

      box-shadow: 0 0 0 10px #ff00c800;
  }
  100% {
      box-shadow: 0 0 0 0 rgba(204, 44, 177, 0);
          transform:scale(1.1);

  }
}
.game,.finale{
	     display: block;
    height: 98vh;
    width: 98vw;
    position: absolute;
    left: 10px;
    top: 1vh;
    box-sizing: border-box;
    margin: 0px;
    padding: 0p;
    border: 10px solid rgba(255,255,255,0.5);
    transform: rotate(1deg);
    box-shadow: 6px 10px 5px rgba(0,0,0,0.5);
}
.finale{
	background-color:#fff700db;
}
.kolomlinks {
    margin-top: 120px;
    width: 40%;
    margin-left: 20px;
    background: #fff;
    padding: 20px;
    transform: rotate(-2deg);
    float:left;
}
.uitleg:before {
    content: '';
    height: 130%;
    width: 105%;
    background: rgba(20, 48, 134, 0.8);
    position: absolute;
    z-index: -1;
    top: -15%;
    left: -5%;
    transform: rotate(-2deg);

    box-shadow: 0px 0px 40px rgba(40, 205, 255, 0.31);
    border: 5px solid #fff;
}
.naam:before {
    content: '';
    height: 120%;
    width: 100%;
    background: rgba(252, 255, 39, 0.34);
    position: absolute;
    z-index: -1;
    top: -16%;
    left: 0px;
    transform: rotate(1deg);
    /* box-shadow: 0px 0px 40px rgba(40, 205, 255, 0.31); */
    /* border: 5px solid #fff; */
}
.begintijd,.eindtijd {
    position: absolute;
    top: 87px;
    color: #fff;
    background: #ff5e2c;
    padding: 5px 10px;
    font-size: 24px;
    transform: rotate(-4deg);
    left: -10px;
    border: 3px solid #000;
    box-shadow: 0px 0px 10px 4px #fff;
}

.eindtijd {
    transform: rotate(4deg);
    left: auto;
    margin-left: -32px;
}
.tijdlijn{
       position: absolute;
    height: 180px;
    width: 6px;
    background: #ff5e2c;
    top: 12px;
    left: 0px;
    box-shadow: -10px 4px 10px rgba(0,0,0,0.5);
    border-radius: 5px;
    transition: 1s;
    display:none;
}
.gamescores {
    float: right;
    margin-top: 140px;
    margin-right: 20px;
    width: 40%;
    /* display: flex; */
    background: rgba(0,0,0,0.4);
    padding: 20px;
    transform: rotate(2deg);
    box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
    /* border: 2px solid rgba(255,255,255,1); */
}

.invoeren {
    display: flex;
    padding: 20px;
    justify-content: space-between;
}

.invoeren * {
    color: #fff;
    text-shadow: 0px 3px 0px rgba(0,0,0,0.5);
}

.invoeren:nth-of-type(odd) {
    background: rgba(255,255,255,0.1);
}

.invoernaam {
    PADDING: 0px 10px;
    font-size: 24px;
    width: 330px;
}

.invoerplus {
    /* display: flex; */
    /* justify-self: flex-end; */
    /* float: right; */
}

.invoernr {
    /* display: flex; */
    /* align-content: flex-end; */
    /* float: right; */
}

.invoermin,.invoernr,.invoerplus {
    /* display: flex; */
    /* align-self: stretch; */
    /* width: 40px !important; */
    font-size: 40px;
}

.invoermin,.invoerplus {
    /* border: 4px solid #fff; */
    width: 48px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 70px;
    border-radius: 9px;
    margin-top: -11px;
    margin-left: 10px;
    cursor: pointer;
    margin-bottom: -11px;
    background: #87dc00;
    border-bottom: 4px solid rgba(0,0,0,0.4);
}

.invoermin {
    line-height: 30px;
    margin-right: 11px;
    background: #dc0000;
}

.invoernr {
    line-height: 15px;
}
.gametijd{
	      background-image: conic-gradient(#ffffffc4 112deg, #00000069 0);
    display: inline-block;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    /* border: .15em solid #fff; */
    /* box-shadow: 0 0.075em 0.2em 0.05em rgba(0,0,0,.25); */
    background-origin: border-box;
    transition: 1s;
    position: absolute;
    bottom: 10px;
    /* border: 1px dashed #fff; */
    left: 10px;
    display: flex;
    text-align: center;
    justify-content: center;
    /* align-items: center; */
    font-size: 81px;
    color: #fff;
    text-shadow: 0px 4px 10px #000;
    line-height: 137px;
    font-weight: 900;
    letter-spacing: -1px;
    box-shadow: 0px 0px 10px #000;
    border: 10px solid rgba(255,255,255,0.7);
    }
    .gameover {
    display: block;
    position: absolute;
    bottom: 40px;
    left: 40px;
    background: #00ff7ee6;
    color: #fff;
    padding: 30px;
    z-index: 9999;
    border: 10px solid #ffffffb8;
    width: 45%;
    box-shadow: 10px 10px 0px #000;
}

.gameover * {
    color: #fff;
}

.gameover h1 {
    font-size: 40px;
    font-weight: 900;
    /* margin-bottom: 20px; */
}

.gameover p {
    padding: 20px 0px;
}

.knop.gameoverknop {
    background-color: #ffe000;
    border-color: #bfb200;
    width: 93%;
    animation: pulse2 2s infinite;
    box-shadow: 0px 4px 20px #fff;
}
.gamescores h1 {
    color: #fff;
    font-size: 40px;
    margin-bottom: 20px;
    font-weight: 900;
}

.finale h1 {
    font-size: 40px;
    /* margin-top: 122px; */
    font-weight: 900;
    margin-bottom: 20px;
}

.finale {
    background-color: #fff700db;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 120px;
}

.finale * {
    color: #000;
}

.finale p {
    max-width: 1000px;
}

.highscore {
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

.highnr {
    padding-right: 20px;
}

.highscore:nth-of-type(odd) {
    background-color: #fff;
}

.highnaam {
    padding-right: 20px;
}

.highscores {
    background: rgba(255,255,255,0.8);
    padding: 20px;
    margin-top: 20px;
}

.uitlegstart{
	text-align: left;
	max-width:740px;
	align-self: center;
	margin-bottom:20px;
}

.speleraanwezig {
    text-align: center;
    padding: 20px 5px;
    filter: contrast(0.5) brightness(10);
            display: flex;
    flex-direction: column;
    height: 63px;

}

.speleraanwezig * {
    height: 40px;
    
}

.speleraanwezig.iser {
    filter: contrast(0.2) sepia(1) saturate(30);
}
.aantalspelers {
    width: 820px;
    display: flex;
    justify-content: center;
}

.overlay{
	background:rgba(0,0,0,0.3);
	position: fixed;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	height:100vh;
	width:100vw;
	margin:0px;
	padding:0px;
	z-index:99999999;
	cursor:pointer;
	display:flex;
	align-items: center;
	justify-content: center;
}
.popup{
	width:400px;
	padding:30px;
	background:#fff;
	display:block;
	flex:1;
}

.muziek {
    height: 40vh;
    text-align: center;
    margin-top: 20vh;
    cursor: pointer;
    width: 40vh;
    margin: 0px auto;
    margin-top: 20vh;
    position: relative;
}

.muziek * {
    height: 40vh;
    opacity:0;
}
.muziek:hover{
    filter:invert(1);
}
.muziek:after {
   content: '\25B8';
color: #fff;
position: absolute;
right: 100px;
top: 20vh;
font-size: 100px;
display: block;
width: 100px;
height: 100px;
line-height: 74px;
background-color: rgba(0,0,0,0.3);
border-radius: 30px;
padding: 40px 40px 30px 50px;
text-align: center;
box-shadow: 0px 0px 100px #fff;

    
    }
    @media (max-width:768px){
	    .muziek:after{top:200px !important;}
	    iframe {
    height: 70vh !important;
}
    }

.highscores,.tussenscores {
    /* position: fixed; */
    /* margin: 0px auto; */
    /* margin-left: -225px; */
    width: 450px;
    /* left: 50%; */
    box-sizing: border-box;
    /* display: flex; */
    align-self: flex-start;
    /* top: 0px; */
    z-index: 99999999;
    background: #rgba(255,255,255,0.8);
    box-shadow: 0px 0px 20px #ff5e2b;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.tussenscores {
    transform: scale(0.45);
    bottom: 175px;
    left: 20px;
    opacity: 0.9;
    background: rgba(0,0,0,0.3);
    padding: 10px;
    width: 560px;
    transform-origin: left bottom;
    top: unset;
    position: absolute;
    height: auto;
    max-height: 600px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.highscorestitel,.tussenscorestitel {
    font-size: 40px;
    text-align: center;
    line-height: 35px;
}

.highscorescontent table,.tussenscorescontent table {
    width: 100%;
    background: rgba(0,0,0,0.1);
    margin-top: 20px;
    border-collapse: collapse;
}

.highscorescontent td,.tussenscorescontent td {padding: 15px;/* row-gap: 0px; */}

.highscorescontent tr:nth-of-type(odd),.tussenscorescontent tr:nth-of-type(odd) {
    background: rgba(0,0,0,0.1);
}

tr.actief {
    background: #ff5e2c !important;
}

tr.actief * {
    color: #fff !important;
}

.vraagcontainer {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 40px;
    display: flex;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    /* flex-direction: column; */
    /* align-items: center; */
    flex-wrap: wrap;
    padding-top: 20px;
    padding-bottom: 17px;
}
.vraagVraag {
    margin-bottom: 20px;
    font-size: 20px;
    line-height: 20px;
        margin: 0px 200px 20px 200px;
        color:#fff;

}
.vraagAntwoordcontainer {
    flex-basis: 410px;
    /* margin-bottom: -27px; */
}
.knop.weetnietKnop {
    position: absolute;
    right: 0px;
    transform:scale(0.627);
    transform-origin: bottom right;
    background-color: #f00;
    border-color: #c00;
    bottom: 28px;
}

.knop.hintKnop {
    position: absolute;
    right: 0px;
    transform: scale(1);
    transform-origin: bottom right;
    background-color: #b400ff;
    border-color: #6100cc;
    bottom: 66px;
    width: 168px;
}
.vraagKnoppencontainer{
	flex-basis: 100px;
}
input.vraagAntwoord {
    font-size: 30px;
    line-height: 0px;
    padding: 6px 20px;
}

.topcontainer {
    position: absolute;
    left: 0px;
    position: fixed;
}

.tijd {
    font-size: 50px;
    position: absolute;
    left: 100px;
    top: 40px;
        animation: text-shadow 1s ease-in-out infinite;
}
.score {
    font-size: 50px;
    position: absolute;
    left: 350px;
    top: 40px;
    color:#fff;
    transition: 1s ease-out;
    	transform:rotate(0deg) scale(1);

}

.anders{
	transform:rotate(360deg) scale(1.5);
}

@keyframes text-shadow {
    0% {  
        transform: translateY(0);
        text-shadow: 
            0 0 0 #0c2ffb55, 
            0 0 0 #2cfcfd55, 
            0 0 0 #fb203b55, 
            0 0 0 #fefc4b55;
    }

    20% {  
        transform: translateY(-1em);
        text-shadow: 
            0 0.125em 0 #0c2ffb55, 
            0 0.25em 0 #2cfcfd55, 
            0 -0.125em 0 #fb203b55, 
            0 -0.25em 0 #fefc4b55;
    }

    40% {  
        transform: translateY(0.5em);
        text-shadow: 
            0 -0.0625em 0 #0c2ffb55, 
            0 -0.125em 0 #2cfcfd55, 
            0 0.0625em 0 #fb203b55, 
            0 0.125em 0 #fefc4b55;
    }
    
   60% {
        transform: translateY(-0.25em);
        text-shadow: 
            0 0.03125em 0 #0c2ffb55, 
            0 0.0625em 0 #2cfcfd55, 
            0 -0.03125em 0 #fb203b55, 
            0 -0.0625em 0 #fefc4b55;
    }

    80% {  
        transform: translateY(0);
        text-shadow: 
            0 0 0 #0c2ffb55, 
            0 0 0 #2cfcfd55, 
            0 0 0 #fb203b55, 
            0 0 0 #fefc4b55;
    }
}


.vraagAntwoordcontainer {
    flex-basis: 410px;
    /* margin-bottom: -27px; */
}

.vraagVraag {
    font-size: 20px;
    line-height: 20px;
    padding: 0px 200px 20px 200px;
    box-sizing: border-box;
    width:100%;
    text-align: center;
}

.popup {
    width: 400px;
    /* height: 300px; */
    padding: 30px;
    background: #fff;
    display: block;
    flex: 1;
    max-width: 400px;

}

.popuptitel {
    font-size: 37px;
    line-height: 81px;
    text-align: center;
}
.popuptext{
	    text-align: center;

}
.popup.popupfout {
    box-shadow: 0px 0px 100px #f00;
    border-top: 10px solid #f00;
    border-bottom: 10px solid #f00;
}
.popupgoed{
        box-shadow: 0px 0px 100px #65ef4e;
    border-top: 10px solid #65ef4e;
    border-bottom: 10px solid #65ef4e;
}


.popuphint{
        box-shadow: 0px 0px 100px #b400ff;
    border-top: 10px solid #b400ff;
    border-bottom: 10px solid #b400ff;
}




.logo,.tijd,.logoklant,.score {
    filter: drop-shadow(0px 4px 2px rgba(0,0,0,0.3));
}

.fullscreen {width: 38px;
height: 31px;
box-sizing: border-box;
position: absolute;
border-color: #fff;
border-left: 4px solid #fff;
border-right: 17px solid #fff;
border-bottom: 4px solid #fff;
border-top: 14px solid #fff;
left: 20px;
top: 20px;
cursor: pointer;
transition: 1s ease-out;}
.fullscreen:hover {border-top: 4px solid #fff;border-right: 4px solid #fff;}

.preplaatje{
	position:fixed;
	left:-40000px;
	top:0px;
}