@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
.landscape { display: none; }
.portrait { display: block; max-width: 440px; margin-left: auto; margin-right: auto; height: 100%; }
.h100 { height: 100%; }
body { background-color: #4D4D4C; font-family: Poppins; }
.background { background-image: url(/images/lady.jpg);background-position: bottom 20px right;background-repeat: no-repeat; background-size: 300px auto;}
.mijnpura  { float: left; position: relative; display:block; color: white; font-size: 24px; margin-top:10px; height: 40px; }
.qrholder { z-index: 2; text-align: center; position: absolute; top: 50px; background-color: black; height:232px; width: calc(100% - 60px); margin-left: 15px; }
.qrtitel { color: white; font-size: 16px; margin-top:8px; }
.qrimg { width: 52%; margin-left:24%; }
.qrimg img{ width: 100%; height: auto; border: none; }

.witvlak { z-index: 1; float: left; position: relative; display:block; margin-top:138px; width: 100%; height: calc(100% - 204px); background-color: white; }

.inhoud { float: left; position: relative; display:block; width: 100%; min-height: 70px; margin-top: 104px; }
.inhoud p { padding-left:20px; font-size: 22px; }
.stortingveld { margin-left:20px; font-size: 22px; }


.tegoed { float: left; position: relative; display:block; width: 100%; height: 70px; margin-top: 104px; }
.tegoedkop { padding-left: 20px; width: 100%; color: green; font-size: 30px; }
.tegoedtxt { padding-left: 20px; width: 100%; line-height: 1.1; }

.statiegeld { float: left; position: relative; display:block; width: 100%; height: 100px; margin-top: 20px; }
.statiegeldkop { padding-left: 20px; width: 100%; color: orange; font-size: 30px; }
.statiegeldtxt { padding-left: 20px; width: 100%; line-height: 1.1; }

.opwaardeer { text-align: center; float: left; position: relative; display:block; width: 100%; height: 50px; margin-top: 20px; }
.btn { font-weight: 600; font-size: 22px; width: 90%; padding: 10px; border-radius:12px; color: black; background-color: #C4E0F0; border: 2px solid black; }
.blauwvlak { float: left; position: relative; display:block; color: white; width: 100%; height: 100px; background-color: #C4E0F0; font-size: 58px; text-align: center;  }

.login { float: left; position: relative; display:block; width: 100%; height: 110px; margin-top: 104px; }
.registreer { float: left; position: relative; display:block; width: 100%; height: 150px; margin-top: 20px; }

.regform { width: 70%; float: left; padding: 5px; font-size: 16px; margin: 2px; }
.regformsubmit { margin-top:2px; margin-right: 16px; height: 30px; float: right;  }

.error { display: block; color: red; margin-left: 20px; }
.succes { display: block; color: green; margin-left: 20px; }


.fixedfooter { position: absolute; bottom: 0; z-index: 100; height: 50px; width: 100%; background-color: #C4E0F0; 
-webkit-box-shadow: 0px -8px 31px -7px rgba(102,102,102,1);
-moz-box-shadow: 0px -8px 31px -7px rgba(102,102,102,1);
box-shadow: 0px -8px 31px -7px rgba(102,102,102,1);

}
.footerlink { float: left; width: 33%; color: #333; text-align: center; padding: 8px; box-sizing: border-box; }
.footerlink i { font-size: 20px; }
.icon-fixed-width {width: 2em; display: inline-block; text-align: center; }
.footerlink a { color: #333; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; text-decoration: none; }