#subjectLine {
    padding-bottom: 50px;
    min-height: 220px;
}

    #subjectLine .subjectBtn {
        display: inline-block;
        position: relative;
        width: 220px;
        height: 220px;
        font-weight: 800;
        font-size: 20px;
        vertical-align: top;
        background-position-x: center;
        background-position-y: 54px;
        background-size: 100px;
        transition: background-size 0.5s ease-in;
        -moz-transition: background-size 0.5s ease-in;
        -ms-transition: background-size 0.5s ease-in;
        -o-transition: background-size 0.5s ease-in;
        -webkit-transition: background-size 0.5s ease-in;
    }

        #subjectLine .subjectBtn.blue {
            background-image: url(/images/subjects/anatomi.png);
            -webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
            animation: fadein 0.5s;
        }

        #subjectLine .subjectBtn.yellow {
            background-image: url(/images/subjects/biokemi.png);
            -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
            animation: fadein 1s;
            background-size: 86px;
        }

        #subjectLine .subjectBtn.red {
            background-image: url(/images/subjects/ernaering.svg);
            -webkit-animation: fadein 1.5s; /* Safari, Chrome and Opera > 12.1 */
            animation: fadein 1.5s;
        }

        #subjectLine .subjectBtn.pink {
            background-image: url(/images/subjects/farmakologi.png);
            background-size: 86px;
            -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
            animation: fadein 2s;
        }

        #subjectLine .subjectBtn.orange {
            background-image: url(/images/subjects/laegemiddel.png);
            -webkit-animation: fadein 2.5s; /* Safari, Chrome and Opera > 12.1 */
            animation: fadein 2.5s;
        }

        #subjectLine .subjectBtn.purple {
            background-image: url(/images/subjects/mikrobiologi.png);
            -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
            animation: fadein 3s;
            background-size: 86px;
        }

        #subjectLine .subjectBtn.paleblue {
            background-image: url(/images/subjects/psykologi.png);
            -webkit-animation: fadein 3.5s; /* Safari, Chrome and Opera > 12.1 */
            animation: fadein 3.5s;
            background-size: 72px;
        }

        #subjectLine .subjectBtn.green {
            background-image: url(/images/subjects/sygdom.png);
            -webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */
            animation: fadein 4s;
        }

        #subjectLine .subjectBtn .name {
            position: absolute;
            bottom: 40px;
            font-size: 20px;
            text-align: center;
            width: 100%;
        }

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@media (hover: hover) {
    #subjectLine .subjectBtn:hover {
        background-color: white;
        box-shadow: 0 0 57px 7px rgba(0, 0, 0, 0.05);
        border-radius: 4px;
        cursor: pointer;
    }

    @media (min-width: 1000px) {
        #subjectLine .subjectBtn:hover {
            background-size: 110px;
        }

        #subjectLine .subjectBtn.pink:hover {
            background-size: 96px;
        }

        #subjectLine .subjectBtn.purple:hover {
            background-size: 96px;
        }

        #subjectLine .subjectBtn.yellow:hover {
            background-size: 96px;
        }

        #subjectLine .subjectBtn.paleblue:hover {
            background-size: 82px;
        }
    }
}