/* Default styles for responsive Textpic */

/*  Use this if not generally used in your template
.rtp * { box-sizing: border-box; }
* we also use in our templates the clearfix classes "cf" and clearfix"
*/

.rtp { clear:both; }
.besideText .headline { margin-top:0; }
.besideText.hasHeadline { margin-top:2.5em; }

.leftRight .figureWrap { width: 33.33%; }
.besideText .textWrap, .besideText .headline { width:66.66%; width:calc(66.66% - 20px); }

.besideTextLeft .textWrap, .besideTextLeft .headline, .imgRight .figureWrap { float:right; }
.besideTextRight .textWrap, .besideTextRight .headline, .imgLeft .figureWrap { float:left; }

.inTextLeft .figureWrap {margin-right:30px;}
.inTextRight .figureWrap {margin-left:30px;}

.inTextLeft .figureWrap { margin-right:20px; }
.inTextRight .figureWrap { margin-left:20px; }

/* align figcaption to figure*/
.rtp figure { margin:0; padding:0; /* Makes troubles with maxWith -- display:inline-table; */ }
.rtp img { /* Makes troubles with maxWith -- display: table-row; */  }
.rtp figcaption { /* Makes troubles with maxWith --  display:table-caption; caption-side:bottom; */ display:inline; margin:.3em 0 1em; padding:0 5px;word-wrap:break-word }

/* typography if needed */
figcaption { font-style: italic; line-height:1.3; }

/* logoleiste
.sameArea .figureWrap { display:table; border-spacing:0.5em; margin: 0 -0.5em;  }
.sameArea .figureWrap figure { border:1px solid silver; display:table-cell; border-radius:6px; background:#fff; vertical-align:middle; padding:0.5em; }
*/
.sameArea figure {width:25%; float:left; height:0; padding:0 0 12.5%; position: relative; display:block; margin-bottom: 1em; }
.sameArea .imgWrap {position: absolute; top:10px; bottom:10px; left:10px; right: 10px; text-align:center;}
.sameArea img {width:auto; max-height:100%; max-width: 100%; height:auto; display:inline-block; }



.leftRight.middle .figureWrap, .besideText.middle .textWrap, .besideText.middle .headline {width:47%; width:calc(50% - 15px); }

@media all and (max-width:700px) {
.besideTextLeft .textWrap, .besideTextRight .textWrap, .besideText.middle .textWrap, .besideText.middle .headline, .leftRight.middle .figureWrap {float:none;width:auto;max-width: none}
.besideTextLeft .figureWrap {margin-right:20px;}
.besideTextRight .figureWrap {margin-left:20px;}
}
@media all and (max-width:500px) {
.leftRight .figureWrap, .besideTextLeft .textWrap, .besideTextLeft .headline, .imgRight .figureWrap, .besideTextRight .textWrap, .besideTextRight .headline, .imgLeft .figureWrap, .besideText .textWrap, .besideText .headline  { float:none; width:100%; margin-left:0; margin-right:0; }
}