#userbox { width: 26%; display: table-cell; vertical-align: bottom; }

.userboxheader { height: 68px; background: url('/public/images/bg_userbox.png') no-repeat bottom left; padding: 0 15px; }
.userboxcontent { background: #82cd2c; border-left: 1px solid #afff0d; border-right: 1px solid #afff0d; height: 257px; padding: 10px 15px 0 15px; }

.userboxheader h3 { font-family: NotoSans; font-size: 24px; margin: 0; padding-top: 30px; }

.userboxcontent label { padding-left: 10px; }
.userboxcontent .btn:hover { color: #333333; outline: 0 none; background: #ffffff; }
.userboxcontent .btn:focus { color: #333333; outline: 0 none; background: #ffffff; }
.userboxcontent input[type="text"] { margin-top: 5px; }
.userboxcontent input[type="password"] { margin-top: 5px; }
.userboxcontent a { color: #333333; }
.userboxcontent a:hover { color: #882600; }
.userboxcontent a:focus { color: #882600; }



@media screen and (max-width: 768px) {
    
    #userbox { width: 94%; padding: 0 3% 30px 3%; display: block; background: #82cd2c; border-top: 5px solid #afff0d; border-bottom: 5px solid #afff0d; }
    
    .userboxheader { height: auto; background: none; padding: 0; }
    .userboxcontent { border: none; height: auto; padding: 10px 0 0 0; }
    
    .userboxheader h3 { padding-top: 10px; }
    
}