.noresults {
    background-color:#fff;
    padding:2em;
}

p:last-of-type {
    margin-bottom:0;
}

.hero {
    padding:2em;
    margin-bottom:1em;
}

    .hero h1 {
        font-size:3.5em;
        font-weight:200;
        line-height:1;
        margin:0;
    }

.all-jobs {
    display:grid;
    grid-template-columns: 3fr 1fr;
    grid-gap:1em;
}

.control {
    float:left;
    clear:none;
    margin-bottom:1em;
    padding:2em;
    border:1px solid #fff;
}

    .checkbox {
        float:left;
        margin-right:1.5em;
        display: block;
        position: relative;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .checkbox label {
        float:left;
        font-size:1em;
        margin:0;
        color:#fff;
    }

    .checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .checkmark {
        position: relative;
        float: left;
        margin-right: 0.75em;
        height: 20px;
        width: 20px;
        background-color: transparent;
        cursor: pointer;
        border:1px solid var(--pink);
    }

    .checkbox:hover input ~ .checkmark {
        border:1px solid var(--pink);
    }

    .checkbox input:checked ~ .checkmark {
        background-color:var(--pink);
    }

    .checkmark:after {
        content: "";
        position: absolute;
        display:none;
    }

    .checkbox input:checked ~ .checkmark:after {
        display: block;
    }

    .checkbox .checkmark:after {
        left: 31%;
        top: 10%;
        width: 5px;
        height: 10px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .checkbox p {
        font-size:1.2em;
        margin-bottom:0;
        cursor: pointer;
        float: left;
    }

        .checkbox p span {
        opacity:0.4;
        }

.jobs-list {
    display:grid;
    grid-gap:1em;
}

.jobs-list > a {
    display:grid;
    grid-template-columns: 120px 1fr;
    text-decoration: none;
    position:relative;
}

    .jobs-list > a .text {
        padding:2em;
        background-color:#fff;
    }

    .jobs-list .heading {
        transition: all 0.25s ease-out;
    }

    .jobs-list > a:hover .heading {
        background-color:#eee;
        color:#333;
    }

    .jobs-list .heading {
        margin-bottom:0.5em;
    }

    .cat {
        margin:0;
        font-size:1.1em;
    }

    .type {
        position:Absolute;
        right:2em;
        top:0;
        font-size:1em;
        text-transform: uppercase;
        color:#fff;
        padding:0.25em 0.75em;
    }

        .type.type1 {
            background-color:rgb(255, 0, 0);
        }

        .type.type2 {
            background-color:rgb(255, 115, 0);
        }

        .type.type3 {
            background-color:rgb(255, 213, 0);
            color:#333;
        }

        .type.type4 {
            background-color:rgb(91, 182, 60);
        }

        .type.type5 {
            background-color:rgb(38, 204, 210);
        }

        .type.type6 {
            background-color:rgb(0, 68, 255);
        }

        .type.type7 {
            background-color:rgb(149, 25, 225);
        }

.cantview,
.preview {
    background-color:#ccc;
    padding:2em;
}

.preview {
    margin-bottom:1em;
}

    .preview img {
        float:left;
        width:3.5em;
        margin-right:1em;
    }

    .preview p {
        float:left;
        margin:0.6em 0 0 0;
    }

    .desc,
    .apply {
        padding:2em;
        background-color:#fff;
        margin-bottom:1em;
    }

        .desc > h2 {
            font-size:1.5em;
            color:var(--pink);
        }

    .apply {
        margin:0;
    }

        .apply h2 {
            font-size:1.5em;
            color:var(--pink);
            float:left;
            margin:0;
            line-height: 1;
        }

        .apply .pink-btn {
            float:right;
            width:150px;
        }

aside div {
    float:left;
    clear:left;
    width:100%;
    margin-bottom:1em;
}

    aside .join {
        background-color:#fff;
        padding:2em;
    }

    aside .join .pink-btn {
        margin-top:1em;
    }

    aside div:last-of-type {
        margin-bottom:0;
    }

@media screen and (max-width:1099px) {
    .all-jobs,
    .job {
        grid-template-columns: 1fr 250px;
    }
}

@media screen and (max-width:999px) {
    .jobs-list > a {
        grid-template-columns: 140px 1fr;
    }
}

@media screen and (max-width:899px){
    .control {
        display:grid;
        grid-template-columns: repeat(4,1fr);
        grid-gap:1em;
    }

        .checkbox {
            margin:0;
        }
}

@media screen and (max-width:699px){
    .all-jobs,
    .job {
        grid-template-columns: 1fr;
    }
    
    .control {
        grid-template-columns: repeat(3,1fr);
    }
}

@media screen and (max-width:499px){
    
    .hero h1 {
        font-size:3em;
    }

    .control {
        grid-template-columns: repeat(2,1fr);
    }

    .jobs-list > a {
        grid-template-columns: 0px 1fr;
    }
}

@media screen and (max-width:359px){
    .deet h3,
    .deet p {
        padding:0.75em;
    }
}