/******************************************************************
Site Name: VocoVision
Author: Soliant MC

Stylesheet: Variables

Here is where we declare all our variables like colors, fonts,
base values, and defaults. We want to make sure this file ONLY
contains variables that way our files don't get all messy.
No one likes a mess.

******************************************************************/
/*********************
COLORS
*********************/
/******************************************************************
Site Name:
Author:

Stylesheet: Mixins Stylesheet

This is where you can take advantage of Sass' great features: Mixins.
I won't go in-depth on how they work exactly,
there are a few articles below that will help do that. What I will
tell you is that this will help speed up simple changes like
changing a color or adding CSS3 techniques gradients.

A WORD OF WARNING: It's very easy to overdo it here. Be careful and
remember less is more.

Helpful:
http://sachagreif.com/useful-sass-mixins/
http://thesassway.com/intermediate/leveraging-sass-mixins-for-cleaner-code
http://web-design-weekly.com/blog/2013/05/12/handy-sass-mixins/

******************************************************************/
/*********************
BREAKPOINTS
*********************/
/*********************
TRANSITIONS/ETC
*********************/
/*********************
CSS3 GRADIENTS
Be careful with these since they can
really slow down your CSS. Don't overdo it.
*********************/
/* @include css-gradient(#dfdfdf,#f8f8f8); */
/*********************
BOX SIZING
*********************/
/* @include box-sizing(border-box); */
/* NOTE: value of "padding-box" is only supported in Gecko. So
probably best not to use it. I mean, were you going to anyway? */
/*********************
ANGLES
*********************/
/*section headers*/
.page-template-page-job-results .page-hero {
    padding-block: 1.6rem 6rem;
}
.page-template-page-job-results .site-header--fade + main .page-hero,
.page-template-page-job-results .site-header--transparent + main .page-hero {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}
.page-template-page-job-results .hero-content a,
.page-template-page-job-results .hero-content .link-btn {
    color: #fff;
    text-decoration: underline;
}
.page-template-page-job-results .hero-content a:hover,
.page-template-page-job-results .hero-content .link-btn:hover {
    text-decoration: none;
}
.page-template-page-job-results .hero-content .link-btn {
    font-size: 1.4rem;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .page-template-page-job-results .page-hero .hero-content p {
        font-size: 2rem;
    }
}

.nav-breadcrumb.search-results-breadcrumb {
    margin-top: 0;
}
.nav-breadcrumb.search-results-breadcrumb > .container {
    padding-top: 0;
}
.nav-breadcrumb.search-results-breadcrumb a {
    color: #828282;
    text-decoration: none;
}
.nav-breadcrumb.search-results-breadcrumb a:hover {
    text-decoration: underline;
}
.nav-breadcrumb.search-results-breadcrumb.nav-breadcrumb,
.nav-breadcrumb.search-results-breadcrumb.nav-breadcrumb a {
    color: #fff;
}
.nav-breadcrumb.search-results-breadcrumb .breadcrumb_last {
    color: #bdbdbd;
}
.nav-breadcrumb.job-detail-breadcrumb {
    background-color: #f2fafc;
    margin: 0;
    padding-top: 3rem;
}
.nav-breadcrumb.job-detail-breadcrumb > .container {
    padding-top: 0;
}
.nav-breadcrumb.job-detail-breadcrumb a {
    color: #1d4588;
    text-decoration: none;
}
.nav-breadcrumb.job-detail-breadcrumb a:hover {
    text-decoration: underline;
}
.nav-breadcrumb.job-detail-breadcrumb.nav-breadcrumb,
.nav-breadcrumb.job-detail-breadcrumb.nav-breadcrumb a {
    color: #1d4588;
}
.nav-breadcrumb.job-detail-breadcrumb .breadcrumb_last {
    color: #bdbdbd;
}

/*
* JOB Search
* use: Job Results 
*/
.sec-job-search {
    display: none;
}

.job-results__overlay {
    display: none;
}

.sec-job-search {
    touch-action: manipulation;
    -ms-touch-action: manipulation;
}
.sec-job-search .search-field {
    box-sizing: inherit;
}

.job-search-form form {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}
.job-search-form label,
.job-search-form legend {
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}
.job-search-form .input-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 452px;
    margin: 0 auto;
    width: 100%;
}
.job-search-form .input-wrap input[type='search'] {
    margin: 0.5rem 0 0;
}
.job-search-form .input-wrap input[type='search'],
.job-search-form .input-wrap .custom-multichk {
    border: 1px solid #acb5bd;
    outline: 2px solid transparent; /* Default transparent outline */
    outline-offset: 2px;
    position: relative;
    transition:
        box-shadow 0.2s ease-in-out,
        outline 0.2s ease-in-out;
}
.job-search-form .input-wrap input[type='search']:focus,
.job-search-form .input-wrap .custom-multichk:focus {
    outline: 2px solid #74c2df;
    box-shadow: 2px 2px 6px rgba(33, 36, 41, 0.75); /* Box-shadow effect */
    transform: translate(-1px, -1px); /* Slight shift for shadow */
}

.job-search-form .input-wrap input[type='checkbox'] {
    outline: 2px solid transparent;
    outline-width: 2px;
    outline-offset: 2px;
}
.job-search-form .input-wrap input[type='checkbox']:focus {
    outline: 2px solid #74c2df;
}
.job-search-form fieldset {
    border: none;
    padding: 0.5rem 0 0;
    margin: 0;
}
.job-search-form fieldset legend {
    padding: 0;
    border: none;
}
.job-search-form fieldset label {
    color: #4f4f4f;
    font-size: 1.6rem;
    cursor: pointer;
    text-transform: none;
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 0;
    letter-spacing: 0;
}
.job-search-form .input-wrap-submit {
    text-align: right;
}
.job-search-form .input-wrap-submit .search-submit {
    outline: 2px solid transparent;
    outline-width: 2px;
    outline-offset: 2px;
}
.job-search-form .input-wrap-submit .search-submit:focus-visible {
    outline: 2px solid #74c2df;
}
.job-search-form select {
    border: 1px solid #acb5bd;
}
@media (min-width: 768px) {
    .job-search-form .input-wrap-submit .search-submit {
        margin-bottom: 0;
        width: 100%;
        padding: 1.7rem 2rem;
        font-size: clamp(16px, 2vw, 18px);
        line-height: 1.8rem;
    }
}
@media (min-width: 1240px) {
    .job-search-form form {
        gap: 3.8rem;
    }
}

/*mobile job filter/search*/
.btn-job-search {
    padding: 0.5rem 2rem;
}
.btn-job-search svg {
    vertical-align: bottom;
}

.btn-job-filter {
    padding: 1.5rem 2rem;
    text-transform: uppercase;
    letter-spacing: 0.075rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;
}
.btn-job-filter:disabled {
    color: #c81330;
    border-color: #c81330;
    box-shadow: inset 0px 0px 0px 2px #c81330;
}
.btn-job-filter svg {
    vertical-align: bottom;
}

.filter-close {
    text-align: right;
    margin-top: 2rem;
}

.filter-button {
    background: none;
    border: none;
}
.filter-button svg {
    stroke: #fff;
}
.filter-button .first-line {
    transform: rotate(45deg) translate(6px, -13px);
}
.filter-button .second-line {
    transform: rotate(-45deg) translate(-12px, -1px);
}

.job-filter-active {
    overflow: hidden;
}
.job-filter-active .sec-job-search {
    position: fixed;
    top: 0;
    right: 0;
    display: block;
    width: 90vw;
    height: 100vh;
    z-index: 101;
}
@media (max-width: 767px) {
    .job-filter-active .job-results__overlay {
        background-color: rgba(0, 0, 0, 0.8);
        display: block;
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 10;
    }
}

@media (min-width: 768px) {
    .sec-job-search {
        padding: 0;
    }
    .sec-job-search,
    .custom-multichk {
        display: block;
    }
    .job-search-form {
        padding-top: 4.2rem;
        padding-bottom: 4.9rem;
    }
    .job-search-form form {
        display: flex;
        flex-direction: row;
        gap: 2rem;
        justify-content: center;
        align-items: end;
    }
    .job-search-form .select-hide-desktop {
        display: none;
    }
    .job-search-form .input-wrap {
        margin: 0;
        justify-content: center;
        display: inline-block;
        align-self: flex-end;
    }
    .job-search-form .input-wrap + .input-wrap {
        margin-left: 0;
        margin-right: 0;
    }
    .job-search-form .input-wrap input[type='text'],
    .job-search-form .input-wrap .custom-multichk {
        font-size: 1.8rem;
    }
    .job-search-form .input-wrap input[type='search'] {
        font-size: 1.8rem;
    }
    .job-search-form .input-wrap.input-wrap-submit {
        text-align: left;
        max-width: 180px;
    }
    .custom-multichk {
        font-size: 1.8rem;
        line-height: 2.6rem;
    }
    .custom-multichk.custom-multichk-cat {
        min-width: 22rem;
    }
    .custom-multichk.custom-multichk-state {
        min-width: 18rem;
    }
    .custom-multichk.custom-multichk-city {
        min-width: 18rem;
    }
    .btn-job-search,
    .btn-job-filter,
    .filter-close {
        display: none;
    }
    .job-filter-active {
        overflow: auto;
    }
    .job-filter-active .sec-job-search {
        position: relative;
        display: block;
        width: auto;
        height: auto;
        z-index: 1;
    }
    .pagination-details {
        font-size: 1.2rem;
        font-weight: 700;
        text-transform: uppercase;
    }
    li.job-card.active::after {
        height: 0.5rem;
    }
    .job-detail-column {
        display: inline-block;
        max-width: 680px;
        margin: 3rem auto 0;
    }
    .job-detail-column p {
        font-size: 1.7rem;
    }
    .job-list-details {
        text-align: left;
    }
    .back-to-search-results {
        display: none;
    }
    .detail-active .job-detail-column {
        display: inline-block;
        position: relative;
        height: auto;
    }
    .detail-active .job-results-column,
    .detail-active .row-results-meta {
        display: block;
    }
}
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/*
* RELATED JOBS
* use: Apply TY 
*/
.sec-related-jobs ul {
    margin-left: 0;
    list-style-type: none;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/*
* JOB RESULTS
* use: Job Results 
*/
.loading-gif {
    display: none;
}

.section-search-results {
    background-color: #f2fafc;
    position: relative;
}
.section-search-results .container {
    position: relative;
}
.section-search-results ul {
    list-style-type: none;
    margin-left: 0;
}

li.job-card {
    border: 0.5px solid #c4c4c4;
    background-color: #fff;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    cursor: pointer;
    position: relative;
    transition:
        box-shadow 0.2s ease-in-out,
        outline 0.2s ease-in-out;
}
li.job-card .job-title {
    text-transform: initial;
    font-size: 2.4rem;
}
li.job-card a {
    text-decoration: none;
    display: block;
    margin-bottom: 3.5rem;
    line-height: 1.25;
}
li.job-card::after {
    content: '';
    width: 100%;
    height: 0rem;
    background-color: #c81330;
    bottom: 0;
    left: 0;
    display: block;
    position: absolute;
    z-index: 1;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
li.job-card:hover::after,
li.job-card:focus::after {
    height: 0.25rem;
}
li.job-card:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
li.job-card:focus-visible {
    outline: 2px solid #2f80ed;
}

.job-meta {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.job-meta span {
    display: inline-block;
    justify-content: center;
}
.job-meta span + span {
    margin-left: 1rem;
}

.job_results__pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
}
.job_results__pagination .btn-next,
.job_results__pagination .btn-prev {
    background-color: transparent;
    border: none;
    font-size: 1.6rem;
    color: #c81330;
    text-decoration: underline;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12rem;
}
.job_results__pagination .btn-next.disabled,
.job_results__pagination .btn-prev.disabled {
    color: #000;
    text-decoration: none;
}
.job_results__pagination .btn-next:hover:not(.disabled),
.job_results__pagination .btn-next:focus:not(.disabled),
.job_results__pagination .btn-prev:hover:not(.disabled),
.job_results__pagination .btn-prev:focus:not(.disabled) {
    text-decoration: none;
}
.job_results__pagination .pagination {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 0;
}
.job_results__pagination .pagination li {
    display: inline-block;
    margin: 0 0.5rem;
}
.job_results__pagination .pagination ul {
    margin: 0;
}
.job_results__pagination .pagination span {
    font-family: Arial, sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
}
.job_results__pagination .pagination a {
    display: block;
    text-decoration: underline;
    font-family: Arial, sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
}
.job_results__pagination .pagination a:hover,
.job_results__pagination .pagination a:focus {
    text-decoration: none;
}

.job-list-details {
    text-align: right;
}

.no-jobs-found-block {
    margin-top: 3rem;
}

.results-loading .job-list,
.results-loading .job-list-details,
.results-loading .sec-job-detail,
.results-loading .sec-job-apply,
.results-loading .job-search-button-container,
.results-loading .no-jobs {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    filter: blur(5px);
    opacity: 0.5;
}
.results-loading li.job-card:hover::after {
    height: 0;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/*
* JOB DETAILS
* use: Results/Job Details
*/
.sec-job-detail {
    padding-top: 2rem;
    padding-bottom: 0;
    margin-bottom: 6rem;
}
.sec-job-detail h3 {
    display: block;
    text-align: center;
}
.sec-job-detail p,
.sec-job-detail ul,
.sec-job-detail ol,
.sec-job-detail a {
    font-size: 1.7rem;
}

.job-detail-meta {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}
.job-detail-meta span {
    display: inline-block;
    margin-left: 0;
    justify-content: center;
    align-self: center;
    font-size: 1.2rem;
    text-transform: uppercase;
    font-weight: 700;
}
.job-detail-meta span + span {
    margin-left: 1.5rem;
}
.job-detail-meta a {
    text-transform: none;
}
.job-detail-meta .apply-jump {
    width: 100%;
    text-align: center;
    margin-top: 2rem;
}

.back-to-search-results {
    margin: 1.5rem 0;
}
.back-to-search-results a {
    text-transform: uppercase;
    text-decoration: underline;
    font-weight: 600;
    letter-spacing: 0.12rem;
    display: inline-block;
}

.job-detail {
    margin-top: 4rem;
    font-size: 1.7rem;
}
.job-detail h1,
.job-detail h2,
.job-detail h3,
.job-detail h4,
.job-detail h5,
.job-detail h6 {
    font-size: 1.7rem;
    line-height: 2.4rem;
    color: #4f4f4f;
}

@media (min-width: 1030px) {
    .custom-multichk.custom-multichk-cat {
        min-width: 25rem;
    }
    .custom-multichk.custom-multichk-state {
        min-width: 20rem;
    }
    .job-detail-meta {
        flex-wrap: nowrap;
    }
    .job-detail-meta .apply-jump {
        width: auto;
        text-align: left;
        margin-top: 0;
    }
}
@media (min-width: 1240px) {
    .sec-job-apply {
        padding: 3rem 7rem 7rem;
    }
}
.sec-job-apply {
    padding: 3rem 2rem 6rem;
    border: 1px solid #c4c4c4;
    margin-top: 6rem;
}
.sec-job-apply .gform_wrapper .h2 {
    text-transform: none;
}

@media (max-width: 767px) {
    .job-detail-column {
        display: none;
    }
    .detail-active .job-detail-column {
        display: block;
        background-color: #f2fafc;
    }
    .detail-active .job-results-column,
    .detail-active .row-results-meta {
        display: none;
    }
}
/*.detail-loading {
    .sec-job-detail,
    .back-to-search-results,
    .sec-job-apply {
        @include mx.filter(blur(5px));
        opacity: 0.5;
    }
    //.sec-job-detail {
        //animation: blur-in .3s;
    //}
}*/
@keyframes blurIn {
    0% {
        filter: blur(10px);
        opacity: 0;
    }
    100% {
        filter: blur(0);
        opacity: 1;
    }
}
@keyframes blurOut {
    0% {
        filter: blur(0);
        opacity: 1;
    }
    100% {
        filter: blur(10px);
        opacity: 0;
    }
}
.blur-in {
    animation: blurIn 0.3s forwards;
    will-change: filter, opacity;
    transform: translateZ(0);
}

.blur-out {
    animation: blurOut 0.3s forwards;
    will-change: filter, opacity;
    transform: translateZ(0);
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.loading-icon-wrapper {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.loading-icon-wrapper svg {
    width: 100px;
    height: 100px;
    background-color: transparent;
    animation-name: spin;
    animation-duration: 1500ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    /* transform: rotate(3deg); */
    /* transform: rotate(0.3rad);/ */
    /* transform: rotate(3grad); */
    /* transform: rotate(.03turn);  */
}

.sec-placeholder {
    opacity: 0.8;
}
.sec-placeholder div {
    width: 100%;
    height: 3.6rem;
    margin-bottom: 3rem;
}
.sec-placeholder div + div {
    background-color: #bdbdbd;
    margin-bottom: 1.5rem;
    height: 2rem;
}
.sec-placeholder div + div + div {
    width: 80%;
}
.sec-placeholder div + div + div + div {
    width: 90%;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */