/*-----------------------------------------------------*/
/*--- R E S P O N S I V E   B R E A K   P O I N T S ---*/
/*-----------------------------------------------------*/

@media (max-width: 1023px) {
    html { font-size: calc((1rem / 16) * 0.7); }

    .desktop-only { display: none !important; }
}

@media (min-width: 1024px) {
    html { font-size: calc((1rem / 16) * 0.6); }

    .mobile-only { display: none !important; }
}

@media (min-width: 1280px) {
    html { font-size: calc((1rem / 16) * 0.8); }
}

@media (min-width: 1440px) {
    html { font-size: calc((1rem / 16) * 0.9); }
}

@media (min-width: 1600px) {
    html { font-size: calc(1rem / 16); }
}

@media (min-width: 1920px) {
    html { font-size: calc((1rem / 16) * 1.1); }
}


/*-------------------*/
/*--- M O B I L E ---*/
/*-------------------*/

@media (max-width: 1023px) {
    dialog.dialog {
        width: 100%;
        max-width: 90%;
    }

    ul.form > li {
        flex-direction: column;
        align-items: flex-start;
    }

    .basic-page {
        padding: 0;
        border: none;
    }

    .basic-page img {
        max-width: 100%;
        width: auto;
    }

    header {
        min-height: 82rem;
        height: auto;
    }

    header div {
        flex-wrap: wrap;
        padding: 30rem;
    }

    header div nav {
        flex: 1 100%;
        order: 3;
        display: none;
        flex-direction: column;
    }

    header div nav ul {
        flex-direction: column;
        height: auto;
        margin-top: 30rem;
    }

    header div ul li a,
    header div ul:first-child li a.active {
        display: block;
        padding: 10rem;
        font-size: var(--m);
    }

    header div ul:last-child li a,
    header div ul:last-child li:last-child a {
        padding-left: 36rem;
        background-position: center left 10rem;
    }

    header div .mobile-menu-button {
        position: relative;
        width: 45rem;
        height: 30rem;
        background-color: transparent;
    }

    header div .mobile-menu-button span {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background-color: rgb(var(--gold));
        transition: 0.25s ease-in-out;
    }

    header div .mobile-menu-button span:nth-child(2),
    header div .mobile-menu-button span:nth-child(3) {
        top: 50%;
        transform: translateY(-50%);
    }

    header div .mobile-menu-button span:last-child {
        top: unset;
        bottom: 0;
    }

    header div .mobile-menu-button.open span:first-child {
        top: 50%;
        transform: translateY(-50%);
        opacity: 0;
    }

    header div .mobile-menu-button.open span:nth-child(2) {
        transform: rotate(45deg);
    }

    header div .mobile-menu-button.open span:nth-child(3) {
        transform: rotate(-45deg);
    }

    header div .mobile-menu-button.open span:last-child {
        bottom: 50%;
        transform: translateY(-50%);
        opacity: 0;
    }


    /*---------------*/
    /*--- M A I N ---*/
    /*---------------*/
    /*--- page specific (home) ---*/
    #home .home {
        padding: 0;
        flex-direction: column;
    }

    #home .home .button.-large, #home .home .button.-small {
        padding: 15rem 30rem;
    }


    /*-----------------------------*/
    /*--- F I L T E R S   B A R ---*/
    /*-----------------------------*/
    .filters {
        flex-wrap: wrap;
        height: auto;
    }

    .filters h1 {
        order: 1;
        margin: 0;
        font-size: var(--m);
        white-space: wrap;
    }

    .filters a {
        min-width: 36rem;
    }

    .filters fieldset {
        flex: 1 100%;
        order: 2;
        min-width: initial;
    }

    .filters fieldset:first-of-type {
        order: 3;
    }

    #breadcrumbs li {
        transition: all 0.3s ease;
        overflow: visible;
    }

    #breadcrumbs li:first-of-type {
        flex: 0 0 12.5%;
    }

    #breadcrumbs li:nth-of-type(even):not(:first-of-type) {
        margin-left: -40rem;
    }

    #breadcrumbs li.active:not(:first-of-type) {
        flex: 1 1 auto;
        max-width: 220rem;
        overflow: visible;
    }

    #breadcrumbs li:first-of-type a {
        position: relative;
        color: transparent;
    }

    #breadcrumbs li:first-of-type a::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 30rem;
        height: 30rem;
        background: url("/images/icons/home.svg") center center / 30rem no-repeat;
        transform: translate(-50%, -50%);
        z-index: 50;
    }

    #breadcrumbs li a span {
        /*padding:10rem 20rem;*/
        font-size: var(--xs);
    }

    #breadcrumbs li:first-of-type a span {
        padding: 0;
    }

    .category-list .category {
        width: 100%;
    }

    .job-list .job {
        padding: 30rem;
    }

    .job-list .job ul {
        display: block;
    }

    .job-list .job ul li {
        white-space: wrap;
    }

    .job-list .job ul li:not(:first-child)::before {
        content: none;
    }

    .job-list .job div {
        margin-top: 30rem;
        margin-right: 0;
    }

    .job-list .job.highlighted p {
        margin-top: 15rem;
    }

    .job-list .job img,
    .job-list .job.highlighted img {
        position: initial;
        top: 0;
        right: 0;
        max-width: 40%;
        width: auto;
        max-height: 100%;
        margin-top: 30rem;
        transform: unset;
    }

    .job-list .job h2,
    .job-list .job.highlighted h2 {
        margin-right: 0;
    }

    .job-details {
        padding: 30rem 0 0 0;
        border: none;
    }

    .job-details aside {
        max-width: none;
        margin-top: 60rem;
        padding: 0;
    }

    .job-details aside .button {
        width: 100%;
        margin-left: 0;
    }

    .job-details .description img {
        width: 100% !important;
        height: auto !important;
    }

    .job-cta-buttons {
        flex-wrap: wrap;
    }

    #banners .banner-list {
        margin-top: 60rem;
    }

    #banners .banner-list .banner {
        width: 100%;
    }

    .jobs-by-company {
        flex-direction: column-reverse;
        flex-wrap: wrap;
    }

    .jobs-by-company .company-list,
    .jobs-by-company .company-jump-links {
        position: relative;
        flex: 1 100%;
    }

    .jobs-by-company .company-jump-links {
        top: 0;
        width: 100%;
    }

    .jobs-by-company .company-jump-links ul li {
        flex: 0 calc((100% - 25rem) / 6);
    }

    .jobs-by-company .company-jump-links ul li a {
        font-size: var(--l);
    }

    .jobs-by-company .company-list ul li {
        width: calc((100% - 40rem) / 3);
    }

    .dja-text {
        text-align: left;
    }

    .dja-text h4 {
        line-height: 1.4;
    }

    .dja-text button{
        display: none;
    }

    .dja-text .dja-toggle {
        top: 30rem;
        right: 0;
    }

    #daily-job-alert-categories .category ul li {
        width: 100%;
    }

    #daily-job-alert-categories .category h2 + .switch {
        position: relative;
        top: auto;
        right: auto;
        margin: 5rem;
    }

    #reviews .reviews .review {
        flex-direction: column;
    }


    footer .bottom {
        flex-wrap: wrap;
    }

    footer .bottom .left,
    footer .bottom .right {
        flex-basis: 100%;
        width: 100%;
    }

    footer .bottom ul {
        flex-wrap: wrap;
    }
}