form.prompts {padding:0; width:90%; min-width:300px; margin:20px auto;}
form.prompts input.prompt {width:calc(100% - 22px); height:30px; font:normal 16px/40px arial, sans-serif; color:#333; padding:5px 10px; margin:5px 0; border:1px solid #ddd; border-radius:8px;}
form.prompts textarea.prompt {display:block; width:calc(100% - 22px); height:200px; padding:15px 10px; margin:5px 0; font:normal 16px/25px arial, sans-serif; color:#666; overflow:auto; border:1px solid #ddd; border-radius:8px;}

form.prompts div.check {position:relative; width:100%; height:55px; margin:10px 20px;}
form.prompts div.check label {display:block; margin-left:120px; margin-top:-15px; font:normal 16px/20px arial, sans-serif; color:#888; cursor:pointer;}
form.prompts div.check label span.Ja {color:#080;}
form.prompts div.check label span.Nee {color:#f00; display:none;}

form.prompts div.check label:before {content:"Ja\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0Nee"; display:block; width:100px; height:20px; border-radius:5px; border:2px solid #999; font:bold 12px/20px arial, sans-serif; color:#fff; text-align:center; position:absolute; left:0; top:0px; box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
background:linear-gradient(to right, #080 50%, #f00 50%);
} 
form.prompts div.check label:after {content:""; display:block; width:51px; height:20px; background:rgba(0,0,0,0.8); position:absolute; left:51px; top:2px; box-shadow:0 0 10px rgba(0,0,0,0.6); border-radius:0 5px 5px 0;
-webkit-transition:0.5s;
transition:0.5s;
}
form.prompts div.check #callback:checked ~ label:after {left:2px; border-radius:5px 0 0 5px;}
form.prompts div.check #callback:checked ~ label span.Ja {display:none;}
form.prompts div.check #callback:checked ~ label span.Nee {display:inline;}

form.prompts #submit {position:left; width:40%; height:30px; margin:0 60%; background:#B60000; color:#fff; border:0; border-radius:5px; cursor:pointer; font:normal 14px/20px  arial, sans-serif;
-webkit-transition:0.8s;
transition:0.8s;
}

form.prompts *::-webkit-input-placeholder {color:#45a !important; text-overflow: ellipsis;}
form.prompts *:-moz-placeholder {color:#45a !important; text-overflow: ellipsis;}
form.prompts *::-moz-placeholder {color:#45a !important; text-overflow: ellipsis;}
form.prompts *:-ms-input-placeholder {color:#45a !important; text-overflow: ellipsis;}
form.prompts *:input-placeholder {color:#45a !important; text-overflow: ellipsis;}

datalist select option {width:50%; height:50px; border:1px solid #ddd;}

form.prompts *:focus {outline:0;}
form.prompts *:invalid {box-shadow:none; border:0; outline:0;}

form.prompts *:required:invalid, 
form.prompts *:focus:invalid {background:#DAE7F3 url('../gfx/invalid.png') no-repeat right 5px top 5px;} 
form.prompts *:required:valid {background: #DAE7F3 url('../gfx/valid.png') no-repeat right 5px top 5px; color:#080 !important;}

form.prompts *:-moz-ui-invalid {box-shadow: 0 0 3px rgba(0,0,0,0.4); background: #fff url('../gfx/fail.png') no-repeat right 5px top 5px !important;}

form.prompts #name:valid ~ #email:valid ~ #tel:valid ~ #comment:valid ~ #submit {background:#080;}

form.prompts p:before {content:"Als alle velden zijn ingevuld kunt u het formulier verzenden (Het formulier is nog niet volledig ingevuld)"; font:normal 14px/18px  arial, sans-serif; color:#c00;}
form.prompts #name:valid ~ #email:valid ~ #tel:valid ~ #comment:valid ~ p:before {content:"Alle velden ingevuld - formulier compleet"; color:#080;}




section, article {display:block; padding:0; margin:0;}

section {width:100%; max-width:1000px; min-width:320px; height:840px; position:relative; margin:0 auto; background:#eee;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}

/* article {width:49%; height:300px; margin:0 1%; position:absolute; background:url(responsive-layout/content.png);*/

article {width:48%; height:820px; margin:1% 1%; position:absolute; background:#fff;
box-shadow:20px 20px 20px -15px rgba(90,0,0,0.6);
-webkit-transition:0.5s;
-moz-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}


article img.acusense {display:block; margin:0px 10px 20px 20px; float:left; border:0px solid #ddd; height:100px;
box-shadow:0 15px 10px -15px rgba(0,0,0,0.6);
}
article img.adres {display:block; margin:10px auto; border:0px solid #ddd; width:60%;
box-shadow:0 15px 10px -15px rgba(0,0,0,0.6);
}
article h1.art {font:normal 18px/24px 'Ubuntu Condensed', arial, sans-serif; color:#7aaa7f; margin:0; padding:5px 15px 0 20px;}
article h2.art {padding:0 20px; margin:10px; font: normal 18px/22px 'texgyreadventorregular', 'lucida sans', arial, sans-serif; color:#c60;}
article h3 {font:normal 20px/30px 'Ubuntu Condensed', arial, sans-serif; color:#c00; margin:0; padding:0;}
article p {display:block; clear:left; padding:0 10px; margin:10px 0px 10px 20px; font:normal 14px/16px 'Ubuntu', arial, sans-serif;}
article p.titel {display:block; padding:0 10px; margin:0px 10px 10px 20px; font:normal 11px/12px 'Ubuntu', arial, sans-serif;}
article p.right {display:block; clear:left; text-align:right; padding:0 20px; font:normal 16px/22px 'Ubuntu', arial, sans-serif;}
article p.backwards {display:block; clear:left; padding:0 20px; margin:10px 10px 10px 30px; font:normal 14px/16px 'Ubuntu', arial, sans-serif; unicode-bidi:bidi-override; direction: rtl;}
article p.info {color:#c00; margin:10px 10px 10px 10px;}
/* article p a {font:normal 14px/16px 'Ubuntu', arial, sans-serif; color:#fff; padding:5px 10px; background:#ccc; text-decoration:none; border-radius:5px; margin:10px 10px 10px 10px;} */
article p a {font:normal 14px/16px 'Ubuntu', arial, sans-serif; color:#fff; padding:5px 10px; }
article p.betalen {display:block; margin:10px 10px 10px 60px; clear:left; padding:0 20px; font:normal 12px/14px 'Ubuntu', arial, sans-serif;}

article:nth-of-type(1) {left:0; top:0px; background:#fff;
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;
}
article:nth-of-type(2) {left:50%; top:0px; background:#fff;
-webkit-transition-delay:0.4s;
-moz-transition-delay:0.4s;
-o-transition-delay:0.4s;
transition-delay:0.4s;
}


@media only screen and (max-width:1024px) {
section {height:1600px;}

article {width:48%;}
article:nth-of-type(1) {left:0; top:10px;}
article:nth-of-type(2) {left:50%; top:10px;}
}

@media only screen and (max-width:1000px) and (orientation:portrait) {
section {height:1680px;}

article {width:98%;}
article:nth-of-type(1) {left:0%; top:10px;}
article:nth-of-type(2) {left:0%; top:840px;}
}

@media only screen and (max-width:480px) {
section {height:1650px;}

article {width:98%;}
article:nth-of-type(1) {left:0%; top:0px;}
article:nth-of-type(2) {left:0%; top:820px;}
}