#LoginfailedMessage{
                color: red;
            }

            nav{
                position: absolute;
            }
            
            .navbar{
                position: absolute;
                right: 0;
            }
            
            body{
                background-image: url(https://online.mystery-shoppers.co.uk/images/appweb/auth/background.jpg);
                background-repeat: no-repeat;
                background-size: cover;
                font-size: 16px;
                color: #fff;
                position: relative;
                overflow-y: auto;
            }
            
            #logo-container{
                text-align: center;
                position: relative;
                margin-top: -3px;
                flex: 0 0 auto;
            }
            
            #logo-container .logo-login{
                position: absolute;
                max-width: 200px;
                max-height: 80px;
                top: 40%;
                left: 50%;
                -ms-transform: translateX(-50%) translateY(-50%);
                -webkit-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
            }
            
            #loginContainer{
                position: relative;
                width: 25%;
                display: block;
                margin: 10% auto;
                text-align: center;
            }
            
            #loginContainer input{
                border: 0;
                background-color: transparent;
                color: #ECE87D;
                font-weight: bold;
                font-size: 100%;
            }
            
            #loginContainer input[type=submit]{
                background-color: #ECE87D;
                margin-bottom: 20px;
                color: grey;
            }
            
            #loginContainer input[type=submit]:hover,input[type=submit]:active{
                background-color: #1F224D;
                margin-bottom: 20px;
                color: #ECE87D;
            }
            
            .loginform hr{
                margin-top: 0;
                border-color: grey;
            }
            
            .form-control .loginBtn{
                position: relative;
                
            }
            a,a:active,a:visited,a:focus{
                color: #fff;
            }
            
            a:hover{
                color: #ECE87D;
            }
            
            p{
                color: #fff;
            }
            
            a.become{
                text-decoration: underline;
            }
            
/*
            #mobileContainer{
                position: absolute;
                bottom: 0;
                width: 50%;
                padding-left: 2%;
            }
*/
            
            .appBtn{
                float: left;
                margin-right: 20px;
                margin-top: 20px;
            }
            
            .appBtn img{
                width: 100%;
            }
            
            /*
                Navigation
            */
            
            .mainNav{
                position: absolute;
                top: 3%;
                width: 40%;
                right: 0;
                z-index: 1000;
            }
            
            ul#mainMenu{
                position: absolute;
                width: 100%;
                list-style: none;
            }
            
            #mainMenu li, li:active,li:visited{
                display: inline-block;
                margin-right: 2%;
            }
            
            #mainMenu lia:hover{
                color: #ECE87D;
            }
            
            .menuBtn{
            position: absolute;
            top: 1%;
            right: 1%;
              z-index: 3000;
            background-color: #1F224D;
            width: 35px;
            height: 35px;
            display: none;
            }
            
            .fa-bars{
                color: #ECE87D;
                font-size: 140%;
            }
            
            .fa-facebook{
                color: #3B5998;
                font-size: 140%;
            }
            
            .facebook{
                width: 25px;
                height: 25px;
            }

        @media only screen and (max-width: 1268px)
        {
            //body{
               // background-image: url(https://mysteryshopperstraining.shopmetrics.com/mystservices/Attachments/GetAttachment.asp?AttachmentID=729653&Password=8C40DB5F2D9C40B58201D1FCDF516A570BEE4965E4BB436794D3426EBE8C279F);
            //}
        }
            
        @media only screen and (min-width: 462px) and (max-width: 729px)
        {
            .appBtn{
                margin-left: 10%;
            }    
        }
            
            
        @media only screen and (max-width: 731px)
        {
            .menuBtn{
            display: block;
            }
            
            
           
            
            #mobileContainer a{
                text-align: center;
            }
            
            .mobileicons{
                width: 100%;
                text-align: center;
            }
            
            .mobileicons a{
                margin-left: 0 !important;
            }
            
            .appBtn{
                float: left;
                margin-top: 20px;
            }
            
            #loginContainer{
                position: relative;
                width: 100%;
                display: block;
                margin: 10% auto;
                text-align: center;
            }
        }

            @media only screen and (min-width: 1000px)
            {
                #mobileContainer{
                    position: fixed;
                    bottom: 0;
                    left: 1%;
                }
            }
            
            @media only screen and (min-width: 1268px)
            {
                .mainNav{
                    display: inline-block !important; 
                }
                
                .closeMenu{
                    display: none;
                }

            }
            
            @media only screen and (min-width: 1024px) and (max-width: 1268px)
            {
                .mainNav{
                position: absolute;
                top: 22%;
                width: 50%;
                right: 20%;
                z-index: 1000;
                    display: inline-block !important;
                }
                
                .closeMenu{
                    display: none;
                }
                
                
            }
            
            @media only screen and (max-width: 1001px)
            {
                .mainNav{
                position: absolute;
                top: 22%;
                width: 70%;
                right: 10%;
                z-index: 1000;
                }
            }
            
            @media only screen and (max-width: 1024px)
            {
                .closeMenu{
                    position: absolute;
                    top: 0;
                    right: 2%;
                    color: #ECE87D;
                    font-size: 160%;
                    display: block;
                    z-index: 3002;
                    cursor: pointer;
                }
                
                
                .mainNav{
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 0;
                    opacity: 0;
                    padding-top: 2%;
                    background-color: #1F224D;
                    height: 100vh;
                    border-left: 4px groove #ECE87D; 
                    display:none;
                }
                
                #mainMenu{
                    padding: 20px;
                }
                
                #mainMenu li{
                    width: 100%;
                    text-align: center;
                    margin-bottom: 20px
                }
                
                #mainMenu li a{
                    color: #ECE87D;
                }
                
                .navActive{
                    z-index: 3001;
                    opacity: 1;
                    width: 200px;
                    display: block;
                    transition: display 2s;
                    transition: width 1s;
                }
                
                .navInactive{
/*                    width: 0;*/
                    display: none;
/*
                    transition: width 2s;
                    transition: display 2s;
*/
                }
                
                .menuBtn{
                    width: 50px;
                    height: 50px;
                    display: block;
                }
                
                .fa-bars{
                color: #ECE87D;
                font-size: 180%;
                }
                
                 #mobileContainer{
                position: relative;
                display: block;
                width: 29%;
                margin: 0 auto;
/*
                margin-left: 32%;
                margin-right: 30%;
*/
                     margin-bottom: 40px;
                     margin-left: auto;
                     margin-right: auto;
                }
                
                .mobile-icons{
                    width: 40%;
                    margin-bottom: 10%;
                }
                
                .mobileicons a{
                    margin-left: 12%;
                }
                
                .appBtn{
                    float: left;
                    margin-right: 4px;
                }
                
            }
            
            @media only screen and (min-width: 730px) and (max-width: 997px)
            {
                #mobileContainer{
                position: relative;
                display: block;
                width: 40%;
                margin: 0 auto;
                }
                
                .mobileicons a{
                    text-align: center;
                    margin-left: 14%;
                }
                
                .appBtn{
                float: left;
                margin-right: 10px;
                margin-top: 20px;
                }
                
                #loginContainer{
                position: relative;
                width: 60%;
                display: block;
                margin: 10% auto;
                text-align: center;
                }
                
                
            }