body, html { margin: 0; overflow-x: hidden;}

/**
*   HEADER PAGE CSS / INCLUDES STYLING FOR ALL ELEMENTS INCLUDED IN THE HEADER FILE FOR VITAL SIGNS
*   WEBSITE.
*/
#main-header {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 3% 0;

    /*For the logo*/
    text-align: center;

    background-color: rgb(1, 1, 138);
    background-image: url('../images/new_head_scape.jpg');
    background-position: 50% 90%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#mh-logo img {
    width: 35%;
    background-color: rgba(255,255,255,0.8);
    border: 1px solid rgb(0, 25, 148);
}

#nav {
    height: auto;
    margin: 0;
    padding: 0;
    background-color: rgb(1, 20, 112);
}

#nav ul {
    width: 70%;
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;

    display: flex;
}

#nav li {
    width: 15%;
    margin: 0 auto;
    padding: 2% 0;
}

#nav li a {
    font: 1.2vw Grav;
    color: white;
    text-align: center;
    text-decoration: none;
    padding: 10% 12%;

    transition: .5s ease-in-out;
}

#nav li a:hover {
    background-color: lightgray;
    border-radius: 13px;
    color: rgb(1, 20, 112);
}

/**
*
*   INDEX PAGE CSS. INCLUDE ALL STATIC ELEMENTS FOR THE INDIVIDUAL PAGE. ANY ELEMENTS THAT WILL BE USED SITEWIDE
*   WILL BE MARKED ACCORDINGLY TO ASSIST IN CODE NAVIGATION. 
*
*   THIS IS THE WELCOME BOX CSS / THIS IS THE FORST GROUP OF ELEMENTS SEEN BELOW THE HEADER FILE.
*/
#welcome-box {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 5% 0;

    background: linear-gradient(to bottom left, #e4e3e3 0%, #d3d3d3 100%);
    border-bottom: 1px solid rgb(1, 20, 112);
}

#wb-title {
    font: 3vw Grav;
    color: rgb(1, 20, 112);
    margin: 0;
    text-align: center;

}

.wb-sub {
    width: 80%;
    margin: 1.5% auto;

    font: 1.2vw Jose;
    text-align: center;
}

/**
*   THE FIRST SECTION ON THE INDEX PAGE FOLLOWING THE ABOVE "WELCOME BOX" WHICH IS FOUND BELOW THE HEADER FILE
*/
#serv-box {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 5% 0; padding-top: 7%;

    background-image: url('../images/serv_box_back.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
    background-attachment: fixed;
}

#sb-title {
    font: 2vw Rubik;
    color: white;
    margin: 0 0 2% 0;
    padding: 1.5% 0;
    text-align: center;

    background-color: rgba(1, 20, 112,0.6);
}

.iddb {
    border: 1px solid rgb(1, 20, 112);
}

/**
*   SITEWIDE CSS FOR A DISPLAY BOX CLASS USED TO DISPLAY SEGEMENTED INFORMATION (WHERE APPLICABLE) ON THE VITAL SIGNS SITE.
*/
.display-box {
    width: 90%;
    height: auto;
    margin: 5% auto; margin-top: 0;
    padding: 3% 0;
    background-color: rgba(255,255,255,0.8);

    display: flex;
    flex-wrap: wrap;
}
/**  *******  **/

#sbd-content {
    width: 80%;
    margin: 2% auto;

    font: 1.3vw Grav;
    text-align: center;
}

.sb-box {
    width: 30%;
    height: auto;
    margin: 0 auto;
    padding: 2% 1%;
}

.sb-box-title {
    font: 2.2vw Grav;
    color: rgb(1, 20, 112);
    margin: 0;
    text-align: center;
}

.sb-box-content {
    font: 1.4vw Jose;
    margin: 5% 0 0 0;
    text-align: center;
}

/**
*   THIS IS THE EMPLOYEE BOX SECTION / DISPLAYS INFORMATION BELOW THE EMPLOYERS SECTION DESIGNED AROUND PROVIDING
*   INFORMATION FOR THE EMPLOYEE. THIS IS THE SECOND SECTION ON THE INDEX PAGE.
*/
#emp-box {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 7% 0;

    background-color: rgb(235, 235, 235);
    border-top: 1px solid rgb(1, 20, 112);
    border-bottom: 1px solid rgb(1, 20, 112);
}

#eb-title {
    font: 3vw Grav;
    color: rgb(1, 20, 112);
    margin: 0;
    text-align: center;
}

.emp-box-mini {
    width: 80%;
    height: auto;
    margin: 3% auto;
    padding: 3% 2%;

    background-color: white;
    border: 1px solid rgb(174, 172, 172);

    box-shadow: 3px 3px 10px rgb(174, 174, 174);
}

.ebm-title {
    font: 1.8vw Grav;
    color: rgb(1, 25, 148);
    margin: 0;
}

.ebm-content {
    font: 1.3vw Jose;
    margin: 2% 0 0 0;
}

/**
*
*   THIS IS THE CSS FOR THE ABOUT PAGE OF VITAL SIGNS STAFFING. IT INCLUDES SINGULAR STYLES FOR THE PAGE, AS WELL AS SOME
*   SITEWIDE CSS IMPORTED FROM THE TOP OF THIS FILE.
*
*/
#alead-box {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 5% 0 7% 0;
    
    /*background-color: rgb(232, 232, 232);*/
    background: linear-gradient(to bottom left, #e4e3e3 0%, #d3d3d3 100%);
    border-bottom: 1px solid rgb(1, 20, 112);
}

#al-title {
    font: 3vw Grav;
    color: rgb(1, 20, 112);
    margin: 0;
    text-align: center;
}

#al-sub {
    font: 1.5vw Jose;
    margin: 0; margin-top: 2%;
    padding: 0 2%;
    text-align: center;
}

/**   ALTERNATE STYLING FOR DISPLAY BOX ON THE ABOUT PAGE  **/
.ab {
    border: 1px solid rgb(1, 20, 112);
    padding: 5% 0;
}
/**  *******  **/

#about-box {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 5% 0;

    background-image: url('../images/about_one.jpg');
    background-size: 100%;
    background-position: 50%;
    background-attachment: fixed;
}

#ab-title {
    font: 3vw Rubik;
    color: white;
    margin: 0; margin-bottom: 3%;
    padding: 1.5% 0;
    text-align: center;

    background-color: rgba(1, 20, 112,0.6);

}

.ab-sub {
    font: 1.5vw Jose;
    margin: 0;
    padding: 0 2%;
    text-align: center;
}

.mid, .asbase {
    margin-top: 2%;
}

#company-box {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 5% 0;

    border-top: 1px solid rgb(1, 20, 112);
    background-color: rgb(1, 20, 112);
}

.co {
    background-color: white;
    padding: 2%;
    margin-top: 3%;
    box-shadow: -3px 3px 10px rgba(0,0,0,0.3);
}

#cobox-title {
    font: 4vw Grav;
    color: white;
    margin: 0;
    padding-left: 2%;
}

.co-box {
    width: 95%;
    margin: 2% auto;
    padding: 2%;
    
    /*border: 1px solid red;*/
}

.co-box-title {
    font: 2vw Grav;
    color: rgb(1, 20, 112);
    margin: 0;
}

.co-box-content {
    font: 1.3vw Jose;
    margin: 0; margin-top: 2%;
}

.cbcbase {
    font-size: 1.5vw;
    color: white;
    text-align: center;
    margin: 7% 0 3% 0;
    padding: 0 2%;
}

/**
*
*   THIS IS THE CSS FOR THE EMPLOYERS PAGE OF VITAL SIGNS STAFFING. IT INCLUDES SINGULAR STYLES FOR THE PAGE
*   AS WELL AS SITEWIDE STYLES FOUND AT THE TOP OF THIS FILE.
*
*/
#employers-lead {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 3% 0 6% 0;
    
    /*background-color: rgb(232, 232, 232);*/
    background: linear-gradient(to bottom left, #e4e3e3 0%, #d3d3d3 100%);
    border-bottom: 1px solid rgb(1, 20, 112);
}

#er-title {
    font: 4vw Grav;
    color: rgb(1, 20, 112);
    margin: 0; margin-bottom: 3%;
    text-align: center;
}

.er-sub {
    font: 1.5vw Jose;
    margin: 0;
    padding: 0 2%;
    text-align: center;
}

.err {
    font-style: italic;
    color: red;
    margin: 3% 0 -3% 0;
}

#emr-form-box {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 5% 0;
    border-bottom: 1px solid rgb(1, 20, 112);

    background-image: url('../images/employer_form_back.jpg');
    background-size: 100%;
    background-position: 50%;
    background-attachment: fixed;
}

#emr-form-container {
    width: 60%;
    height: auto;
    margin: 0 auto;
    padding: 2% 1%;
    background-color: white;
    border: 1px solid rgb(1, 20, 112);
}

.everify {
    width: 18%;
    background-color: white;
    padding: 2%;
    margin: 2% auto 0 auto;
    border: 1px solid rgb(1, 20, 112);
    border-radius: 10px;
}

.ev-text {
    font: 1vw Grav;
    color: rgb(1, 20, 112);
    margin: 0;
    text-align: center;
}

/**
*
*/
.emrf-title {
    font: 2.5vw Grav;
    margin: 2% 0 1% 0;
    color: rgb(1, 20, 112);
}

.form-box {
    width: 95%;
    margin: 0 auto;
    padding: 1% 0;
}

.form-label {
    font: 1vw Grav;
    margin: 0;
    color: rgb(1, 20, 112);
}

.form-input {
    width: 100%;
    margin: 0 auto;
    padding: 1% .5%;

    font: 1.2vw Jose;
}

.vs-btn {
    font: 1.2vw Jose;
    color: rgb(1, 20, 112);
    margin: 4% 0 1% 0;
    padding: 1% 2%;
    background-color: white;
    border: 1px solid rgb(1, 20, 112);
    cursor: pointer;

    transition: .25s ease-in-out;
}

.vs-btn:hover {
    background-color: rgb(1, 20, 112);
    color: white;
}

/**
*   
*   THIS IS THE CSS FOR THE EMPLOYEES PAGE OF VITAL SIGNS STAFFING. IT INCLUDES THE SINGULAR STYLES FOR THE PAGE AS WELL AS SITEWIDE CSS
*   FOUND AT THE TOP IF THIS FILE.
*   
*/
#emy-box {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 5% 0;

    background: linear-gradient(to bottom left, #e4e3e3 0%, #d3d3d3 100%);
    border-bottom: 1px solid rgb(1, 20, 112);
}

#emyb-title {
    font: 3vw Grav;
    color: rgb(1, 20, 112);
    margin: 0;
    text-align: center;
}

#emyb-sub {
    font: 1.3vw Jose;
    margin: 2% 0 0 0;
    padding: 0 2%;
    text-align: center;
}

#cc-link {
    font-style: italic;
    text-decoration: none;
    color: rgb(1, 20, 112);

    transition: .25s ease-in-out;
}

#cc-link:hover {
    text-decoration: underline;
}

#emy-ben-box {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 5% 0 0 0;
    border-top: 1px solid rgb(1, 20, 112);
    border-bottom: 1px solid rgb(1, 20, 112);
}

#emyben-title {
    font: 1.7vw Grav;
    margin: 0;
    text-align: center;
}

.emyd {
    display: flex;
    flex-wrap: wrap;
}

.emyd-box {
    width: 40%;
    height: auto;
    margin: 2% auto;
    padding: 2%;
    border: 1px solid lightgray;
}

.emyd-title {
    font: 2vw Grav;
    color: rgb(1, 20, 112);
    margin: 0;
}

.emyd-sub {
    font: 1.3vw Jose;
}

#emy-details-box {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 5% 0;
    background: linear-gradient(to bottom left, #e4e3e3 0%, #d3d3d3 100%);

    border-top: 1px solid rgb(1, 20, 112);
    border-bottom: 1px solid rgb(1, 20, 112);
}

#emy-details-title {
    font: 3vw Grav;
    color: rgb(1, 20, 112);
    margin: 0;
    text-align: center;
}

.deets-content {
    font: 1.3vw Jose;
    text-align: center;
    margin: 2% 0;
    padding: 0 2%;
}

/**
*
*
*
*/
#career-header {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 5% 0;

    background: linear-gradient(to bottom left, #e4e3e3 0%, #d3d3d3 100%);
    border-bottom: 1px solid rgb(1, 20, 112);
}

#cr-job-board {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 5% 0 2% 0;
    overflow-y: scroll;
    border-bottom: 1px solid rgb(1, 20, 112);

    background-image: url('../images/career_board.jpg');
    background-size: 100%;
    background-position: 50%;
    background-attachment: fixed
}

.cc {
    background-color: transparent;
}

.cc-board-box {
    width: 95%;
    height: auto;
    margin: 0 auto 2% auto;
    padding: 1.5% 0;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.2);

    background-color: white;
}

.cc-title {
    font: 2vw Grav;
    color: rgb(1, 20, 112);
    margin: 0;
    padding-left: 1.5%;
}

.cc-det {
    font: 1.3vw Grav;
    color: #1a1a1a;
    margin: 2% 0;
    padding-left: 1.5%;
}

#cr-title {
    font: 3vw Grav;
    color: rgb(1, 20, 112);
    margin: 0;
    text-align: center;
}


#cr-sub {
    font: 1.3vw Jose;
    margin: 2% 0 0 0;
    padding: 0 2%;
    text-align: center;   
}

#crj-title {
    font: 3vw Rubik;
    color: white;
    margin: 0;
    padding: 1% 0;
    text-align: center;

    background-color: rgba(1, 20, 112, 0.8);
}

#career-contact {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 4% 0;
    border-bottom: 1px solid rgb(1, 20, 112);
}

#ccon-title {
    font: 3vw Grav;
    color: rgb(1, 20, 112);
    margin: 0;
    text-align: center;
}

#ccon-text {
    font: 1.3vw Jose;
    margin: 2% 0 0 0;
    padding: 0 3%;
    text-align:center;
}

#resume-form {
    width: 50%;
    height: auto;
    margin: 2% auto 0 auto;
}


/**
*   THIS IS AN OPTIONAL SEGEMENT OF CODE. TAG LINE THAT SPANS THE PAGE BENEATH THE LAST PAGE CONTENT AND
*   THE INCLUDED FOOTER FILE.
*
*   POSSIBLE SITEWIDE UTILIZATION.
*/
.tag-bar {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 2.5% 0;

    background-color: rgb(1, 20, 112);
}

.tag-content {
    width: 90%;
    font: 2.4vw Rubik;
    color: white;
    margin: 0 auto;
    padding: 1% 0;
    text-align: center;
}

.ebe, .emy {
    padding: 5% 0;

    background-image: url('../images/happy_employees.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-attachment: fixed;
}

.ebecon {
    width: 100%;
    font-size: 3vw;
    color: white;
    background-color: rgba(1, 20, 112, 0.8);
}

.emy {
    background-image: url('../images/happy_employees_2.jpg');
    background-position: 50%;
}

.emytag {
    width: 100%;
    margin: 0;
    background-color: rgba(1, 20, 112, 0.8);
}
/**  *******   **/


/**
*
*   THIS IS THE FOOTER CSS. ALL IS SITEWIDE AND IS INCLUDED VIA PHP ONTO THE VIEWPORT FOR THE USER.
*   CONTAINS ALL PERTINENT INFORMATION ABOUT VITAL SIGNS STAFFING AND VALKYRIE DEVELOPMENT.
*
*/
#footer {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 3% 0;

    background-color: rgb(1, 1, 138);
    background-image: url('../images/footer_back.jpg');
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.footer-content {
    width: 35%;
    margin: 0 auto;
    padding: 2% 0;
    background-color: rgba(255,255,255,0.8);
    border: 1px solid rgb(1, 20, 112);
}

.footer-big {
    font: 1.3vw Rubik;
    color: rgb(1, 1, 138);
    margin: 0;
    text-align: center;
}

.footer-small {
    font: 1.1vw Rubik;
    color: gray;
    margin: 0;
    text-align: center;
}

.lead {
    margin-bottom: 2%;
}

.auth {
    font-size: .6vw;
    color: rgb(1, 1, 138);
    margin-top: 5%; margin-bottom: -2%;
}

.foot-link {
    color: rgb(0, 118, 253);
    text-decoration: none;

    transition: .25s ease-in-out;
}

.foot-link:hover {
    color: white;
    text-decoration: none;
}









/**
*
*   THIS IS THE CSS FOR THE BACKOFFICE OF VITALSIGNS STAFFING. ALL IS SITEWIDE AND IS INCLUDED VIA PHP ONTO THE VIEWPORT FOR THE USER.
*
*/
.bo-head {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 2% 0;

    /* ALIGNMENT OF LOGO */
    text-align: center;
}

.bo-head img {
    width: 25%;
    margin: 0;
}

.neg-box {
    width: 70%;
    height: auto;
    margin: 0 auto;
    padding: 2% 3%;
    background-color: rgba(255,255,255,0.8);
}

.neg-msg {
    font: 1vw Grav;
    color: rgb(192, 192, 192);
    margin: 0;
    text-align: center;
}

#login-title {
    font: 2vw Grav;
    color: rgb(1, 20, 112);
    margin: 0;
    text-align: center;
}

#login-container {
    width: 60%;
    height: auto;
    margin: 0 auto;
    padding: 1.5%; 
}

#login-form {
    width: 30%;
    margin: 0 auto;
}

.office {
    width: 70%;
    margin: 0 auto;
    padding: 0;
}

.office-container {
    width: 60%;
    height: auto;
    margin: 0 auto;  margin-bottom: 5%;
    padding: 0;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.4);

    display: flex;
    flex-wrap: wrap;
}

.oc-head {
    width: 100%;
    height: 10%;
    margin: 0;
    padding: 2% 0;

    border-bottom: 1px solid gray;
    background-color: rgb(1, 20, 112);
}

.oc-head-title {
    font: 2vw Rubik;
    color: white;
    margin: 0;
    padding-left: 1.5%;
}

.oc-head-id {
    font: 1vw Rubik;
    color: white;
    margin: 0;
    padding-left: 1.5%;
}

.oc-left {
    width: 20%;
    height: auto;
    margin: 0;
    padding: 1.5%;
    background-color: rgb(1, 20, 112);

    border-right: 1px solid rgb(1, 20, 112);
}

.oc-left ul {
    list-style-type: none;
    margin: 0;
}

.oc-left li {
    margin: 5% 0;
}

.oc-left a {
    font: 1.3vw Grav;
    margin: 0;
    color: white;
    text-decoration: none;
}

.oc-right {
    width: 76%;
    height: 70vh;
    margin: 0 auto;
    padding: 1.5% 0;
    overflow-y: scroll;
}

.post-card-box {
    width: 95%;
    height: auto;
    margin: 0 auto 2% auto;
    padding: 1.5% 0;

    box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
}

.pb-title {
    font: 1.5vw Grav;
    color: rgb(1, 20, 112);
    margin: 0;
    padding-left: 1.5%;
}

.pb-det {
    font: .9vw Grav;
    color: gray;
    margin: 2% 0;
    padding-left: 1.5%;
}

.pb-des {
    font: 1.3vw Grav;
    color: rgb(1, 20, 112);
    margin: 1% 0;
}

.top {
    margin-top: 2%;
}

.pbc-link {
    float: right;
    margin: 0;

    font: .9vw Grav;
    color: rgb(1, 20, 112);
    text-decoration: none;
    padding: 0 1.5%;
}

.del {
    color: rgb(255, 146, 146);
}

.edit {
    color: rgb(21, 60, 255);
}

#add-container {
    width: 70%;
    height: auto;
    margin: 0 auto;
    padding: 2% 0;
}

#add-lead {
    font: 2vw Grav;
    color: rgb(1, 20, 112);
    margin: 0;
    padding-left: 2%;
}

#add-sub {
    font: italic .9vw Grav;
    color: lightgray;
    margin: 0;
    padding-left: 1.5%;
}