/* @override http://toets.putserver.info/css/digikid.css
	http://digitest.digimaal.site/css/digikid.css
	http://toets.digimaal.dev/css/digikid.css?version=0.00.7 */

/* @override http://dgm.putserver.info/css/digikid.css */

@font-face {
  font-family: Rumpelstiltskin;
  src: url('fonts/Rumpelstiltskin.ttf');
}
body {
  background-image: url("images/kids-7.jpg");
  font-family: Candara, Helvetica, Arial !important;
}
#container{
  background: transparent;
}
.align-right{
  text-align:right;
}
.overlay{
  display:none;
  position:fixed;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background-color:#000;
  opacity:.5;
  z-index:20;
}
#overlay-1{
	z-index: 100;
}
#line1 {
  background-color: #f22194;
}
#line2 {
  background-color: #30c7f2;
}
#line3 {
  background-color: #4fd929;
}
#line4 {
  background-color: #f0cc37;
}
#line5 {
  background-color: #f2522e;
}
div.line {
  height: 12px;
}
#digikidlogo {
  position: absolute;
  z-index: 150;
  top: 0px;
}
#login-container{
  overflow: hidden;
  /*border: 5px solid #000;*/
  float: left;
  height: 540px;
  width: 950px;
  position: relative;
}
#juich{
  width: 950px;
  height: 540px;
  position:relative;
  z-index:1;
}
.gordijnen{
  position:relative;
  z-index: 5;
}
.gordijn{
  width:0;
  position:absolute;
  z-index:5;
  top:0;
  height:540px;
}
#gordijn-links{
  left: 0;
}
#gordijn-rechts{
  left: 950px;
}
#kisten{
  position:relative;
  z-index:4;
}
.kist{
  width: 950px;
  position: absolute;
  z-index: 4;
}
#kist-upper{
  top: -300px;
}
#kist-lower{
  top: 600px;
}
.door{
  position: absolute;
  width: 480px;
  height:540px;
  z-index: 3;
  top: 0;
}
#door-left{
  left: -480px;
}
#door-right{
  left: 950px;
}
#log-in-1, #log-in-2, #log-in-kind{
  position:absolute;
  z-index: 6;
  background-color: #f0cc37;
  border: 5px solid #f22194;
  border-radius: 15px;;
  width: 600px;
  top: -500px;
  left: 50%;
  margin-left: -300px;
  padding: 10px;;
  box-shadow: 0 0 30px #000000;
}
h2{
  font-size: 2.2em;
  color: #111111;  /*  #f22194;*/
  display: block;
  text-align:center;
  font-weight: bold;
}
h3{
  font-size: 2em;
  color: #222222;/* #f22194;*/
  display: block;
  text-align:center;
  font-weight: bold;
}
#log-in-1 input, #log-in-kind input{
  font-size: 2em;
  width:400px;
  border: 5px solid #f22194;
  border-radius: 10px;
  padding: 2px 5px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
 #secretword input{
  font-size: 2em;
  background-color: #b5b5b5;
  width:400px;
  border: 3px solid #285dad;
  border-radius: 10px;
  padding: 2px 5px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  
}
#secretword{
    position:absolute;
    display:none;
    z-index: 220;
    background-color: #288bad;
    border: 3px solid #285dad;
    border-radius: 15px;;
    width: 600px;
    /* top: 70px; */
    bottom:-700px;
    left: 50%;
    margin-left: -300px;
    padding: 10px;
    box-shadow: 0 0 30px #000000;
}
.org-group{
	float:left;
	padding: 25px 10px;
	border: 3px solid #f22094;
	margin-right: 10px;
	border-radius: 50%;
	font-size: 1.5em;
	background-color: #4ed928;
	cursor: pointer;
}
.org-group:hover{
	background-color: #f22094;
	border-color:#4ed928;
	color:#fff
}
#group-holder-start{
	float: left;
	padding: 10px;
	width: 574px;
	border-radius: 15px;
	margin-top: 20px;
	border: 3px solid #f22094;
	background-color: #30c7f2;
}
#group-checker{
	display: none;
}
button{
display: block;
margin-left: auto;
margin-right: auto;
background-color: #4fd929;
border: 3px solid #f22194;
padding: 5px 45px;
font-weight: bold;
font-size: 2em;
border-radius: 10px;
box-shadow: 1px 1px 2px #f22d93;
cursor: pointer;
}

#secretword button{
    display: block;
    margin-left: auto;
    margin-right: auto;
    color: #515151;
    background-color: #60bbdb;
    border: 3px solid #285dad;
    padding: 5px 45px;
    font-weight: bold;
    font-size: 2em;
    border-radius: 10px;
    box-shadow: 1px 1px 2px #1c637c;
    cursor: pointer;
}
button:active{
  box-shadow: 0px 0px 0px #868680;
}
button.but-stop{  
   position: absolute;
    top: 5px;
    left:760px;
    z-index: 150;
    background-color: tomato;
    border-color: gold;
}
ul{
    list-style:none;
}
#toetslings{
    display:none;
    position:absolute;
    top:0;
    left:0;
    z-index:45;
}
#toetslings h2{
  margin-top:30px;
  background-color:#30c7f2;
}
#klikopnaam{
    margin-top:30px;
    background-color:#30c7f2;
    width: 505px;
    text-align:right;
    padding-right: 30px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    font-size:2em;
}
#toetslings li{
    float:left;
    border:3px solid #f22194;
    padding:2px 5px;
    margin:5px;
    width:198px;
    text-align:center;
    font-size:1.2em;
    font-weight:bold;
    border-radius:10px;
    background-color: #ebebeb; /*   #4fd929;*/
/*    opacity:.6;*/
    cursor:pointer;
}
#toetslings li:hover{
    /*opacity:1;*/
        background-color: #4fd929;

}
#check-name{
  position:absolute;
  z-index:45;
  top:5px;
  left:5px;
  width:0;
  height:0;
  display:none;
/*  border: 2px solid #f22194;
  border-radius: 15px;*/
  /*background-color: #f0cc37;*/
}
#check-name h2, #pass-pics h2{
  margin: 20px 50px;
  border: 5px solid #f22194;
  border-radius: 15px;
  background-color: #f0cc37;
}
#check-name button{
  display: inline-block;
  margin-top: 50px;
  margin-left: 200px;
}
#check-name-container{
  display:none;
}
#pass-pics{
  display:none;
  position: absolute;
  top: 10px;
  left: 30px;
  z-index: 150;
}
#pass-pics li{
  float: left;
  margin: 5px;
  padding: 0;
  line-height:0;
  border-radius: 10px;
}
#pass-pics img{
  border-radius: 10px;
  border: 10px solid #f22194;
  opacity: .8;
  cursor: pointer;
  width: 75px;
  height: 75px;;
}
#pass-pics img:hover{
  opacity: 1;
}

#som-choice{
  position:absolute;
  top:0;
  z-index:500;
}

.timetimer{
  width:160px;
  height: 160px;
  border:1px solid red;
   background-color: #ffffff;
 border-radius:50%;
  background-color: #4fd929;

//  background: -webkit-repeating-radial-gradient(green,yellow 90%, green 10%);
 // background: -o-repeating-radial-gradient(green,yellow 90%, green 10%);
//  background: -moz-repeating-radial-gradient(red 90%, green 10%);
//  background: repeating-radial-gradient(green, yellow 50%, green 50%);
 // background: -webkit-linear-gradient(45deg,red, blue); /* For Safari 5.1 to 6.0 */

 // background: -o-linear-gradient(45deg,red, blue);/*  For Opera 11.1 to 12.0 */
 // background: -moz-linear-gradient(45deg,red, blue); /* For Firefox 3.6 to 15 */
 // background: linear-gradient(45deg,red, blue); /* Standard syntax */
}

svg {
  display: block;
 // margin: 50px auto;
}

#loader {
    fill: #111111
}