@charset "utf-8";
/* CSS Document */
html {
	padding:0;
	margin:0; 
	min-height:100%;
}
* { box-sizing:border-box }

body {
	color:#000;
	font:18px/30px 'Text',Geneva, 'Trebuchet ms', Arial, Helvetica, sans-serif;
	padding:00px;
	margin:00px;
}

#container1 {
	position:relative;
	z-index:2;
	padding:60px;
	min-width:540px;
	width:100%;
	max-width:650px;
	margin:0 auto;
	
}
#container2 {
	background: rgba(255,255,255,0.6);
	backdrop-filter: blur(3px);
	position:relative;
	z-index:2;
	width:100%;
	box-shadow: 0 0 50px rgba(0,0,0,.2);
	border-radius:15px;
}

@font-face {
  font-family: 'Title';
  src: url('fonts/Shrikhand-Regular.ttf')  format('truetype'); /* Safari, Android, iOS */
  font-weight: 100;
}

@font-face {
  font-family: 'Text';
  src: url('fonts/OpenSans-Regular.ttf')  format('truetype'); /* Safari, Android, iOS */
  font-weight: 100;
}

h1 {
	font:normal 42px 'Title', Geneva, Arial, Helvetica, sans-serif;
	color:#30876e;	
	margin:0;
	padding:0;
	padding-top:0.5em
}
h2 {
	font:normal 24px 'Title', Geneva, Arial, Helvetica, sans-serif;
	color:#cc1159;	
	margin:0 0 20px 0;
	padding:0;
}
#header-img {
	margin-top:3px;
	margin-bottom:10px;
}
#footer-img {
	margin-top:0px;
	margin-bottom:-5px;
}
#submit-btn {
	padding:10px 50px;
	margin:10px 0;
	background: #9d51a0;
	border:1px solid #000;
	border-radius:4px;
	color:white;
	display:inline-block;
	box-shadow:0 0 2px rgba(0,0,0,.4);
	background: #d7326f; /* Old browsers */
	background: linear-gradient(to bottom,  #d7326f 0%,#f23a7e 90%); /* W3C */
	font-weight: bold;
}
#submit-btn:hover
{
	background-position: 0 -43px;
	box-shadow:0 0 6px rgba(0,0,0,.4);
}
.login
{
	background:#FFF;
	border-radius:15px;
	padding:20px 20px 0 20px;
	border:1px solid #F0F0F0;
}
#error {
	background:#f23a7e;
	color:#FFF;
	margin-bottom:0.5em;
	border-radius:5px;
	text-align:center;
	font-weight:bold;
}
.warn {
	background:#0c9;
	color:#FFF;
	padding:15px;
	border-radius:5px;
}
.input { 
	width:100%;
	padding:9px;
	box-sizing:border-box;
	font-size:35px;
	font-style:italic;
	color:#666
}
select, option {
	padding:15px;
	width:100%;
}

.status1, .status2 {
	text-decoration:line-through;
}

.icon { 
	font-size:50px;
	display: none;
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
	z-index:1
}

.kado a {	
	width:91px;
	height:99px;
	overflow:hidden;
	display:block;
	outline:none;
	margin-top:30px;
	margin-left:320px;
	position:absolute;
	right:45px;
}
.kado img {
	width:91px;
	height:99px;
    transition: transform 0.1s ease-out 0s;
}
.kado:not(.s3) a:hover img {
	transform: scale(0.9, 0.9);
    transform-origin: center center;
}

.kado.s3 img {
	filter: grayscale(1);
	opacity: 0.5;
}

.kado.s3 a {
	pointer-events:none;
}

.kado.s0 a:hover .icon-yep,
.kado.s1 a:not(:hover) .icon-yep {
	display:inline;
}

.kado.s1 a:hover .icon-nope,
.kado.s2 a:not(:hover) .icon-nope {
	display:inline;
}
.kado.s2 a:hover .icon-yep {
	display:inline;
}

.status {
	font-style:italic;
}
.item {
	position:relative;
	clear: both;
	margin: 0 0 1.5em 0;
	background: rgba(255,255,255,0.4);
	border: 3px solid #3281c0;
	padding: 15px 145px 15px 45px;
	border-radius: 10px;
	box-shadow: 0 0 20px #00000030;
}

.item-status-1 {
	border-color: #16c60c;
}

.count {
	font:normal 20px 'Title', Geneva, Arial, Helvetica, sans-serif;
	color: #3281c0;
	position:absolute;
	margin-left:-30px;
}
.content {
	font:normal 24px 'Title', Geneva, Arial, Helvetica, sans-serif;
	color:#44c118;
	margin-bottom:0.25em
}
.content a {
	/** voorbeeld link **/
	font-family: 'Text';
	color: #000;
    background: pink;
    font-size: 16px;
    display: inline-block;
    padding: 5px;
}

#content { 
	padding: 0 20px;
}
.status0 .content {
	color:#c8035a;
	text-shadow: 2px 2px 2px rgba(255,196,186,0.25);
}
.header {
	margin: -20px -35px 20px;
	box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
	border-radius: 15px;
}

.header img {
	visibility: hidden;
}

.spy {
	padding: 4px;
	background: #fff;
	color: #000;
	box-shadow: 0 0 2px #cc1159;
	border-radius: 10px;
	font: bold 14px monospace;
	margin-top:1em;
}

label {
	width:150px;
	display:inline-block;
}

.footer {
	padding:20px 10px;
	color:#3b3729;
	text-align:center;
	font-size:20px;
	border-radius: 5px;
	text-shadow:0 0 10px rgba(255,255,255,.6);
}