* {

    margin: 0;

    padding: 0;

    font-family: Arial;

}



header {

    background-image: url('/images/bni-bg.jpg');

    background-repeat: no-repeat;

    width: 100%;

    min-height: 433px;

    margin: auto;

    background-position: top center;

    margin-top: 50px;

    border-top: 3px solid #750f0e;

}



header h1, header h2 {

    font-size: 30px;

    font-weight: bold;

    color: #CF2030;

    position: absolute;

    left: calc(50% - 198px);

    margin-top: 48px;

}



header h2 {

    font-size: 16px;

    font-style: italic;

    margin-top: 80px;

}



.container {

    max-width: 1200px;

    margin: 0px auto;

    position: relative;

}



.logoContainer {

    position: absolute;

    right: 160px;

    top: 15px;

    text-align: right;

    text-transform: uppercase;

    font-size: 10px;

}



.logoContainer h3 {

    font-weight: lighter;

    color: #CF2030;

    margin-top: 25px;

}



footer {

    background-image: url('/images/bni-bgfooter.png');

    background-position: center;

    background-repeat: no-repeat;

    text-align: center;

}



.social {

    display: inline-block;

    margin: 5px;

}



footer .container {top: 90px;}



footer {

    min-height: 186px;

}



footer p {

    /* display: inline-block; */

    /* position: absolute; */

    /* right: 150px; */

    /* top: 18px; */

    font-size: 18px;

    color: black;

    position: relative;

    display: block;

    margin-top: 15px;

}



.stage {

    /* display: inline-block;

    padding: 15px;

    opacity: 0;

    margin-left: 50%;

    visibility: hidden; */

    padding: 15px;

    position: absolute;

    top: 0px;

    left: 50%;

    width: 100%;

    opacity: 0;

    visibility: hidden;

    transition: all .3s ease-in-out;

}



.stage1 {

    visibility: visible;

}



.content {

    text-align: center;

    margin-top: -210px;

    margin-bottom: 30px;

}



.stage h4 {

    font-size: 21px;

    color: #CF2030;

    margin-bottom: 15px;

}



.stage>p {

    margin-bottom: 15px;

}



input, button, select {

    padding: 5px 15px;

    color: #4b4b4b;

    border: 1px solid #ccc;

    border-radius: 7.5px;

    background: transparent;

}



.stage1 input[type=password] {

    margin-right: 10px;

    text-align: center;

}



button {

    cursor: pointer;

}



button:hover, button:focus, input:hover, input:focus, select:hover, select:focus {

    background: #f7f7f7;

}



button, input, select {

    transition: all .3s ease-in-out;

    outline: none;

}



.content .container {

    height: 350px;

    overflow: hidden;

}



.err {

    margin: 5px 0px 10px 0px;

    color: #CF2030;

    border-left: 3px solid #CF2030;

    display: inline-block;

    padding: 5px 10px;

    border-right: 3px solid #CF2030;

}



.err .errTitle {

    margin-bottom: 5px;

    font-size: 18px;

}



.suc {

    color: #4b4b4b !important;

    border-color: #53bf53 !important;

}



.err a {

    margin-top: 30px;

    display: inline-block;

    color: #4b4b4b;

    text-decoration: none;

    border-bottom: 1px solid #ccc;

    font-style: italic;

}



.logoContainer {

    right: auto;

    left: calc(50% + 283px);

}



@media only screen and (max-width: 940px) {

    .logoContainer {

        left: auto;

        right: 30px;

    }

}