body{
    margin: 0px;
    font-family: 'Comfortaa', cursive;
    text-align: center;
}

#columns {
	column-width: 340px;
	column-gap: 15px;
  	width: 90%;
	max-width: 1100px;
	margin: 50px auto;
}


.pointer {cursor: pointer;}

.container {
    width:95%;
    display: flex;
    flex-wrap: wrap;
    margin-left: 10px;
}

.box1 {
    display: inline-block;
    width: 320px;
	margin-left:auto;
	margin-right:auto;
    margin-top: 5px;
	margin-bottom: 5px;
    padding: 10px;
    border-radius: 25px;
    border:1px solid #E6E6E6;
    box-shadow: 5px 5px 5px #aaaaaa;
    background: #fff;
}

.box2 {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 0px;
    padding: 0px ;
    border:0px;	
}  


.demo {
	background:#ffe9a8;
    padding:10px;
	margin-bottom:10px;
}

.section {
    margin-bottom: 15px;
}

.highlight {
    background: #ADD8E6;
    padding: 10px;
    border-radius: 10px;
}

.justify {
    text-align:justify
    padding: 10px;
}

.box20 {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0px;
	border:1px solid #E6E6E6;
	border-radius: 25px;
	box-shadow: 5px 5px 5px #aaaaaa;
    background: #fff;
} 

.box3 {
    display: inline-block;
    width: 300px;
    margin: 0 auto;
    margin-top: 0px;
    margin-bottom: 10px;
    padding: 0px;
    border:1px solid #E6E6E6;
    position: fixed;
    top: 10px; 
    right: 10px;
    background-color: #F9F9F9;
    box-shadow: 5px 5px 5px #aaaaaa;
}

.box4 {
    display: inline-block;
    width: 250px;
    margin: 0 auto;
    margin-top: 0px;
    margin-bottom: 10px;
    padding: 0px;
    border:1px solid #E6E6E6;
    background-color: #F9F9F9;
}

.fout {
    color:#FF0000;
}

input[type="text"], input[type="password"]{
    outline:none;
    padding:10px;
    display:block;
    width:300px;
    border-radius: 5px;
    border:1px solid #eee;
    margin:20px auto;
}
        
input[type="submit"]{
    padding:10px;
    color:#fff;
    background: #0098cb;
    margin-top: 0px;
    border-radius: 5px;
    border:0px;
    margin:10px auto;
    cursor: pointer;
    width:280px;
}

.kar input[type="text"]{
    width:40px;
	margin:0px auto;
	padding: 5px;
}

.kar input[type="submit"]{
    width:auto;
	margin:0px auto;
	padding: 5px;
}

.kar {	display: inline-block;
}
		

.box1 input[type="submit"]{
    
}

.box3 input, .box4 input[type="submit"] {
    
}

input[type="submit"]:hover{
    background:#00b8eb;
}

input[type="number"]{
    outline:none;
    background:#FFFFFF;
    color:#000;
}

a:hover{
    color:#00b8eb;
	text-decoration: underline;
}

a { 
    outline: none;
	text-decoration: none;
}

table, th, td{
    border:1px solid #eee;
    padding:5px;
    border-spacing:0;
}

td{
    height: 25
}

h1 {
    color: #000;  
}

h4 {
    color: #0098cb;  
}

h3 {
  text-decoration: underline;
  font-weight: bold;
}	

h5 {
    text-align: left;
}

ul {
    list-style: none;
    text-align: left;
}

/**li a{
    color: #0098cb;
    text-decoration: none;    
}
**/
.blok {
    background-color: #F7F7F7;
    text-align: center;
    height: 30px;
    border: 1px solid #eee;
    padding: 0px;
    margin: 0px;
    }
    
.menu {
  
    margin: 10px;
    padding: 0px;
    /**width:100%;**/
    background-color: #FFF;
    text-align: center;
    list-style: none;
    font-weight: bold;
}

.menu li a{
    text-decoration: none;
    display: block;
    border: 0px;
}

.menu li a:hover{
    background-color: #eee;
}

.tabel {
    width: auto;
}


.gluten {
    background-color: #ff0000;
}

.gluten a:hover{
    color: #ff0000;
}
    
.melk {
    background-color: #00ff00;
}    
   
.melk a:hover{
    color: #00ff00;
}
 
.FT {
    background-color: #ffff00;
}    
   
.FT a:hover{
    color: #ffff00;
}   
    
.veggie {
    background-color: #5882FA;
}    
    
.veggie a:hover{
    color: #5882FA;
}
    
.products {
	display: block;
        text-align: center;
	border: 1px solid #ededed;
	padding: 0px;
	background-color: #E7E7E7;
	margin: 0px;
        font-weight: bold;
}

.products li{
        height: 30px;
}


.opm {
    font-size:12px;
}

/** -------------------------------------------**/
/** 	              footer                   **/
/**--------------------------------------------**/
#footer {
	
	width: 100%; 
	background: #545454;
	color: #cccccc;
	font-style: italic;
	padding: 3em 0;
	font-size: 18px;
	line-height: 24px; 
	overflow: hidden;
}

#footer .project a {
        color: #ffffff;
        text-decoration: none;
	outline: none;
}
#footer .project a:hover {
        color: #8182b4;
        text-decoration: none;
	outline: none;
}
#footer h1.logo {
	margin: 0;  font-size: 100%;
	float: left;
	margin-left: -1.2%
}
#footer h1.logo img { float: right; max-width: 100%; }

#footer .group { max-width: 1200px; }
#footer .project { 
	width: 80%;
	height: 85px; 
	margin: 0 auto; 
	display: block; 
}
#footer .project p { width: 385px; color: #ccc; float: left; margin: 0 0 0 30px; display: block; }
#footer .project p a {font-size: 16px; }

.copyright { width: 370px; height: 2em; margin: 20px auto; font-size: 14px; }
.copyright span { min-width: 80px; margin-top: 4px; float: left; display: inline-block; }
.copyright span:last-child { margin-left: 4px; }
/** -------------------------------------------**/
/** 	       media queries                   **/
/**--------------------------------------------**/
/* ---- max-width 1200px ---- */
@media screen and (max-width: 1200px ) {
		#footer .group { width: 94.791667%; /* 728px/768px */ }
}

/* ---- max-width 1024px ---- */
@media screen and (max-width: 1024px) { 
	#footer .project p { width: 345px; margin-left: 21px; }
}

/*.box2 {
    width: 640px;
} */
/* ---- max-width 768px ---- */
@media screen and (max-width: 768px ){
	.project { width: 94.791667%; /* 728px/768px */ }
	#footer .project p { width: 41.40625%; }


/* .box2 {
    width: 320px;
}*/
}

/* ---- max-width 600px ---- */
@media screen and (max-width: 600px) {
	#footer .project p { width: 100%; }	
	#footer h1.logo { float: none; margin: 0 auto; text-align: center; }
	.project { width: 100%; }
	.project div { width: inherit; float: none; border-bottom: 1px solid #ccc; margin-bottom: 24px;}
	#footer .group { width: 90.833333%; /* 545px/600px */ }
	#footer h1.logo img {float: none;}
	#footer .project { height: 6.0625em; }
	#footer .project p { margin: 12px 0 0 0; }
        .copyright { margin-top: 1.25em; }
  	
}

/* ---- max-width 400px ---- */
@media screen and (max-width: 400px) { 
	.copyright { width: 70%; /* 280px/400px */ margin-top: 1.25em; text-align: left; }
	#footer h1.logo { float: none; margin: 12px auto; width: 100%; text-align: center; } 
	#footer h1.logo img { width: 62%; /* 198px/320px */ margin: 0 auto; float: none; }
}

/* ---- max-width 320px ---- */
@media screen and (max-width: 320px) {
	.copyright { width: 85%; /* 280px/320px */ margin-top: 1.25em; text-align: left; }
        .copyright span:last-child { width: 100%; float: none; margin: 0 auto; }
}