/*
Bild-Text Modul

Ein klassisches Bild-Text Kombinations Modul mit granularer Konfiguration. Ein
    .imgtxt Block verhält sich ähnlich einem .grid Block, legt den Fokus aber
    stärker auf den darzustellenden Inhalt. So können beispielsweise enhaltene
    Bilder an neun Positionen frei positioniert werden.

Das Bild-Text Modul eignet sich nicht für den Aufbau von komplexen Layouts da
    es sich um den vollen Funktionsumfang zu bieten dem Renderverhalten von
    Tabellen bedient. Für diese Aufgabe ist das leichtgewichtigere Grid Modul
    zu präferieren

Styleguide 3.0
*/

/*
.imgtxt-item

Definiert eine Zelle/Spalte/Begrenzung innerhalb eines .imgtxt Blocks. Bei Bedarf
    können unbegrenzt viele Elemente innerhalb eines Block sitzen. Durch anhängen
    von Modifizierungsklassen an das jeweilige Element kann dessen Breite variiert
    werden.

Durch setzen des Modifizierers m-spans-100 auf dem ersten Element werden für alle
    darauf folgenden .imgtxt-item Elemente sowohl die Breite, als auch sämtliche
    `border`, `padding` und `margin` Angaben auf 0 gesetzt sowie der Inhalt via
    `overflow: hidden;` ausgeblendet

.m-txtcell   - Modifies the default width to be 75% and aligns content left
.m-spans-100 - Das Element hat eine Breite von 100%
.m-spans-90  - Das Element hat eine Breite von 90%
.m-spans-85  - Das Element hat eine Breite von 85%
.m-spans-80  - Das Element hat eine Breite von 80%
.m-spans-75  - Das Element hat eine Breite von 75%
.m-spans-70  - Das Element hat eine Breite von 70%
.m-spans-66  - Das Element hat eine Breite von 66%
.m-spans-60  - Das Element hat eine Breite von 60%
.m-spans-50  - Das Element hat eine Breite von 50%
.m-spans-40  - Das Element hat eine Breite von 40%
.m-spans-33  - Das Element hat eine Breite von 33%
.m-spans-30  - Das Element hat eine Breite von 30%
.m-spans-25  - Das Element hat eine Breite von 25%
.m-spans-20  - Das Element hat eine Breite von 20%
.m-spans-15  - Das Element hat eine Breite von 15%
.m-spans-10  - Das Element hat eine Breite von 10%
.m-topleft   - Positioniert Inhalte oben links
.m-topcenter - Positioniert Inhalte oben mittig
.m-topright  - Positioniert Inhalte oben rechts
.m-centerleft - Positioniert Inhalte mittig links
.m-center    - Positioniert Inhalte komplett mittig
.m-centerright - Positioniert Inhalte mittig rechts
.m-bottomleft - Positioniert Inhalte unten links
.m-bottomcenter - Positioniert Inhalte unten mittig
.m-bottomright - Positioniert Inhalte unten rechts

Markup:
<div class="imgtxt">
    <div class="imgtxt-row">
        <div class="imgtxt-item {$modifiers}">
            <div class="cssguide-helper block inline" style="height:60px;">CSSGuide</div>
        </div>
        <div class="imgtxt-item"></div>
    </div>
</div>

Styleguide 3.0.2

*/
.imgtxt-item {
    display: table-cell;
    vertical-align: top;
    width: auto;
    text-align: center;
}

.imgtxt-item.m-txtcell {
    width: 75%;
    padding: 0 1.3em;
    text-align: left;
}

/* for txtcell items, remove the top margin of the first childelement. don't panic
       if you use a linter and it complains about performance since the universal `*`
       selector is only slow if used as the most right selector, but below only
       matches for first-child elements and doesn't introduce any performance lag
 */
.imgtxt-item.m-txtcell > *:first-child {
    margin-top: 0;
}

.imgtxt.m-vertical .imgtxt-item.m-txtcell {
    padding-top: 1.3em;
}

.imgtxt-item.m-spans-100 {
    width: 100%;
}

.imgtxt-item.m-spans-90 {
    width: 90%;
}

.imgtxt-item.m-spans-85 {
    width: 85%;
}

.imgtxt-item.m-spans-80 {
    width: 80%;
}

.imgtxt-item.m-spans-75 {
    width: 75%;
}

.imgtxt-item.m-spans-70 {
    width: 70%;
}

.imgtxt-item.m-spans-66 {
    width: 66.444%;
}

.imgtxt-item.m-spans-60 {
    width: 60%;
}

.imgtxt-item.m-spans-50 {
    width: 50%;
}

.imgtxt-item.m-spans-40 {
    width: 40%;
}

.imgtxt-item.m-spans-33 {
    width: 33.444%;
}

.imgtxt-item.m-spans-30 {
    width: 30%;
}

.imgtxt-item.m-spans-25 {
    width: 25%;
}

.imgtxt-item.m-spans-20 {
    width: 20%;
}

.imgtxt-item.m-spans-15 {
    width: 15%;
}

.imgtxt-item.m-spans-10 {
    width: 10%;
}

/* if a item has been set to full width, force following items be have a width of zero */
.imgtxt-item.m-spans-100 ~ .imgtxt-item {
    overflow: hidden;
    width: 0;
    margin: 0;
    border: 0 none;
    padding: 0;
}

/* positioning modifiers */
.imgtxt-item.m-topleft {
    text-align: left;
}

.imgtxt-item.m-topcenter {
    text-align: center;
}

.imgtxt-item.m-topright {
    text-align: right;
}

.imgtxt-item.m-centerleft {
    vertical-align: middle;
    text-align: left;
}

.imgtxt-item.m-center {
    vertical-align: middle;
    text-align: center;
}

.imgtxt-item.m-centerright {
    vertical-align: middle;
    text-align: right;
}

.imgtxt-item.m-bottomleft {
    vertical-align: bottom;
    text-align: left;
}

.imgtxt-item.m-bottomcenter {
    vertical-align: bottom;
    text-align: center;
}

.imgtxt-item.m-bottomright {
    vertical-align: bottom;
    text-align: right;
}



/*
.imgtxt

Markiert einen DOM-Knoten als .imgtxt Block. Über Modifizierer Klassen kann das
    Verhalten pro Block manipuliert werden. Ohne Modifizierer Klasse umbrechen
    die Inhalte nie

.m-vertical    - .imgtxt-item Kindknoten ordnen sich vertikal an
.m-breaks-500  - .imgtxt-item Kindknoten umbrechen ab 500 Pixeln Bildschirmbreite
.m-breaks-600  - .imgtxt-item Kindknoten umbrechen ab 600 Pixeln Bildschirmbreite
.m-breaks-700  - .imgtxt-item Kindknoten umbrechen ab 700 Pixeln Bildschirmbreite
.m-breaks-800  - .imgtxt-item Kindknoten umbrechen ab 800 Pixeln Bildschirmbreite
.m-breaks-900  - .imgtxt-item Kindknoten umbrechen ab 900 Pixeln Bildschirmbreite
.m-breaks-1000 - .imgtxt-item Kindknoten umbrechen ab 1000 Pixeln Bildschirmbreite
.m-breaks-1100 - .imgtxt-item Kindknoten umbrechen ab 1100 Pixeln Bildschirmbreite
.m-breaks-1200 - .imgtxt-item Kindknoten umbrechen ab 1200 Pixeln Bildschirmbreite

Markup:
<div class="imgtxt {$modifiers}">
    <div class="imgtxt-row">
        <div class="imgtxt-item">
            <img src="images/placeholder_small.png" class="imgtxt-img" alt="">
        </div>
        <div class="imgtxt-item m-txtcell">
            <h4>Bavaria ipsum dolor</h4>
            <p>
                Du dadst ma scho daugn boarischer a liabs Deandl i moan scho aa sog i, eam des muas ma hoid kenna resch kummd a Prosit der Gmiadlichkeit: An da Kini aasgem und glei wirds no fui lustiga ozapfa, wann griagd ma nacha wos z’dringa dahoam.
            </p>
            <p>
                Namidog in da greana Au Biaschlegl do do legst di nieda ned woar o’ha Schdeckalfisch hallelujah sog i, luja do legst di nieda. Af hallelujah sog i, luja zwoa des muas ma hoid kenna ognudelt Gstanzl dahoam, jo leck mi Baamwach gwihss? Glei nackata wea ko, dea ko Spezi is des liab. Dringma aweng wuid des is hoid aso kimmt, trihöleridi dijidiholleri Sepp kimmt a so a Schmarn? Xaver aasgem Schorsch schaugn sei lem und lem lossn i hab an.
            </p>
        </div>
    </div>
</div>

Styleguide 3.0.1

*/
.imgtxt {
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    border-style: hidden;
    width: 100%;
}

.imgtxt-row {
    display: table-row;
}

@media screen and (max-width: 450px) {
    .imgtxt .imgtxt-row,
    .imgtxt .imgtxt-item {
        display: block;
        width: 100%;
    }
}

@media screen and (max-width: 500px) {
    .imgtxt.m-breaks-500 .imgtxt-row,
    .imgtxt.m-breaks-500 .imgtxt-item {
        display: block;
        width: 100%;
    }
}

@media screen and (max-width: 600px) {
    .imgtxt.m-breaks-600 .imgtxt-row,
    .imgtxt.m-breaks-600 .imgtxt-item {
        display: block;
        width: 100%;
    }
}

@media screen and (max-width: 700px) {
    .imgtxt.m-breaks-700 .imgtxt-row,
    .imgtxt.m-breaks-700 .imgtxt-item {
        display: block;
        width: 100%;
    }
}

@media screen and (max-width: 800px) {
    .imgtxt.m-breaks-800 .imgtxt-row,
    .imgtxt.m-breaks-800 .imgtxt-item {
        display: block;
        width: 100%;
    }
}

@media screen and (max-width: 900px) {
    .imgtxt.m-breaks-900 .imgtxt-row,
    .imgtxt.m-breaks-900 .imgtxt-item {
        display: block;
        width: 100%;
    }
}

@media screen and (max-width: 1000px) {
    .imgtxt.m-breaks-1000 .imgtxt-row,
    .imgtxt.m-breaks-1000 .imgtxt-item {
        display: block;
        width: 100%;
    }
}

@media screen and (max-width: 1100px) {
    .imgtxt.m-breaks-1100 .imgtxt-row,
    .imgtxt.m-breaks-1100 .imgtxt-item {
        display: block;
        width: 100%;
    }
}

@media screen and (max-width: 1200px) {
    .imgtxt.m-breaks-1200 .imgtxt-row,
    .imgtxt.m-breaks-1200 .imgtxt-item {
        display: block;
        width: 100%;
    }
}

.imgtxt.m-vertical .imgtxt-row,
.imgtxt.m-vertical .imgtxt-item {
    display: block;
    width: 100%;
}