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

section {width:100%; max-width:1200px; min-width:320px; height:1000px; 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:480px; 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.balanced {display:block; margin:10px 10px 20px 5px; float:right; border:0px solid #ddd; height:180px;
box-shadow:0 15px 10px -15px rgba(0,0,0,0.6);
}
article img.indicaties {display:block; margin:-120px 10px 20px 5px; float:right; border:0px solid #ddd; height:200px;
box-shadow:0 15px 10px -15px rgba(0,0,0,0.6);
}
article img.behandeling {display:block; margin:35px 10px 20px 5px; float:left; border:0px solid #ddd; height:140px;
box-shadow:0 15px 10px -15px rgba(0,0,0,0.6);
}
article img.worlds {display:block; margin:-15px 10px 20px 5px; float:right; border:0px solid #ddd; height:120px;
box-shadow:0 15px 10px -15px rgba(0,0,0,0.6);
}

article h1.art {font:normal 22px/26px 'Ubuntu Condensed', arial, sans-serif; color:#7aaa7f; margin:0; padding:5px 15px 0 20px;}
article h3.art {font:normal 20px/30px 'Ubuntu Condensed', arial, sans-serif; color:#c00; margin:0; padding:0;}
article p.art {display:block; padding:0px 15px; margin:10px 10px; font: normal 14px/18px 'texgyreadventorregular', 'lucida sans', arial, sans-serif; color:#333;}

article ul.pain {position:relative; font-weight:bold; color:#333; left:20px; top:0; z-index:100; overflow:hidden; }
article li.pain {padding:0px 15px; font: normal 14px/20px 'texgyreadventorregular', 'lucida sans', arial, sans-serif; font-style:normal; color:#333; text-align:left; list-style-type: square;}


article:nth-of-type(1) {left:0; top:0px; 
-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;
-webkit-transition-delay:0.4s;
-moz-transition-delay:0.4s;
-o-transition-delay:0.4s;
transition-delay:0.4s;
}
article:nth-of-type(3) {left:0%; top:500px;
-webkit-transition-delay:0.3s;
-moz-transition-delay:0.3s;
-o-transition-delay:0.3s;
transition-delay:0.3s;
}
article:nth-of-type(4) {left:50%; top:500px;
-webkit-transition-delay:0.2s;
-moz-transition-delay:0.2s;
-o-transition-delay:0.2s;
transition-delay:0.2s;
}

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

article {width:48%;}
article:nth-of-type(1) {left:0; top:0px; height:500px;}
article:nth-of-type(2) {left:50%; top:0px; height:500px;}
article:nth-of-type(3) {left:0%; top:510px; height:520px;}
article:nth-of-type(4) {left:50%; top:510px; height:520px;}
}

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

article {width:98%;}
article:nth-of-type(1) {left:0%; top:0px; height:450px;}
article:nth-of-type(2) {left:0%; top:460px; height:480px;}
article:nth-of-type(3) {left:0%; top:950px; height:510px; }
article:nth-of-type(4) {left:0%; top:1470px; height:520px;}
}

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

article {width:98%;}
article:nth-of-type(1) {left:0%; top:0px; height:710px;}
article:nth-of-type(2) {left:0%; top:720px; height:600px;}
article:nth-of-type(3) {left:0%; top:1330px; height:720px;}
article:nth-of-type(4) {left:0%; top:2060px; height:750px;}

}