@font-face {
     font-family: 'AlteHaasGroteskBold';
     src: url('font/AlteHaasGroteskBold.ttf');
}
 @font-face {
     font-family:"Valken Regular";
     src:url("font/Valken__.eot?") format("eot"),url("font/Valken__.woff") format("woff"),url("font/Valken__.ttf") format("truetype"),url("font/Valken__.svg#Valken") format("svg");
     font-weight:normal;
    font-style:normal;
}
 @font-face {
     font-family:"Republika";
     src:url("font/REPUB___.eot?") format("eot"),url("font/REPUB___.woff") format("woff"),url("font/REPUB___.ttf") format("truetype"),url("font/REPUB___.svg#Republika") format("svg");
     font-weight:normal;
     font-style:normal;
}
 @font-face {
     font-family:"ChaparralPro-Regular";
     src: url(font/ChaparralPro-Regular.otf);
}
 @font-face {
     font-family: AnkeCall;
     src: url(font/AnkeCall.ttf);
}
 p.tp1 {
     font-family: 'Roboto', sans-serif;
     font-size: 15px;
     line-height: 23px;
}
 p.tp2 {
     font-family: 'Cantarell', sans-serif;
     font-size: 17px;
     line-height: 23px;
}
 p.tp3 {
     font-family: 'Droid Serif', serif;
     font-size: 15px;
     line-height: 23px;
}
 p.tp4 {
     font-family: 'Alice', serif;
     font-size: 18px;
     font-weight: normal;
     line-height: 23px;
}
 p.tp5 {
     font-family: 'Open Sans', sans-serif;
     font-size: 14px;
     line-height: 23px;
}
 p.tp6 {
     font-family: 'Abel', sans-serif;
     font-size: 17px;
     line-height: 23px;
}
 p.tp7 {
     font-family: 'ChaparralPro-Regular', sans-serif;
     font-weight: 500;
     font-size: 20px;
     -webkit-font-smoothing: antialiased;
}
 p.tp8 {
     font-family: 'Lato', Calibri, Arial, sans-serif;
     font-weight: normal;
     color: #4e4e4e;
     margin-bottom: 1.25rem;
     text-rendering: optimizeLegibility;
     font-size: 17px;
     line-height: 23px;
    /* color: #69606b;
     font-weight: 400;
     font-size: 17px;
     line-height: 1.4;
     font-family: 'Raleway', Arial, sans-serif;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     */
}

	
a.call_2 {
    text-decoration: none;
    color: #000;
}
 .medieninfos {
     font-family: 'Lato', Calibri, Arial, sans-serif;
     font-weight: normal;
     color: #4e4e4e;
     margin-bottom: 1.25rem;
     text-rendering: optimizeLegibility;
     font-size: 17px;
     line-height: 23px;
     hyphens: auto;
	  margin: auto;
	  max-width: 100%;
}
 .medieninfos h3 {
     font-size: 19px;
     line-height: 23px;
     hyphens: auto;
}
 .medieninfos h4 {
     font-size: 17px;
     line-height: 21px;
     hyphens: auto;
}
 .medieninfos p {
     font-size: 16px;
     line-height: 20px;
     hyphens: auto;
}
 h2.tp8h2 {
     font-family: 'Lato', Calibri, Arial, sans-serif;
     font-weight: bold;
     padding-top: 80px;
     font-size: 21px;
     line-height: 23px;
     letter-spacing: 2px;
}
 span.tpsteffi {
     font-family: 'Lato', Calibri, Arial, sans-serif;
     font-size: 18px;
     line-height: 23px;
     font-weight: bold;
}
 h2.tp1h2 {
     font-family: 'Roboto Condensed', sans-serif;
     font-weight: normal;
     font-size: 21px;
     line-height: 23px;
     letter-spacing: 2px;
}
 h2.tp2h2 {
     font-family: 'Cantarell', sans-serif;
     font-weight: 700;
     font-size: 20px;
     line-height: 23px;
     text-transform: uppercase;
     letter-spacing: -1px;
}
 h2.tp3h2 {
     font-family: 'Droid Serif', serif;
     font-weight: 400;
     font-style: italic;
     font-size: 20px;
     line-height: 23px;
}
 h2.tp4h2 {
     font-family: 'Playfair Display', serif;
     font-weight: 900;
     line-height: 46px;
     font-size: 23px;
}
 h2.tp5h2 {
     font-family: 'Dosis', sans-serif;
     font-weight: 800;
     font-size: 18px;
     line-height: 23px;
}
 h2.tp6h2 {
     font-family: 'Medula One', cursive;
     font-weight: 9;
     line-height: 46px;
     font-size: 26px;
}
/* circle with only one line of text, centered vertically */
 .oneline:after {
     content: "";
     display: block;
     width: 100%;
    /* die Größe des Zirkels nängt vom Porzensatz von col ab: siehe unten */
     height: 0;
     padding-bottom: 100%;
     background: #D11456;
    /* the circle background */
     -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     border-radius: 50%;
}
 .oneline:hover:after {
     background-color: #F8C119;
     ;
     color: #000;
    /* the circle background hover*/
}
 .oneline div {
     float: left;
     width: 100%;
     padding-top: 50%;
     line-height: 1em;
     margin-top: -0.5em;
     text-align: center;
     color: #fff;
}
 .oneline p {
     text-align: center;
     font-size: 1.8em;
}
 .oneline div:hover {
     color: #000;
}
 .oneline p:hover {
     color: #000;
}
/* end circle */
 h1.grafik1 {
     font-size: 50px;
}
 span.spangrafik1 {
     background: url('../vimg2/grafik7.jpg') repeat;
     color: #000;
     padding: 0px 10px;
     margin-right: 5px;
}
 div.spangrafik1 {
     background: url('../vimg2/grafik7.jpg') repeat;
     color: #000;
     padding: 0px 10px;
     margin-right: 5px;
     width: 100px;
     text-align: center;
}
/* note */
 .note {
     position:relative;
     max-width:480px;
     padding:1em 1.5em;
     margin:2em auto;
     color:#fff;
     background:#97C02F;
     overflow:hidden;
}
 p.pgelb {
    color:#000;
}
 .note:before {
     content:"";
     position:absolute;
     top:0;
     right:0;
     border-width:0 16px 16px 0;
    /* This trick side-steps a webkit bug */
     border-style:solid;
     border-color:#fff #fff #658E15 #658E15;
    /* A bit more verbose to work with .rounded too */
     background:#658E15;
    /* For Opera when also applying a border-radius */
     display:block;
     width:0;
    /* Only for Firefox 3.0 damage limitation */
    /* Optional: shadow */
     -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
     -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
     box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}
 .note.red {
    background:#379FA7;
}
 .note.red .gelb {
    background:#FFCC11;
}
 .note.red:before {
    border-color:#fff #fff #BDBB8B #BDBB8B;
     background:#BDBB8B;
}
 .note.gelb {
    background:#FFCC11;
}
 .note.gelb:before {
    border-color:#fff #fff #BDBB8B #BDBB8B;
     background:#BDBB8B;
}
 .note.rounded {
     -webkit-border-radius:5px;
     -moz-border-radius:5px;
     border-radius:5px;
}
 .note.rounded:before {
     border-width:8px;
    /* Triggers a 1px 'step' along the diagonal in Safari 5 (and Chrome 10) */
     border-color:#000 #000 transparent transparent;
    /* Avoids the 1px 'step' in webkit. Background colour shows through */
     -webkit-border-bottom-left-radius:5px;
     -moz-border-radius:0 0 0 5px;
     border-radius:0 0 0 5px;
}
 .note p {
    margin:0;
}
 .note p + p {
    margin:1.5em 0 0;
}
/* end note */
/* note2 */
 .note.rounded2 {
     -webkit-border-radius:5px;
     -moz-border-radius:5px;
     border-radius:5px;
}
 .note.rounded2:before {
     border-width:8px;
    /* Triggers a 1px 'step' along the diagonal in Safari 5 (and Chrome 10) */
     border-color:#F8C119 #F8C119 transparent transparent;
    /* Avoids the 1px 'step' in webkit. Background colour shows through */
     -webkit-border-bottom-left-radius:5px;
     -moz-border-radius:0 0 0 5px;
     border-radius:0 0 0 5px;
}
/* end note2 */
/* note3 */
 .note.rounded3 {
     -webkit-border-radius:5px;
     -moz-border-radius:5px;
     border-radius:5px;
}
 .note.rounded3:before {
     border-width:8px;
    /* Triggers a 1px 'step' along the diagonal in Safari 5 (and Chrome 10) */
     border-color:#fff #fff transparent transparent;
    /* Avoids the 1px 'step' in webkit. Background colour shows through */
     -webkit-border-bottom-left-radius:5px;
     -moz-border-radius:0 0 0 5px;
     border-radius:0 0 0 5px;
}
/* end note3 */
/* note4 */
 .note.rounded4 {
     -webkit-border-radius:5px;
     -moz-border-radius:5px;
     border-radius:5px;
}
 .note.rounded4:before {
     border-width:8px;
    /* Triggers a 1px 'step' along the diagonal in Safari 5 (and Chrome 10) */
     border-color:#D11456 #D11456 transparent transparent;
    /* Avoids the 1px 'step' in webkit. Background colour shows through */
     -webkit-border-bottom-left-radius:5px;
     -moz-border-radius:0 0 0 5px;
     border-radius:0 0 0 5px;
}
/* end note4 */
/* note5 */
 .note.rounded5 {
     -webkit-border-radius:5px;
     -moz-border-radius:5px;
     border-radius:5px;
}
 .note.rounded5:before {
     border-width:8px;
    /* Triggers a 1px 'step' along the diagonal in Safari 5 (and Chrome 10) */
     border-color:#379FA7 #379FA7 transparent transparent;
    /* Avoids the 1px 'step' in webkit. Background colour shows through */
     -webkit-border-bottom-left-radius:5px;
     -moz-border-radius:0 0 0 5px;
     border-radius:0 0 0 5px;
}
/* end note5 */
/* ribbon style 1 */
 .ribbon-wrapper {
     position: relative;
}
 .ribbon-front {
     background-color: #379FA7;
     height: 60px;
     width: 340px;
     position: relative;
     left:-20px;
     z-index: 2;
}
 .ribbon-front, .ribbon-back-left, .ribbon-back-right {
     -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
     -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
     -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
     -o-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
}
 .ribbon-edge-topleft, .ribbon-edge-topright, .ribbon-edge-bottomleft, .ribbon-edge-bottomright {
     position: absolute;
     z-index: 1;
     border-style:solid;
     height:0px;
     width:0px;
}
 .ribbon-edge-bottomleft, .ribbon-edge-bottomright {
     top: 60px;
}
 .ribbon-edge-topleft, .ribbon-edge-bottomleft {
     left: -20px;
     border-color: transparent #058691 transparent transparent;
}
 .ribbon-edge-topleft {
     top: -10px;
     border-width: 10px 20px 0 0;
}
 .ribbon-edge-bottomleft {
     border-width: 0 20px 0px 0;
}
 .ribbon-edge-topright, .ribbon-edge-bottomright {
     left: 300px;
     border-color: transparent transparent transparent #058691;
}
 .ribbon-edge-topright {
     top: -10px;
     border-width: 10px 0 0 20px;
}
 .ribbon-edge-bottomright {
     border-width: 0 0 0px 20px;
}
 .ribbon-back-left {
     position: absolute;
     top: -10px;
     left: 0px;
     width: 0px;
     height: 60px;
     z-index: 0;
}
 .ribbon-back-right {
     position: absolute;
     top: -10px;
     right: 0px;
     width: 0px;
     height: 60px;
     z-index: 0;
}
 .ribbon-front h2 {
     font-family: "HurmeGeometricSansBold",Helvetica,Arial,Sans-serif;
     text-align: center;
     padding-top: 10px;
     font-size: 35px;
     color: #000;
     font-weight: bold;
}
/* ribbon style 1 Ende */
/* ribbon style 2 */
 .ribbon-front2 {
     background-color: #D11456;
     height: 60px;
     width: 340px;
     position: relative;
     left:-20px;
     z-index: 2;
}
 .ribbon-front2 h2 {
     font-family: "HurmeGeometricSansBold",Helvetica,Arial,Sans-serif;
     text-align: center;
     padding-top: 10px;
     font-size: 35px;
     color: #fff;
     font-weight: bold;
}
 .ribbon-edge-topleft2, .ribbon-edge-topright2, .ribbon-edge-bottomleft2, .ribbon-edge-bottomright2 {
     position: absolute;
     z-index: 1;
     border-style:solid;
     height:0px;
     width:0px;
}
 .ribbon-edge-bottomleft2, .ribbon-edge-bottomright2 {
     top: 60px;
}
 .ribbon-edge-topleft2, .ribbon-edge-bottomleft2 {
     left: -20px;
     border-color: transparent #A91247 transparent transparent;
}
 .ribbon-edge-topleft2 {
     top: -10px;
     border-width: 10px 20px 0 0;
}
 .ribbon-edge-bottomleft2 {
     border-width: 0 20px 0px 0;
}
 .ribbon-edge-topright2, .ribbon-edge-bottomright2 {
     left: 300px;
     border-color: transparent transparent transparent #A91247;
}
 .ribbon-edge-topright2 {
     top: -10px;
     border-width: 10px 0 0 20px;
}
 .ribbon-edge-bottomright2 {
     border-width: 0 0 0px 20px;
}
/* ribbon style 2 Ende */
 .dots.black {
     border-color: #333;
     color: #333;
}
 .dots {
     border-color: #FFFFFF;
     border-image: none;
     border-style: dashed dashed none;
     border-width: 4px 4px medium;
     clear: both;
     color: #FFFFFF;
     height: 1px;
     margin: 0;
     position: relative;
     top: 57px;
     width: 100%;
     z-index: 1;
}
 @media only screen and (max-width: 1200px) {
     p.tp8 {
         padding: 0 20px;
         font-size: 17px;
         line-height: 19px;
    }
     span.tpsteffi {
         font-size: 17px;
         line-height: 19px;
    }
     .medieninfos h3 {
         font-size: 18px;
         line-height: 22px;
    }
     .medieninfos h4 {
         font-size: 16px;
         line-height: 20px;
    }
     .medieninfos p {
         font-size: 15px;
         line-height: 19px;
    }
	

	
}
 @media all and (max-width: 768px){
     h2.tp8h2 {
         padding-top: 10px;
         padding-right: 20px;
         padding-left: 20px;
    }
	
		 .medieninfos {
  	  max-width: 97%;
}
     .medieninfos h3 {
         font-size: 17px;
         line-height: 21px;
    }
     .medieninfos h4 {
         font-size: 15px;
         line-height: 19px;
    }
     .medieninfos p {
         font-size: 14px;
         line-height: 18px;
    }
}