/*--------------------------------------- Background Imagery -*/
body{background-image:url('/inc/images/JHT logo mountains LRG_1 color grey-428.png');}
/*--------------------------------------- Top Section Style -*/
    #login-top{
        background-image:url('/inc/images/JHT logo mountains LRG_1 color red-186.png');
        background-color:#CF102D;
        background-size: 1163px 338px;
        background-repeat: no-repeat;
        color: #FFF;
    }
    #login-top article{
        font-size:0.8rem;
        padding-bottom:60px;
    }
    #login-top h3{
        margin-top:130px;
    }
    #login-top p{
        margin:0px;
    }
/*--------------------------------------- Top Service Request Section Style -*/
    #service-top{
        background-image:url('/inc/images/Matrix logo_1 color black-pdf.png');
        background-position:center;
        background-color:#000000;
        background-repeat: no-repeat;
        color: #FFF;
        display:none;
    }
    #service-top h3{
        margin-top:130px;
    }
    #service-top i{
        text-align:center;
    }

/*--------------------------------------- Bottom Section Style -*/
    #login-bottom{
        background:#FFF;
        color:#CF102D;
    }
    #login-bottom select{
        background:#FFF;
        color:#000;  
        display:block;
        border-radius:3px;
        border:1px solid #C1C6C8;
        box-shadow:none;
        margin:5px;
        height:30px;
        width:35%;
        font-size:1.10rem;
    }
    #login-bottom select:focus{
        border:1px solid #C1C6C8;
        box-shadow:none;
        outline:none;
    }

    #login-bottom input{
        background:#FFF;
        color:#000;  
        display:block;
        border-radius:3px;
        border:1px solid #C1C6C8;
        box-shadow:none;
        margin:5px;
        height:30px;
        width:35%;
        font-size:1.10rem;
    }
    #login-bottom input:focus{
        border:1px solid #C1C6C8;
        box-shadow:none;
        outline:none;
    }
    #login-bottom input::placeholder{
        color:#000;
    }
    #login-bottom textarea{
        background:#FFF;
        color:#000;  
        display:block;
        border-radius:3px;
        border:1px solid #C1C6C8;
        box-shadow:none;
        margin:5px;
        font-size:1.10rem;
        height:125px;
        width:400px;
    }
    #login-bottom textarea:focus{
        border:1px solid #C1C6C8;
        box-shadow:none;
        outline:none;
    }
    #login-bottom textarea::placeholder{
        color:#000;
    }
    #login-bottom h5{
        text-align:center;
        color:#CF102D;
        margin-top:35px;
    }
    #login-bottom a{
        margin:5px;
    }
/*--------------------------------------- Login Section Style -*/
    #request-service{
        text-align:right;
        color:gray;
        margin-top:40px;
        margin-right:25px;
        margin-bottom:-50px;  
    }
    #request-service a{
        margin:0px;
    }
    #request-service2{
        display:none;
        color:gray;
        text-align:center;
        padding-bottom:20px;
    }
    #request-service2 a{
        margin:0px;
    }
/*--------------------------------------- Website Select Style -*/
    #select{
        display:none;
    }
    #select p{
        text-align:center;
        color:#7d7e80;

    }
/*--------------------------------------- Forgotten Password Style -*/
    #password{
        display:none;
    }
    #password p{
        text-align:center;
        color:#7d7e80;
    }
/*--------------------------------------- Service Request Style -*/
    #service{
        display:none;
        margin-bottom:30px;
        color:gray!important;
    }
    #service p{
        text-align:center;
        color:#7d7e80;
        padding-top:45px;
    }
    .service-row{
        margin-left:25%;
        margin-right:25%;
        padding-bottom: 6px;
        display:flex;
        flex-wrap:wrap;
    }
    #service select{
        width:150px;
    }
    #service input{
        width:150px;
    }
    #service textarea{
        width:225px;
        height:200px;
    }
/*--------------------------------------- Custom Row -*/
    .login-row{
        margin-left:50px;
        margin-right:50px;
        padding-bottom: 40px;
        display:flex;
        flex-wrap:wrap;
    }
/*--------------------------------------- Custom Padding -*/
    #login-padding{
        padding-top:15vh;
        padding-bottom:5vh;
        /*Main tag doesn't work well
        on this page */
    }
    #login-btn-padding{
        padding-bottom:30px;
    }

/*--------------------------------------- Height Media Queries -*/
    @media(max-height:600px){
        #login-top h3{
            margin-top:45px;
        }
        #service-top h3{
            margin-top:45px;
        }
        #login-padding{
            padding-bottom:0vh;
        }
    }
    @media(max-height:700px){
        #login-padding{
            padding-top:5vh;
        }
    }
/*--------------------------------------- Width Media Queries -*/
    @media(max-width:295px){
        #login-bottom input::placeholder{
            font-size:.9rem;
        }
    }
    @media(max-width:400px){
        #service textarea{
            width:150px;
        }
    }
    @media(max-width:490px){
        #service-top{
            background-image:none;
        }
    }
    @media(max-width:576px) and (min-width:491px){
        #service-top{
            background-size: 448px 40px;
        }
    }
    @media(max-width:770px){

        #request-service{
            display:none;
        }
        #request-service2{
            display:block;
        }
        #login-btn-padding{
            padding-bottom:5px;
        }
        #service-top h3{
            font-size:1.5rem;
        }
    }
    @media(max-width:770px) and (min-width:577px){
        #service-top{
            background-size: 504px 45px;
        }
    }
    @media(max-width:993px) and (min-width:771px){
        #service-top{
            background-size: 672px 60px;
        }
    }