/* ********* DESKTOP ***************************************************************************************/
/* ********* DESKTOP ***************************************************************************************/
/* ********* DESKTOP ***************************************************************************************/
@media only screen and (min-width: 55em) {
    /* ************* WORK ************************* */
    form {
        display: flex;
    }

    section.input-section {
        flex: 45%;
    }

    section.radio div {
        display: flex;
        padding: 0 1em;
    }

        section.radio div section {
            flex: 50%;
        }

            section.radio div section div {
                display: block;
                text-align: left;
            }

    .college-radio {
        margin-right: -1em;
    }

    .cradios {
        border-right: black .5px solid;
        margin-left: 1em;
    }


    section.radio {
        text-align: center;
    }

    .work label {
        font-size: .75em;
    }

    section.credits {
        background-color: white;
        background-image: url(../img/background-tile1.png);
        border-radius: 7px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        margin: 1.75em 2em;
        padding: 1em 2em;
        text-align: center;
        margin-top: -.25em;
    }

    .work h3 {
        padding-bottom: .75em;
    }

    .credits input {
        font-size: 1.5em;
        text-align: center;
    }

    .credits label {
        padding-left: 1em;
    }

    .work.credits p {
        font-style: italic;
        padding: .75em 2em;
        line-height: 1.25em;
    }


    section.output-section {
        flex: 30%;
        background-color: black;
        color: white;
        margin-left: 2em;
        padding: 0;
    }

    .work.output-section h3 {
        background-color: rgb(192,0,0);
        color: white;
        padding: .5em 0;
    }

    .work.output-section p {
        font-style: italic;
        padding: 1em 4em;
        text-align: center;
        line-height: normal;
    }

        .work.output-section p:first-of-type {
            padding-top: 5em;
        }

    .work .clock-img {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .work img {
        display: block;
        max-width: 40%;
        padding-top: 1em;
    }

    .output {
        display: flex;
        justify-content: center;
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .work-hours {
        display: flex;
        height: 2em;
        width: 5em;
        color: rgb(192,0,0);
        font-weight: bold;
        font-size: 1.5em;
        align-items: center;
        justify-content: center;
    }

    .work-hours {
        background-color: white;
        border: solid 1px rgb(192,0,0);
    }
}