html, body { height: 100%; }
* { box-sizing: border-box; }
body { margin: 0; line-height: 16px; font-size: 12px; background: #21b5c0; padding: 50px 0 0; font-family: RobotoRegular; }
img { max-width: 100%; }
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
.colors-img { width: 50px; position: absolute; top: 50px; right: 0; }
.logos { max-width: 300px; margin: 0 auto;  }
.login-content { background-image: url(../img/woning-verhuren-in-amsterdam-1.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; padding: 1px 10px; }
.login-content-inner { max-width: 420px; margin: 30px auto; text-align: center; width: 100%; }
.login-content-inner img { max-width: 160px; }
.login-content .form-login-error { background: #21b5c0; border-radius: 10px; color: #fff; overflow: hidden; display: none }
.login-content .form-login-error h3 { background: #cc2424; padding: 10px; margin: 0 0 5px;font-size: 12px; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;}
.login-content .form-login-error p { margin: 0; padding: 10px 0; }
.login-form { background: rgba(0,0,0,0.6); border-radius: 10px; padding: 15px; color: #fff; margin: 20px 0;}
.login-form h2 { font-family: RobotoBold; font-weight: normal; margin: 0; padding: 0 0 15px; }
.login-form .form-group { position: relative;}
.login-form .form-group label.error { position: absolute; top:14px; right: 12px; font-size: 14px; color: #e30613; }

.login-form .form-control { display: block; width: 100%; height: 42px; padding: 6px 12px; font-size: 14px; line-height:30px; color: #fff; background-color: transparent; border: 1px solid #fff; border-radius: 10px; margin: 0 0 15px; }
.login-form .form-control.error { border-color: #e30613; }
.login-form ::-webkit-input-placeholder { color: #fff; }
.login-form :-moz-placeholder { color: #fff; }/* Firefox 18- */
.login-form ::-moz-placeholder { color: #fff; }/* Firefox 19+ */
.login-form .submit { background-color: #21b5c0; display: block; width: 100%; border-radius: 10px; border: 2px solid #21b5c0; }
.login-form .submit input { background: transparent; text-transform: uppercase; color: #fff; display: block; width: 100%; padding: 6px 15px; border: 0; height: 42px; line-height: 26px; font-size: 14px; cursor: pointer; }
/*footer*/
footer { border-top: 25px solid #fec00f; min-height: 100px; padding: 15px; color: #fff; }
footer a { color: #fff; text-decoration: none; }
footer a:hover { color: #fff; text-decoration: underline; }
footer img { float: right; max-width: 150px; margin: 25px 0 0; }
.footer-left { float: left; }
.footer-right { float: right; }
footer .footer-logos-list { margin: 0 -10px 15px; text-align: center; }
footer .footer-logos-list div { margin: 0 15px 10px; display: inline-block; }
footer .footer-logos-list div:first-child { margin-left: 0; }
footer .footer-logos-list div:last-child { margin-right: 0; }
footer .footer-logos-list div a {  display:block;  font-size: 0; line-height: 0; }
footer .footer-logos-list img { margin: 0; max-width: 70px; float: none; max-height: none; }
footer .footer-logos-list img.gvb-logo,
footer .footer-logos-list img.amsterdam-welcome-logo,
footer .footer-logos-list img.stromma-logo,
footer .footer-logos-list img.adam-lookout-logo { height: 25px; width: auto; max-width: none; }

/*//footer*/
@media (min-width: 576px) {
.colors-img { width: 150px; }
.logos { max-width: 100%; }
.login-content { min-height: calc(100% - 150px); }
.login-content-inner img { max-width: 240px;  -webkit-filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.6));  filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.6)); }
.login-form { padding: 40px; }
.login-form h2 { padding: 0 0 20px; }
.login-form .form-control { margin: 0 0 35px; height: 60px; font-size: 16px; line-height:48px; border-width: 2px; border-radius: 15px; }
.login-form .submit { border-radius: 15px;  border-width: 2px; }
.login-form .submit input { padding: 12px 15px;; height: 60px; line-height: 32px; font-size: 16px; }
.login-content .form-login-error { border-radius: 15px; }
.login-form .form-group label.error { top:22px; font-size: 16px; }
footer { padding: 25px 60px; }

}
@media (min-width: 768px) {
.login-content { background-position: center 0; padding: 1px 50px; min-height: calc(100% - 170px); }
/*footer*/
footer .footer-logos-list { display: flex;  display: -webkit-flex; margin: 0 -10px 15px; text-align: left;  }
footer .footer-logos-list div { align-self: center; margin: 0 15px;}
footer .footer-logos-list img { margin: 0; max-width: 100px; float: none; max-height: 75px; }
}
@media (min-width: 992px) {
footer .footer-logos-list img { max-width: 150px; }
footer .footer-logos-list img.gvb-logo,
footer .footer-logos-list img.amsterdam-welcome-logo,
footer .footer-logos-list img.stromma-logo,
footer .footer-logos-list img.adam-lookout-logo { height: 40px; }
}
@media (min-width: 1200px) {
.login-content { background-position: 0 0; background-size: cover; background-position: center center;  }
}
@media (min-height: 557px) { 
    .login-content { display: flex; display: -webkit-flex; display: -ms-flexbox; -ms-flex-wrap: wrap; align-items: center;}
}