/* ============================================================================
   Card: Mecenat
   ========================================================================= */

.card.variant-0 {
    background: #e6e7e8;
}

    /* Gold card bg */
    .card.variant-0.gold {
        background: url('assets/capture-e32de73b6f91.png');
        background-size: 100%;
    }

    /* Mecenat logo */
    .card.variant-0 .mecenat-logo {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 225px; /* image is double size */
        height: auto;
    }

    /* Eyca logo */
    .card.variant-0.eyca .eyca-logo {
        position: absolute;
        top: 16px;
        right: 14px;
        width: 120px; /* image is double size */
        height: auto;
    }

    /* Person info */
    .card.variant-0 .person-info {
        position: absolute;
        bottom: 28px;
        left: 15px;
    }

        .card.variant-0 .person-info .cardnumber {
            float: left;
            margin: 0 5px 5px 0;
        }

        .card.variant-0 .person-info .firstname,
        .card.variant-0 .person-info .lastname {
            font-size: 20px;
            clear: both;
            width: 330px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .card.variant-0 .person-info .birthdate {
            font-size: 18px;
            margin-top: 5px;
        }

    /* Student info */
    .card.variant-0 .student-info {
        position: absolute;
        right: 15px;
        top: 10px;
        font-size: 11px;
        line-height: 14px;
        text-align: right;
    }

        .card.variant-0 .student-info .student-id,
        .card.variant-0 .student-info .university,
        .card.variant-0 .student-info .term,
        .card.variant-0 .student-info .union {
            width: 190px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    .card.variant-0.eyca .student-info {
        top: 70px;
    }

    /* Valid info */
    .card.variant-0 .valid-info {
        position: absolute;
        right: 16px;
        bottom: 142px;
        text-align: center;
    }

        .card.variant-0 .valid-info .valid-text {
            font-size: 8px;
            line-height: 12px;
        }

        .card.variant-0 .valid-info .valid-date {
            font-size: 19px;
        }



/* ============================================================================
   Card: KTH och THS
   ========================================================================= */

.card.variant-1 {
    background: url('assets/capture-925957d10704.png');
    background-size: 100%;
}

    .card.variant-1.ht.member {
        background: url('assets/capture-3567fa9896a4.png');
        background-size: 101%;
        color: #fff;
    }

    .card.variant-1.vt.member {
        background: url('assets/capture-3567fa9896a4.png');
        background-size: 101%;
        color: #fff;
    }

    /* Person info */
    .card.variant-1 .person-info {
        position: absolute;
        bottom: 16px;
        left: 20px;
    }

        .card.variant-1 .person-info .cardnumber {
            float: left;
            margin: 0 5px 5px 0;
        }

        .card.variant-1 .person-info .firstname,
        .card.variant-1 .person-info .lastname {
            font-size: 20px;
            clear: both;
            width: 330px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .card.variant-1 .person-info .birthdate,
        .card.variant-1 .person-info .text1 {
            margin-top: 5px;
            font-size: 18px;
        }

    /* Student info */
    .card.variant-1 .student-info {
        position: absolute;
        right: 15px;
        top: 10px;
        font-size: 11px;
        line-height: 14px;
        text-align: right;
    }

        .card.variant-1 .student-info .student-id,
        .card.variant-1 .student-info .term,
        .card.variant-1 .student-info .text2 {
            width: 190px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    /* Valid info */
    .card.variant-1 .valid-info {
        position: absolute;
        right: 9px;
        bottom: 142px;
        text-align: center;
    }

        .card.variant-1 .valid-info .valid-text {
            font-size: 8px;
            line-height: 12px;
        }

        .card.variant-1 .valid-info .valid-date {
            font-size: 19px;
        }



/* ============================================================================
   Card: Mecenat
   ========================================================================= */

.card.variant-2 {
    background: #e6e7e8;
}

    /* Gold card bg */
    .card.variant-2.gold {
        background: url('assets/capture-e32de73b6f91.png');
        background-size: 100%;
    }

    /* Mecenat logo */
    .card.variant-2 .mecenat-logo {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 225px; /* image is double size */
        height: auto;
    }

    /* Eyca logo */
    .card.variant-2.eyca .eyca-logo {
        position: absolute;
        top: 16px;
        right: 14px;
        width: 120px; /* image is double size */
        height: auto;
    }

    /* Person info */
    .card.variant-2 .person-info {
        position: absolute;
        bottom: 28px;
        left: 15px;
    }

        .card.variant-2 .person-info .cardnumber {
            float: left;
            margin: 0 5px 5px 0;
        }

        .card.variant-2 .person-info .firstname,
        .card.variant-2 .person-info .lastname {
            font-size: 20px;
            clear: both;
            width: 330px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .card.variant-2 .person-info .birthdate {
            font-size: 18px;
            margin-top: 5px;
        }

    /* Student info */
    .card.variant-2 .student-info {
        position: absolute;
        right: 15px;
        top: 10px;
        font-size: 11px;
        line-height: 14px;
        text-align: right;
    }

        .card.variant-2 .student-info .student-id,
        .card.variant-2 .student-info .university,
        .card.variant-2 .student-info .term,
        .card.variant-2 .student-info .union {
            width: 190px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    .card.variant-2.eyca .student-info {
        top: 70px;
    }

    /* Valid info */
    .card.variant-2 .valid-info {
        position: absolute;
        right: 16px;
        bottom: 142px;
        text-align: center;
    }

        .card.variant-2 .valid-info .valid-text {
            font-size: 8px;
            line-height: 12px;
        }

        .card.variant-2 .valid-info .valid-date {
            font-size: 19px;
        }



/* ============================================================================
   Card: KTH och THS
   ========================================================================= */

.card.variant-3 {
    background: url('assets/capture-925957d10704.png');
    background-size: 100%;
}

    .card.variant-3.ht.member {
        background: url('assets/capture-3567fa9896a4.png');
        background-size: 101%;
        color: #fff;
    }

    .card.variant-3.vt.member {
        background: url('assets/capture-3567fa9896a4.png');
        background-size: 101%;
        color: #fff;
    }

    /* Person info */
    .card.variant-3 .person-info {
        position: absolute;
        bottom: 16px;
        left: 20px;
    }

        .card.variant-3 .person-info .cardnumber {
            float: left;
            margin: 0 5px 5px 0;
        }

        .card.variant-3 .person-info .firstname,
        .card.variant-3 .person-info .lastname {
            font-size: 20px;
            clear: both;
            width: 330px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .card.variant-3 .person-info .birthdate,
        .card.variant-3 .person-info .text1 {
            margin-top: 5px;
            font-size: 18px;
        }

    /* Student info */
    .card.variant-3 .student-info {
        position: absolute;
        right: 15px;
        top: 10px;
        font-size: 11px;
        line-height: 14px;
        text-align: right;
    }

        .card.variant-3 .student-info .student-id,
        .card.variant-3 .student-info .term,
        .card.variant-3 .student-info .text2 {
            width: 190px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    /* Valid info */
    .card.variant-3 .valid-info {
        position: absolute;
        right: 9px;
        bottom: 142px;
        text-align: center;
    }

        .card.variant-3 .valid-info .valid-text {
            font-size: 8px;
            line-height: 12px;
        }

        .card.variant-3 .valid-info .valid-date {
            font-size: 19px;
        }