/****************************** STARTING Q *********************************/
/*                        Kacheln auf der Startseite                      */

div#q_container {
    background      : transparent;
    border          : none; //1px solid #000;
    display         : flex;
    flex-wrap       : wrap;
    justify-content : center;
}

div.q {
    width         : 479px;
    height        : 272px;
    max-width     : 100%;
    margin        : 0;
    padding       : 0;
    border        : 0;
    border-bottom : 2px solid white;
    position      : relative;
    overflow      : hidden;
    float         : left;
}

div.q:nth-of-type(2n+1) {
    border-right : 2px solid white;
}

div.q img {
    position      : absolute;
    top           : 0;
    left          : 0;
    z-index       : 9;
    max-width     : 479px;
    max-height    : 272px;
    margin        : 0;
    padding       : 0;
    border        : 0;
    border-bottom : 2px solid white;
}

/**
 * Layer
 */
div.q div.q_transparent_oben {
    position : absolute;
    top      : 0;
    height   : 64px;
    left     : 0;
    width    : 100%;
    z-index  : 99;
}

div.q div.q_transparent_unten {
    position : absolute;
    bottom   : 0;
    height   : 64px;
    left     : 0;
    width    : 100%;
    z-index  : 99;
}

div.q #q1_transparent {
    background : url(../images/start_verlauf_q1.png);
    opacity    : 0.7;
}

div.q #q1_transparent:hover {
    opacity : 1.0;
}

div.q #q2_transparent {
    background : url(../images/start_verlauf_q2.png);
    opacity    : 0.7;
}

div.q #q2_transparent:hover {
    opacity : 1.0;
}

div.q #q3_transparent {
    background : url(../images/start_verlauf_q3.png);
    opacity    : 0.7;
}

div.q #q3_transparent:hover {
    opacity : 1.0;
}

div.q #q4_transparent {
    background : url(../images/start_verlauf_q4.png);
    opacity    : 0.7;
}

div.q #q4_transparent:hover {
    opacity : 1.0;
}

/**
 * Text
 */
div.q div.q_text {
    position       : absolute;

    text-align     : center;
    color          : white;
    background     : transparent;
    opacity        : 1.0;
    height         : 64px;
    left           : 0;
    width          : 100%;
    padding        : 0;
    font-weight    : 400;
    text-transform : lowercase;
    z-index        : 999;
    line-height    : 64px;
    font-size      : 24px;
}

div.q div.q_text:hover {
    font-weight : 700;
    /* color: #ccc; */
}

div.q div.q_text.oben {
    top : 0;
}

div.q div.q_text.unten {
    bottom : 0;
}

div.q div.q_text.links {
    /*text-align  : left;*/
}

div.q div.q_text.rechts {
    /*text-align  : right;*/
}

div.q div.q_text_rechts strong {
    color : #fff;
}