@charset "utf-8";
/* CSS Document */

/* css code voor smartphones in portrait mode, maximale breedte 479px */
@media only screen and (max-width: 479px) {
body {font-size:110%;}
#header {min-height:10px;padding:20px;box-sizing:border-box;}
h1 {margin:20px 0 50px;font-size:26px;line-height:1.3em;}

#images-header img {max-width:100%;margin:0 0 20px 0;border:5px solid #fff;box-sizing:border-box;}
#images-header img.left {left:0;box-sizing:border-box;}
#images-header img.center {top:0;box-sizing:border-box;}
#images-header img.right {left:0;box-sizing:border-box;}


h2 {margin:0 0 10px 0;font-size:22px;}
.one, .two, .three {padding:50px 20px;box-sizing:border-box;}
img.left-text, img.right-text {max-width:100%;height:auto;margin:0 0 10px 0;}
.button {display:block;margin:20px 0;text-align:center;}
}

/* css code voor devices breedte website is 480 tot 600 pixels en hoogte is 320 tot 400 */
@media only screen and (min-width: 480px) and (max-width: 600px) and (min-height: 250px) and (max-height: 400px)  {
h1 {margin:20px 0 50px;font-size:26px;line-height:1.3em;}

#images-header {text-align:center;}
#images-header img {max-width:29.33%;height:auto !important;margin:0;border:5px solid #fff;-moz-border-radius:10px;border-radius:10px;}
#images-header img.left {position:relative;z-index:100;left:20px;}
#images-header img.center {position:relative;z-index:200;top:-20px;}
#images-header img.right {position:relative;z-index:100;left:-20px;}

h2 {margin:0 0 10px 0;font-size:22px;}
.one, .two, .three {padding:50px 20px;box-sizing:border-box;}
img.left-text, img.right-text {max-width:100%;height:auto;margin:0 0 10px 0;}
.button {display:block;margin:20px 0;text-align:center;}
}

/* css code voor smartphones in landscape mode, breedte website is 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
h1 {margin:20px 0 50px;font-size:26px;line-height:1.3em;}

h2 {margin:0 0 10px 0;font-size:22px;}
.one, .two, .three {padding:50px 20px;box-sizing:border-box;}
img.left-text, img.right-text {max-width:100%;height:auto;margin:0 0 10px 0;}
.button {display:block;margin:20px 0;text-align:center;}

}

/* css code voor devices breedte website is 768 tot 980 pixels en hoogte is 450 tot 650 */
@media only screen and (min-width: 768px) and (max-width: 980px) and (min-height: 450px) and (max-height: 650px)  {

}

/* css code voor tablets in portrait mode, breedte website is 768 pixels */
@media only screen and (min-width: 768px) and (max-width: 980px) {
body {font-size:105%;}
h1 {margin:20px 0 50px;font-size:32px;line-height:1.3em;}
h2 {margin:0 0 10px 0;font-size:26px;}
.one, .two {padding:50px 20px;}
.three {padding:50px 20px;}
img.left-text {max-width:50%;height:auto !important;margin:0 30px 0 0;}
img.right-text {max-width:50%;height:auto !important;margin:0 0 0 30px;}
.button {display:block;margin:20px 0;text-align:center;}
}

/* css code voor tablets in landscape mode, breedte website is 1024 pixels */
@media only screen and (min-width: 981px) and (max-width: 1050px) {
body {font-size:105%;}
h1 {margin:20px 0 50px;font-size:32px;line-height:1.3em;}
h2 {margin:0 0 10px 0;font-size:26px;}
.one, .two {padding:50px 20px;}
.three {padding:50px 20px;}
img.left-text {max-width:50%;height:auto !important;margin:0 30px 0 0;}
img.right-text {max-width:50%;height:auto !important;margin:0 0 0 30px;}
.button {display:block;margin:50px 0 0 0;text-align:center;}
}
