/* recent jobs */
h4 {
    border-bottom: 1px solid black;
}

.modalTitle {
    border-bottom: 1px solid white !important;
}

#jobs {
    background: #f8f8fa;
    padding: 10px 0;
    margin-bottom: 10px;
}

.company-details {
    box-shadow: 0 2px 70px 0 rgba(110, 130, 208, 0.18);
    border-radius: 5px;
    margin-bottom: 20px;
}

.job-update {
    background: white;
    padding: 10px 20px;
    border-radius: 5px;
}

.job-update h4 strong {
    font-size: 30px;
    font-family: "Oswald", sans-serif;
}

.job-update .fa {
    margin-top: 5px;
    margin-right: 10px;
    color: #20429b;
}

.price {
    color: #000;
    font-weight: 500;
}

.location {
    color: #ed1c24;
}

.description {
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition: height 0ms 400ms, opacity 400ms 0ms;
}

.company-details:hover .description {
    height: auto;
    opacity: 1;
    transition: height 0ms 0ms, opacity 600ms 0ms;
}

.bookmark {
    color: #000 !important;
    float: right;
    display: inline-flex;
    font-size: 20px;
    cursor: pointer;
}

.bookmark p {
    margin-left: 5px;
    font-size: 20px;
    cursor: pointer;
}

.fa-heart-o:before {
    content: "\f08a";
    margin-right: 8px;
    font-size: 20px;
    cursor: pointer;
    color: #ed1c24 !important;
}

.fa-heart:before {
    content: "\f004";
    margin-right: 8px;
    font-size: 20px;
    cursor: pointer;
    color: #ed1c24 !important;
}

.job-update small {
    background: #efefef;
    padding: 1px 5px;
    margin: 0 5px;
}

.job-update small:hover {
    cursor: pointer;
    background: #20429b;
    z-index: 2;
    transition: all 200ms ease-in;
    transform: scale(1.1);
    color: white;
}

.job-update p {
    margin-bottom: 0 !important;
}

.job-update a {
    text-decoration: none !important;
    color: #b6bed2;
    float: right;
}

.job-update a:hover {
    text-decoration: none !important;
    color: #20429b;
    float: right;
}

.apply-btn {
    height: 40px;
    background-image: linear-gradient(to right, #ed1c24, #20429b);
    padding: 5px;
    border-bottom-left-radius: 5px;
}

.apply-btn .btn-primary {
    padding: 0 30px;
    float: right;
    box-shadow: none !important;
    background: transparent;
    border: 1px solid #fff;
    width: 100px;
    height: 30px;
    line-height: 30px;
    background: #ed1c24;
    color: #ffffff;
    font-size: 16px;
    text-transform: uppercase;
    border-radius: 10px;
}

.pagelink li {
    height: 25px;
    list-style: none;
    width: 25px;
    display: inline-block;
    cursor: pointer;
}

.pagelink li:hover,
.active {
    color: #fff;
    background-image: linear-gradient(to right, #20429b, #ed1c24);
}

.left-arrow {
    color: #999;
}

.right-arrow {
    color: #20429b;
}

/* site-stats */
#site-stats {
    padding: 100px 0;
}

#site-stats {
    margin-bottom: 30px;
}

.stats-box {
    padding: 30px;
    border-radius: 10px;
    margin: 20px 0;
    box-shadow: 0 2px 40px 0 rgba(110, 130, 208, 0.18);
}

.stats-box:hover {
    transition: all 0.2s ease-out;
    box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
    border: 1px solid #cccccc;
    background-color: #20429b;
    transform: scale(1.1);
}

.stats-box:hover p {
    transition: all 0.3s ease-out;
    color: #ffffff;
}

.stats-box:hover i {
    transition: all 0.3s ease-out;
    color: #ffffff;
}

.stats-box:hover small {
    transition: all 0.3s ease-out;
    color: #ffffff;
}

.stats-box .fa {
    font-size: 30px;
    margin-right: 10px;
    margin-bottom: 10px;
}

/* Modal Custom CSS */
.modal-header {
    background-image: linear-gradient(to right, #ed1c24, #20429b);
    color: #fff;
}

.modal-body input,
.modal-body textarea {
    margin-bottom: 15px;
}

.modal-footer {
    justify-content: center !important;
}

.modal-footer button {
    background: #20429b;
    border: 3px solid #fff;
}

.modal-footer button:hover {
    background: #ed1c24;
    border: 1px solid #fff;
}