@charset "UTF-8";
/* CSS Document */

/*
This CSS resource incorporates links to font software which is the valuable copyrighted
property of Monotype Imaging and/or its suppliers. You may not attempt to copy, install,
redistribute, convert, modify or reverse engineer this font software. Please contact Monotype
Imaging with any questions regarding Web Fonts:  http://www.fonts.com
*/

/* Global CSS */

body { font-family: 'Montserrat', sans-serif; }

h1 { font-weight: 500; }

h5 { font-weight: 300; line-height: 1.25; }

img { max-width: 100%; }

a { color: rgba(179,155,200,1); }

a:hover { color: #60435f; text-decoration: none; }

.head-space { background-color: #60435f; font-size: 12px; letter-spacing: 2px; font-weight: 300; }

.logo { width: 180px; height: auto; }

.foot-space { background-color: #60435f; font-size: 14px; font-weight: 200; padding-top: 100px; }

.services { cursor: pointer; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transition: transform 0.25s ease-in-out; }

.services:hover { transform: scale(1.25); -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -ms-transform: scale(1.25); -o-transform: scale(1.25);  transition: transform 0.25s ease-in-out; }

    /* Preloader */

.load { position:fixed; top: 0; left: 0; z-index: 9999; background-color: #f8f9fa; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; }

.load hr { width: 30px; height: 30px; position: absolute; border-radius: 50%; animation: spin 2s ease infinite; }

.load hr:first-child { background-color: #222; animation-delay: -1.5s; }

.load hr:nth-child(2) { background-color: #222; animation-delay: -1s; }

.load hr:nth-child(3) { background-color: #222; animation-delay: -.5s; }

.load hr:last-child { background-color: #222; }

@keyframes spin {
	0%, 100% { transform: translate(0); }
	
	25% { transform: translate(160%); }
	
	50% { transform: translate(160%, 160%); }
	
	75% { transform: translate(0, 160%); }
}

    /* Forms */

    label {
        font-size: 20px;
        line-height: 50px;
        color: rgba(0,0,0,0.50);
        display: block;
    }

    span.required {
        color: #D0021B;
    }

    input, textarea {
        box-sizing: border-box;
    }

    input {
        font-weight: 300;
        color: #000;
        border: 1px solid #D8D8D8;
        font-size: 28px;
        letter-spacing: 1px;
        line-height: 50px;
        padding: 14px 20px;
        width: 100%;
    }

    textarea {
        font-weight: 300;
        color: #000;
        border: 1px solid #D8D8D8;
        font-size: 24px;
        letter-spacing: 1px;
        line-height: 48px;
        padding: 14px 20px;
        width: 100%;
    }

    input:focus,
    select:focus,
    textarea:focus,
    button:focus {
        outline: none;
    }
    ::-webkit-input-placeholder {
        color: rgba(0,0,0,0.40);
    }
    ::-moz-placeholder {
        color: rgba(0,0,0,0.4);
    }
    :-ms-input-placeholder {
        color: rgba(0,0,0,0.4);
    }
    :-moz-placeholder {
        color: rgba(0,0,0,0.4);
    }
    input:disabled,
    textarea:disabled {
        color: rgba(0,0,0,0.4);
    }

    button {
        border: 1px solid #0000FF;
        cursor: pointer;
        letter-spacing: 2px;
        font-size: 16px;
        line-height: 16px;
        color: #0000FF;
        font-weight: 400;
        padding: 20px 50px;
    }

    button:hover {
        border-color: #0000FF;
        color: #fff;
        background-color: #0000FF;
    }

    button.inactive {
        pointer-events: none;
        border: 1px solid rgba(0,0,0,0.50);
        color: rgba(0,0,0,0.50);
    }

    .login-details {
        padding: 50px 0 90px;
    }

    main .container > .login-details {
        padding: 90px 0 0;
    }

    #update-preview {
        cursor: pointer;
    }

/*
    =================================
    Add Job & Add Users
    =================================
*/

    main .container > .description {        
        padding: 0 0 80px;
        text-align: center;
    }

    #form-container {
        border-right: 1px solid #0000FF;
    }

    #preview-container, #users-container {
        overflow: scroll;
        height: calc(100vh - 170px - 20px);
    }


    /* Preview Container */
    #preview-container ul li {
        padding: 0 0 60px 20px;
        border-bottom: 0;
    }

    #preview-container .job-description {
        padding: 40px 0 60px;
    }

    #preview-container h2.job-details {
        font-size: 24px;
        line-height: 56px;
        padding-bottom: 90px;
    }

    #preview-container p {
        font-size: 28px;
        line-height: 56px;
        padding-bottom: 50px;
    }


    /* Users Container */
    #users-container ul li {
        padding: 20px 0;
    }

    #users-container ul li:first-child {
        padding: 0 0 20px;
    }

    #users-container p {
        font-size: 28px;
        line-height: 50px;
    }


/*
    =================================
    Add Job & Add Users
    =================================
*/

    main#login {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row; /* Default */
        flex-wrap: nowrap; /* Default */

        padding: 170px 0 0;
    }

    main#login .container {
        max-width: 560px;
        width: 100%;
    }

 /* Headers */
    body.admin header .container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row; /* Default */
        flex-wrap: nowrap; /* Default */
    }

    body.admin header .container > div {
        display: flex;
        flex-direction: column;

        width: 100%;
    }

    body.admin header .left, body.admin header .left h1 {
        text-align: left;
    }

    body.admin header .right {
        text-align: right;
        line-height: 50px;
    }

    body.admin #page-title {
        height: 90px;
        line-height: 90px;
        border-bottom: 1px solid #0000FF;
        text-align: center;
        background: #fff;
    }

    header #page-title .container {
        padding: 0 80px;
    }

    header #head a.button {
        border: 1px solid #fff;
        letter-spacing: 2px;
        font-size: 16px;
        line-height: 50px;
        height: 50px;
        display: inline-block;
        color: #fff;
        font-weight: 400;
        padding: 0 50px;
    }

    header #head a.button:hover {
        border-color: #fff;
        color: #0000FF;
        background-color: #fff;
    }