html
{
    background: url("\\Images\\img11.jpg") no-repeat center center fixed;
    background: url("/Images/img11.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.body
{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.42857143;
}

.loginForm
{
    height: 7%;
    margin-left: 71%;
    margin-right: 7%;
    margin-top: 2%;
}

.bk
{
    position: fixed;
    background: url("\\Images\\bk.png");
    background-image: url("/Images/bk.png");
    background-repeat: repeat-x;
    width: 100%;
    height: 100%;
    z-index: -1;
    margin-top: 371px;
}

@media (max-width: 1200px)
{
    .loginForm
    {
        height: 7%;
        margin-left: 63%;
        margin-right: 7%;
        margin-top: 7%;
    }

    .bk
    {
        position: fixed;
        background: url("\\Images\\bk.png");
        background-image: url("/Images/bk.png");
        background-repeat: repeat-x;
        width: 100%;
        height: 100%;
        z-index: -1;
        margin-top: 125px;
    }

    #userNameLabel, #passwordLabel
    {
        margin: 0 0 -7px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 11px;
        line-height: 1.42857143;
    }

    #loginLabel
    {
        font-size: 15px;
        padding-left: 7px;
    }

    input[type=text]
    {
        font-size: 11px;
        margin-top: 10px;
        text-shadow: 1px 1px 1px #fff;
        border: 1px solid rgba(144, 143, 143, 0.2);
        border-radius: 4px;
    }

    input[type=password]
    {
        font-size: 11px;
        margin-top: 10px;
        text-shadow: 1px 1px 1px #fff;
        border: 1px solid rgba(144, 143, 143, 0.2);
        border-radius: 4px;
    }

    input[type=text]:hover
    {
        font-size: 11px;
        margin-top: 10px;
        text-shadow: 1px 1px 1px #fff;
        border: 1px solid rgba(144, 143, 143, 0.2);
        border-radius: 4px;
    }

    input[type=password]:hover
    {
        font-size: 11px;
        margin-top: 10px;
        text-shadow: 1px 1px 1px #fff;
        border: 1px solid rgba(144, 143, 143, 0.2);
        border-radius: 4px;
    }

    input[type=submit]
    {
        width: 91%;
        height: 40px;
        color: #fff;
        background-color: #0BF;
        border: 1px;
        margin-left: 16px;
        margin-top: 17px;
    }
}

@media only screen and (max-width: 960px) , only screen and (max-height: 600px) and (orientation: landscape) /* Galaxy 7 Landscape */
{
    .loginForm
    {
        height: 7%;
        margin-left: 63%;
        margin-right: 7%;
        margin-top: 1%;
    }

    .bk
    {
        position: fixed;
        background: url("\\Images\\bk.png");
        background-image: url("/Images/bk.png");
        background-repeat: repeat-x;
        width: 100%;
        height: 37%;
        z-index: -1;
        margin-top: 178px;
    }
}

@media (max-width: 921px)
{
    .loginForm
    {
        height: 7%;
        margin-left: 67%;
        margin-right: 7%;
        margin-top: 1%;
    }

    #userNameLabel, #passwordLabel
    {
        margin: 0 0 -7px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 11px;
        line-height: 1.42857143;
    }

    #loginLabel
    {
        font-size: 11px;
        padding-left: 7px;
    }

    input[type=text]
    {
        font-size: 7px;
        margin-top: 10px;
        text-shadow: 1px 1px 1px #fff;
        border: 1px solid rgba(144, 143, 143, 0.2);
        border-radius: 4px;
    }

    input[type=password]
    {
        font-size: 7px;
        margin-top: 10px;
        text-shadow: 1px 1px 1px #fff;
        border: 1px solid rgba(144, 143, 143, 0.2);
        border-radius: 4px;
    }

    input[type=text]:hover
    {
        font-size: 7px;
        margin-top: 10px;
        text-shadow: 1px 1px 1px #fff;
        border: 1px solid rgba(144, 143, 143, 0.2);
        border-radius: 4px;
    }

    input[type=password]:hover
    {
        font-size: 7px;
        margin-top: 10px;
        text-shadow: 1px 1px 1px #fff;
        border: 1px solid rgba(144, 143, 143, 0.2);
        border-radius: 4px;
    }

    input[type=submit]
    {
        width: 89%;
        height: 40px;
        color: #fff;
        background-color: #0BF;
        border: 1px;
        margin-left: 16px;
        margin-top: 17px;
    }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active
{
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

p
{
    margin: 0 0 -10px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.42857143;
}

#loginLabel
{
    color: #fff;
    margin-left: 5%;
}

.registrationLabel
{
    height: 7%;
    margin-left: 45%;
    margin-right: 7%;
    margin-top: 17%;
}

#registrationLabel
{
    color: #fff;
    margin-top: 11px;
    margin-left: 106px;
    position: absolute;
}

.loginDetails
{
    /*background-color: #F7F7F7;*/
    height: 226px;
}

.textBox
{
    /*margin-left: 10px;
    height:20px;
    float: right*/
}

.buttons
{
    position: absolute;
    margin-left: 308px;
    margin-top: -49px;
}

.submitButton
{
    width: 93%;
    height: 41px;
    color: #fff;
    /*background-color: #0BF;*/
    background-color: rgba(0, 0, 0, 0.50);
    border-style: solid;
    border-color: rgba(255, 0, 0, 0.55);
    /*border: 1px;*/
    margin-left: 17px;
    /* position: absolute; */
    margin-top: 17px;
}

.submitButton:hover
{
    /* background-color: #00D6FF;
    border: 1px solid #00D6FF;*/
    background-color: #B32727;
    border-color: #FA9279;
    border-style: solid;
    /*border-color: rgba(255, 0, 0, 0.55);*/
}

.textBox:focus
{
    outline: none;
    /*box-shadow: 0px 0px 1px #00D6FF;
    border: 1px solid #00D6FF;*/

}

.textBox:hover
{
    /*box-shadow: 0px 0px 7px #00D6FF;
    -webkit-box-shadow: 0px 1px 7px #00D6FF;*/
    border-radius: 1px;
}

.textBox:focus:hover
{
    outline: none;
    /*box-shadow: 0px 0px 0px #00D6FF;
    -webkit-box-shadow: 0px 1px 1px #00D6FF;
    border: 1px solid #00D6FF;*/

    border-radius: 4px;
}

.textBox
{
    background: #fff;
    border: none;
    outline: none;
    padding: 10px;
    font-size: 17px;
    margin-top: 10px;
    text-shadow: 1px 1px 1px #fff;
    border: 1px solid rgba(144, 143, 143, 0.2);
    border-radius: 4px;
    box-shadow: inset 0 5px 29px rgba(144, 143, 143, 0.2), 0 1px 1px rgba(255, 255, 255, 0.2);
    -webkit-transition: box-shadow .5s ease;
    -moz-transition: box-shadow .5s ease;
    -o-transition: box-shadow .5s ease;
    -ms-transition: box-shadow .5s ease;
    transition: box-shadow .5s ease;
}

.textBox:focus
{
    box-shadow: inset 0 5px 45px rgba(247, 247, 247, 0.2), 0 1px 1px rgba(255, 255, 255, 0.2);
}

.registrationTextBox
{
    background: #fff;
    border: none;
    outline: none;
    padding: 10px;
    font-size: 17px;
    margin-top: 10px;
    text-shadow: 1px 1px 1px #fff;
    border: 1px solid rgba(144, 143, 143, 0.2);
    border-radius: 4px;
    box-shadow: inset 0 5px 29px rgba(144, 143, 143, 0.2), 0 1px 1px rgba(255, 255, 255, 0.2);
    -webkit-transition: box-shadow .5s ease;
    -moz-transition: box-shadow .5s ease;
    -o-transition: box-shadow .5s ease;
    -ms-transition: box-shadow .5s ease;
    transition: box-shadow .5s ease;
}

.registrationTextBox:focus
{
    box-shadow: inset 0 5px 45px rgba(247, 247, 247, 0.2), 0 1px 1px rgba(255, 255, 255, 0.2);
}

#usernameTextBox
{
    margin-left: 15px;
}

#userNameLabel
{
    color: #fff;
}

#registrationUsernameTextBox
{
    margin-left: 15px;
    position: absolute;
}

#registrationUserNameLabel
{
    color: #fff;
    float: left;
    margin-left: 242px;
    padding-top: 5px;
}

#passwordTextBox
{
    margin-left: 15px;
}

#passwordLabel
{
    color: #fff;
}

#registrationPasswordTextBox
{
    float: right;
    position: absolute;
    margin-top: 64px;
    margin-left: 15px;
}

#registrationPasswordLabel
{
    float: left;
    margin-top: 73px;
    margin-left: 261px;
    color: #fff;
    position: fixed;
}

.float-left
{
    position: fixed;
    bottom: 0;
    left: 0;
    margin-left: 50%;
}

#institutionTextBox
{
    margin-top: 117px;
    margin-left: 15px;
    color: gray;
    float: right;
    position: absolute;
    width: 238px;
}

#institutionLabel
{
    float: left;
    margin-top: 127px;
    margin-left: 245px;
    color: #fff;
    position: fixed;
}

#registrationInstitutionTextBox
{
    margin-top: 117px;
    margin-left: 15px;
    color: gray;
    float: right;
    position: absolute;
    width: 238px;
}

#registrationInstitutionLabel
{
    float: left;
    margin-top: 127px;
    margin-left: 245px;
    color: #fff;
    position: fixed;
}

.createAccountButton
{
    width: 117px;
    height: 41px;
    color: #fff;
    background-color: #0FB;
    border: 1px;
    margin-left: 19px;
    margin-top: 17px;
}

.createAccountButton:hover
{
    background-color: #54FFD1;
    border: 1px solid #54FFD1;
}

.sauButton
{
    width: 37px;
    height: 35px;
    color: #939393;
    background-color: #FFF;
    border: 1px;
    margin-left: 119px;
    position: absolute;
    margin-top: 20px;
    z-index: 1;
    border-radius: 63px;
}

.registrationDiv
{
    width: 411px;
    height: 300px;
    background-color: rgb(0, 79, 123);
    margin-top: -270px;
    margin-left: 25%;
    display: none;
}

.registrationForm
{
    margin-top: 51px;
    margin-left: -215px;
    position: absolute;
}

#companyLogo
{
    margin-top: -23px;
}

#logo
{
    margin-top: -5px;
}

@media (max-width: 870px)
{
    .loginForm
    {
        height: 7%;
        margin-left: 63%;
        margin-right: 7%;
        margin-top: 1%;
    }
}

@media (max-width: 821px)
{
    .loginForm
    {
        height: 7%;
        margin-left: 63%;
        margin-right: 7%;
        margin-top: 1%;
    }
}

@media (max-width: 800px)
{
    .loginForm
    {
        height: 7%;
        margin-left: 63%;
        margin-right: 7%;
        margin-top: 1%;
    }
}

@media (max-width: 770px)
{
    .loginForm
    {
        height: 7%;
        margin-left: 63%;
        margin-right: 7%;
        margin-top: 1%;
    }
}

@media (max-width: 750px)
{
    .loginForm
    {
        height: 7%;
        margin-left: 63%;
        margin-right: 7%;
        margin-top: 1%;
    }
}

@media screen and (max-width: 736px) , screen and (max-height: 414px) /*Iphone 6 Plus Landscape*/
{
    .loginForm
    {
        height: 7%;
        margin-left: 63%;
        margin-right: 7%;
        margin-top: 1%;
    }

    .bk
    {
        position: fixed;
        background: url("\\Images\\bk.png");
        background-image: url("/Images/bk.png");
        background-repeat: repeat-x;
        width: 100%;
        height: 40%;
        z-index: -1;
        margin-top: 191px;
    }
}

@media (max-width: 711px)
{
    .loginForm
    {
        height: 7%;
        margin-left: 63%;
        margin-right: 7%;
        margin-top: 1%;
    }

    .bk
    {
        position: fixed;
        background: url("\\Images\\bk.png");
        background-image: url("/Images/bk.png");
        background-repeat: repeat-x;
        width: 100%;
        height: 40%;
        z-index: -1;
        margin-top: 191px;
    }
}

@media screen and (max-width: 690px) , screen and (max-height: 387px) and (orientation: landscape) /* Galaxy 6 Landscape */
{
    .loginForm
    {
        height: 7%;
        margin-left: 63%;
        margin-right: 7%;
        margin-top: 12%;
    }

    .bk
    {
        position: fixed;
        background: url("\\Images\\bk.png");
        background-image: url("/Images/bk.png");
        background-repeat: repeat-x;
        width: 100%;
        height: 51%;
        z-index: -1;
        margin-top: 191px;
    }
}

@media screen and (max-width: 667px) , screen and (max-height: 375px) /* Iphone 6 Landscape */
{
    .loginForm
    {
        height: 7%;
        margin-left: 63%;
        margin-right: 7%;
        margin-top: 1%;
    }

    .bk
    {
        position: fixed;
        background: url("\\Images\\bk.png");
        background-image: url("/Images/bk.png");
        background-repeat: repeat-x;
        width: 100%;
        height: 35%;
        z-index: -1;
        margin-top: 191px;
    }
}

@media (max-width: 660px)
{
    .loginForm
    {
        height: 7%;
        margin-left: 63%;
        margin-right: 7%;
        margin-top: 1%;
    }

    .bk
    {
        position: fixed;
        background: url("\\Images\\bk.png");
        background-image: url("/Images/bk.png");
        background-repeat: repeat-x;
        width: 100%;
        height: 35%;
        z-index: -1;
        margin-top: 191px;
    }
}

@media screen and (max-width: 640px) , screen and (max-height: 360px) and (orientation: landscape) /* Samsung Galaxy S III Landscape */
{
    .loginForm
    {
        margin-left: 385px;
        margin-top: 1%;
    }

    .bk
    {
        position: fixed;
        background: url("\\Images\\bk.png");
        background-image: url("/Images/bk.png");
        background-repeat: repeat-x;
        width: 100%;
        height: 35%;
        z-index: -1;
        margin-top: 191px;
    }
}

@media (max-width: 621px)
{
    .loginForm
    {
        height: 7%;
        margin-left: 63%;
        margin-right: 7%;
        margin-top: 35%;
    }
}

@media screen and (max-width: 600px) , screen and (max-height: 900px) and (orientation: portrait) /* Galaxy 10 Landscape */
{
    .loginForm
    {
        height: 7%;
        margin-left: 63%;
        margin-right: 7%;
        margin-top: 61%;
    }

    .bk
    {
        position: fixed;
        background: url("\\Images\\bk.png");
        background-image: url("/Images/bk.png");
        background-repeat: repeat-x;
        width: 100%;
        height: 25%;
        z-index: -1;
        margin-top: 1px;
    }
}

@media screen and (max-width: 598px) , screen and (max-height: 335px) and (orientation: landscape) /* Galaxy 5 Landscape */
{
    .loginForm
    {
        height: 7%;
        margin-left: 63%;
        margin-right: 7%;
        margin-top: 12%;
    }

    .bk
    {
        position: fixed;
        background: url("\\Images\\bk.png");
        background-image: url("/Images/bk.png");
        background-repeat: repeat-x;
        width: 100%;
        height: 55%;
        z-index: -1;
        margin-top: 11px;
    }
}

@media (max-width: 585px)
{
    .loginForm
    {
        height: 7%;
        margin-left: 63%;
        margin-right: 7%;
        margin-top: 37%;
    }
}

@media only screen and (max-width: 568px) , only screen and (max-height: 320px) and (orientation: landscape) /* Iphone 5 Landscape */
{
    .loginForm
    {
        margin-left: 300px;
        margin-top: 47px;
    }

    .bk
    {
        position: fixed;
        background: url("\\Images\\bk.png");
        background-image: url("/Images/bk.png");
        background-repeat: repeat-x;
        width: 100%;
        height: 63%;
        z-index: -1;
        margin-top: 10px;
    }
}

@media only screen and (max-width: 568px) , only screen and (max-height: 320px) and (orientation: portrait)
{
    .float-left
    {
        position: fixed;
        bottom: 0;
        left: 0;
        margin-left: 30%;
        width: 100%;
    }
}

@media (max-width: 550px)
{
    .loginForm
    {
        height: 7%;
        margin-left: 63%;
        margin-right: 7%;
        margin-top: 40%;
    }
}

@media (max-width: 511px)
{
    .loginForm
    {
        height: 7%;
        margin-left: 60%;
        margin-right: 7%;
        margin-top: 43%;
    }
}

@media (max-width: 480px)
{
    .loginForm
    {
        height: 7%;
        margin-left: 59%;
        margin-right: 7%;
        margin-top: 45%;
    }
}

@media only screen and (max-width: 460px) , only screen and (max-height: 768px) and (orientation: portrait) /*Iphone 6 Plus */
{
    .loginForm
    {
        height: 7%;
        margin-left: 25%;
        margin-right: 7%;
        margin-top: 64%;
    }

    .bk
    {
        position: fixed;
        background: url("\\Images\\bk.png");
        background-image: url("/Images/bk.png");
        background-repeat: repeat-x;
        width: 100%;
        height: 31%;
        z-index: -1;
        margin-top: 1px;
    }
}

@media (max-width: 450px)
{
    .loginForm
    {
        height: 7%;
        margin-left: 55%;
        margin-right: 7%;
        margin-top: 49%;
    }
}

@media (max-width: 419px)
{
    .loginForm
    {
        height: 7%;
        margin-left: 25%;
        margin-right: 7%;
        margin-top: 52%;
    }
}

@media only screen and (max-width: 414px) , only screen and (max-height: 736px) and (orientation: portrait) /*Iphone 6 Plus */
{
    .loginForm
    {
        height: 7%;
        margin-left: 31%;
        margin-right: 7%;
        margin-top: 1%;
    }

    .bk
    {
        position: fixed;
        background: url("\\Images\\bk.png");
        background-image: url("/Images/bk.png");
        background-repeat: repeat-x;
        width: 100%;
        height: 31%;
        z-index: -1;
        margin-top: 211px;
    }

}

@media only screen and (max-width: 414px) , only screen and (max-height: 736px)
{
    .float-left
    {
        position: fixed;
        bottom: 0;
        left: 0;
        margin-left: 15%;
        width: 100%;
    }
}

@media (max-width: 400px)
{
    .loginForm
    {
        height: 7%;
        margin-left: 25%;
        margin-right: 7%;
        margin-top: 1%;
    }

    .bk
    {
        position: fixed;
        background: url("\\Images\\bk.png");
        background-image: url("/Images/bk.png");
        background-repeat: repeat-x;
        width: 100%;
        z-index: -1;
        margin-top: 214px;
    }

    input[type=submit]
    {
        width: 89%;
        height: 31px;
        color: #fff;
        background-color: #0BF;
        border: 1px;
        margin-left: 16px;
        margin-top: 17px;
    }
}

@media only screen and (max-width: 375px) , only screen and (max-height: 627px) and (orientation: portrait) /*Iphone 6 */
{
    .loginForm
    {
        height: 8px;
        margin-left: 57px;
        margin-right: 8px;
        margin-top: 5px;
    }

    .bk
    {
        position: fixed;
        background: url("\\Images\\bk.png");
        background-image: url("/Images/bk.png");
        background-repeat: repeat-x;
        width: 100%;
        z-index: -1;
        margin-top: 214px;
    }

    input[type=submit]
    {
        width: 89%;
        height: 31px;
        color: #fff;
        background-color: #0BF;
        border: 1px;
        margin-left: 16px;
        margin-top: 17px;
    }
}

@media only screen and (max-width: 375px) , only screen and (max-height: 627px)
{
    .float-left
    {
        position: fixed;
        bottom: 0;
        left: 0;
        margin-left: 28%;
        width: 100%;
    }
}

@media only screen and (max-width: 360px) , only screen and (max-height: 640px) and (orientation: portrait) /* Samsung Galaxy S III Landscape */
{
   
}

@media (max-width: 357px)
{
    .loginForm
    {
        height: 7%;
        margin-left: 25%;
        margin-right: 7%;
        margin-top: 1%;
    }
}

@media (max-width: 340px)
{
    .loginForm
    {
        height: 7%;
        margin-left: 25%;
        margin-right: 7%;
        margin-top: 64%;
    }

    .bk
    {
        position: fixed;
        background: url("\\Images\\bk.png");
        background-image: url("/Images/bk.png");
        background-repeat: repeat-x;
        width: 100%;
        height: 41%;
        z-index: -1;
        margin-top: 173px;
    }
}

@media (max-width: 330px)
{
    .float-left
    {
        position: fixed;
        bottom: 0;
        left: 0;
        margin-left: 25%;
        width: 100%;
    }
}

@media only screen and (max-width: 320px) , only screen and (max-height: 568px) and (orientation: portrait) /*Iphone 5 */
{
    .loginForm
    {
        height: 8px;
        margin-left: 57px;
        margin-right: 8px;
        margin-top: 5px;
    }

    .bk
    {
        position: fixed;
        background: url("\\Images\\bk.png");
        background-image: url("/Images/bk.png");
        background-repeat: repeat-x;
        width: 100%;
        height: 41%;
        z-index: -1;
        margin-top: 114px;
    }

    input[type=submit]
    {
        width: 89%;
        height: 31px;
        color: #fff;
        background-color: #0BF;
        border: 1px;
        margin-left: 16px;
        margin-top: 17px;
    }
}

@media (max-width: 317px)
{
    .loginForm
    {
        height: 7%;
        margin-left: 25%;
        margin-right: 7%;
        margin-top: 67%;
    }
}

@media (max-width: 300px)
{
    .loginForm
    {
        height: 7%;
        margin-left: 25%;
        margin-right: 7%;
        margin-top: 70%;
    }
}