.margin-top-10 {margin-top:10px;}
.margin-top-20 {margin-top:20px;}
.margin-top-30 {margin-top:30px;}
.margin-top-40 {margin-top:40px;}
.margin-top-50 {margin-top:50px;}
.margin-top-60 {margin-top:60px;}
.margin-top-70 {margin-top:70px;}
.margin-top-80 {margin-top:80px;}
.margin-top-90 {margin-top:90px;}
.margin-top-100 {margin-top:100px;}

.margin-bottom-10 {margin-bottom:10px;}
.margin-bottom-20 {margin-bottom:20px;}
.margin-bottom-30 {margin-bottom:30px;}
.margin-bottom-40 {margin-bottom:40px;}
.margin-bottom-50 {margin-bottom:50px;}
.margin-bottom-60 {margin-bottom:60px;}
.margin-bottom-70 {margin-bottom:70px;}
.margin-bottom-80 {margin-bottom:80px;}
.margin-bottom-90 {margin-bottom:90px;}
.margin-bottom-100 {margin-bottom:100px;}

.margin-top-bottom-10 {margin-top:10px; margin-bottom: 10px;}
.margin-top-bottom-20 {margin-top:20px; margin-bottom: 20px;}
.margin-top-bottom-30 {margin-top:30px; margin-bottom: 30px;}
.margin-top-bottom-40 {margin-top:40px; margin-bottom: 40px;}
.margin-top-bottom-50 {margin-top:50px; margin-bottom: 50px;}
.margin-top-bottom-60 {margin-top:60px; margin-bottom: 60px;}
.margin-top-bottom-70 {margin-top:70px; margin-bottom: 70px;}
.margin-top-bottom-80 {margin-top:80px; margin-bottom: 80px;}
.margin-top-bottom-90 {margin-top:90px; margin-bottom: 90px;}
.margin-top-bottom-100 {margin-top:100px; margin-bottom: 100px;}
/* -------------------------------------------------------------- */

div.button {
margin:10px auto 50px;
display: flex;
align-items: center;
justify-content: center;}

div.button a {
text-decoration:none;
color:#fefefe;
font-size:20px;
padding:10px 20px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1176a6+0,208bbc+24,1176a6+65,0c5273+100 */
background: #1176a6; /* Old browsers */
background: -moz-linear-gradient(top,  #1176a6 0%, #208bbc 24%, #1176a6 65%, #0c5273 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #1176a6 0%,#208bbc 24%,#1176a6 65%,#0c5273 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #1176a6 0%,#208bbc 24%,#1176a6 65%,#0c5273 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1176a6', endColorstr='#0c5273',GradientType=0 ); /* IE6-9 */
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border:2px solid #0c5273;}

div.button a:hover {
color:#ffffff;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#62c4f2+0,7bdaed+24,62c4f2+65,1eacbf+100 */
background: #62c4f2; /* Old browsers */
background: -moz-linear-gradient(top,  #62c4f2 0%, #7bdaed 24%, #62c4f2 65%, #1eacbf 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #62c4f2 0%,#7bdaed 24%,#62c4f2 65%,#1eacbf 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #62c4f2 0%,#7bdaed 24%,#62c4f2 65%,#1eacbf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#62c4f2', endColorstr='#1eacbf',GradientType=0 ); /* IE6-9 */
border:2px solid #1EACBF;}

.main-wrapper .shown .block-description img {
display:block;}

.main-wrapper .shown .block-description {
padding-bottom:25px;}

.oster-artikel {
list-style-type:none;
display:flex;
justify-content: space-around;
text-align:center;
margin-bottom:20px;}

.oster-artikel:hover {
text-decoration:none;
color:#ffffff;}

.button-interesse {
background: rgb(248,248,248);
background: linear-gradient(90deg, rgba(248,248,248,1) 5%, rgba(17,118,166,1) 30%, rgba(17,118,166,1) 100%);
font-size: 30px;
font-weight: bold;
color: #ffffff;
padding: 5px 10px 5px 30px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin: 30px auto 40px;
display: block;
width: 60%;
text-align: center;
border:1px solid #fff;
text-align:right;}

.button-interesse span.sub {
font-size: 76px;
font-weight: 100;
line-height:62px;}

.button-interesse span.head {
font-style: italic;
font-size: 35px;
line-height:10px;}

.button-interesse:hover {
text-decoration:none;
color:#ffffff;}

.oster-artikel h3 {
font-weight:bold;
margin-top:0;
margin-bottom:20px;}

.oster-artikel li img {
width:90%;}

/* Oster Preistabelle */
.preistabelle-osterartikel {
width:50%;
margin-bottom:10px;}

.preistabelle-osterartikel tr {
padding:25px 0;}

.preistabelle-osterartikel tr.mid {
border-bottom:1px #c72932 solid;}

.preistabelle-osterartikel tr td {
border-right:1px #c72932 solid;
text-align:right;
padding:5px;}

.preistabelle-osterartikel tr td.last {
border-right:none;}

.oster-div {
margin-bottom:50px !Important;
border-bottom:1px #393939 solid;}

@media screen and (max-width : 768px) {
.button-interesse span.head {font-size:1.15em !Important;}
.button-interesse span.sub {font-size:2.5em !Important;}
}

/* Druckvorlagenseite */
/*.flex-div {display:flex; flex-direction:row;}
.highlights2 {float:left; margin:25 auto 0; width:100%;}
.highlights2 li {list-style-type:none;}
li.col-3 {width:33%; position: relative; text-align:left;}
*/

.druckvorlagen h2, .druckvorlagen h4 {margin-top:50px !Important;}

.container-font, .container-color {list-style:none; margin: 0; padding: 0;}
.item-font, .item-color {width:400px; paddiing:5px;}

.container-font li, .container-color li, .container-image li {margin-bottom:25px;}
.container-font li span, .container-color li span {font-size:3rem;}
.container-color li span {display:block; font-weight:700; padding-top:17px;}
.container-image li {width:350px;}
.container-image li div {width:250px; margin:0 auto 10px;}
.druckvorlagen .block-description img {display:block !Important;}

span.font-arial {font-family: Arial; font-style: normal; font-variant: normal; font-weight: 700;}
span.font-comic {font-family: "Comic Sans MS", "Comic Sans", cursiva; font-style: normal; font-variant: normal; font-weight: 700;}
span.font-trebuche {font-family: Trebuchet MS; font-style: normal; font-variant: normal; font-weight: 700;}
span.font-lucida {font-family: Lucida Console; font-style: normal; font-variant: normal; font-weight: 700;}
span.font-garamond {font-family: Garamond; font-style: normal; font-variant: normal; font-weight: 700;}
span.font-cambria {font-family: Cambria; font-style: normal; font-variant: normal; font-weight: 700;}
span.font-times {font-family: TimesNewRoman; font-style: normal; font-variant: normal; font-weight: 700;}
span.font-brush {font-family: "Brush Script Std"; font-style: normal; font-variant: normal; font-weight: 700;}
span.font-lobster {font-family: 'Lobster', cursive; font-style: normal; font-variant: normal; font-weight: 700;}
span.font-mono {font-family: Monotype Corsiva; font-style: normal; font-variant: normal; font-weight: 700;}

span.color-weiss {height:52px; width:300px; background:#f8f8f8; color:#393939; border:1px solid #f2f2f2;}
span.color-hellrot {height:52px; width:300px; background:#F0908C; color:#393939;}
span.color-rot {height:52px; width:300px; background:#ff0000; color:#393939;}
span.color-orange {height:52px; width:300px; background:#ffa500; color:#393939;}
span.color-gelb {height:52px; width:300px; background:#ffff00; color:#393939;}
span.color-gruen {height:52px; width:300px; background:#228b22; color:#393939;}
span.color-hellblau {height:52px; width:300px; background:#7EA2D1; color:#393939;}
span.color-blau {height:52px; width:300px; background:#0000ff; color:#393939;}
span.color-lila {height:52px; width:300px; background:#800080; color:#393939;}
span.color-pink {height:52px; width:300px; background:#e72a8a; color:#393939;}
span.color-grau {height:52px; width:300px; background:#808080; color:#393939;}
span.color-schwarz {height:52px; width:300px; background:#070000; color:#393939;}


/*Flexbox*/
.flex {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;}

ul.print-list li {margin:10px 0 ;}

/* skjhahdflkjassdlkfjhaslkdfjhaslkdjfhas */
.benefit-list {margin:10px 0 20px;}
.benefit {clear:both; margin-left:2%; margin-bottom:10px;}
.benefit img {float:left;border-radius: 25px;/*padding: 20px;*/width: 40px;height: 40px;margin-right:20px; color:red;}
.benefit-inner {float:left;}
.benefit h2 {color:#c72932; font-size:15px; margin-top:0;}
.benefit p {margin-left:60px; margin-bottom:20px;}

.personal-content {margin:10px 0 0;}
.personal-content .row p {margin-top:10px;}
.personal-content h3 {font-size:32px; font-weight:bold; margin-bottom:20px;}

.personal-artikel {background: url(personal-bg.png); margin-top:60px; background-position:bottom; background-repeat:no-repeat; margin-bottom:70px;}
.personal-artikel img {vertical-align:top;}
.personal-artikel .row {margin:0;}
.personal-artikel a {text-decoration:none; color:#000000;}
.personal-artikel h5, .personal-artikel p {text-align:center; font-weight:bold; font-size:13px; margin:0 0 10px 0;}
.personal-artikel h5:hover, .personal-artikel p:hover {text-decoration:underline;}
.personal-artikel h5 {color:#c72932;}
.personal-artikel div.personal-div {background-color:#f8f8f8; border-radius:50%; overflow:hidden; margin:10px 0 10px 1%; -webkit-box-shadow: 0px 10px 13px -7px #000000, 0px 5px 9px 1px rgba(0,0,0,0); box-shadow: 0px 10px 13px -7px #000000, 0px 5px 9px 1px rgba(0,0,0,0);}
.personal-artikel img {width:200px; display: block; margin-left: auto; margin-right: auto; margin-top:29px;}


/* Gestaltungsservice */
.service-content .flex {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
}

.service-content .cta-button {
	background:#fefefe;
	border:3px solid #cb0e0e;
	padding:5px;
	display: inline-block;
	font-weight: bold;
	color:#393939;
	font-size:20px;
	text-align:center;
	border-radius: 10px;
}

.service-content .button-breit {
	padding:5px 30px;
}

.service-content .cta-button:hover {
	background:#393939;
	text-decoration:none;
	color:#fefefe;
}

.service-content.grey-block {
	background:#393939 !Important;
	color:#fefefe !Important;
	padding:0 20px 10px;
}

.service-content.grey-block .cta-button {
	background:#393939;
	color:#fefefe;
}

.service-content.grey-block .cta-button:hover {
	background:#fefefe;
	color:#393939;
}

/* Mobile: Elemente mit der Klasse ausblenden */
@media screen and (max-width: 767px) {
  .mobile-hide {
    display: none;
  }
}