html {
    scroll-behavior: smooth;
}

.scrollbutton {width:40px; height:40px;}

.header_main_page {background: #f2f1ea; padding:50px 5%; text-align: center;}
.header_main_page p {font-weight:400; font-size:20px;}
.header_main_page h1 {font-size: 34px; font-weight: 700; text-transform: none; letter-spacing: 0;margin-bottom: 10px;}

.demo {background:#000;padding: 8px 11px;font-weight: 700;font-size: 13px;letter-spacing: 1px;border-radius: 30px;text-transform: uppercase;display: inline-block;
    margin: 0 0 13px 0;color: #fff;transition: all 0.3s ease-in-out;}


.demobig {background: #000; padding: 16px 38px; font-weight: 700; font-size: 16px;  letter-spacing: 1px; border-radius: 30px; text-transform: uppercase; 
    margin: 0 0 13px 0; color: #fff; transition: all 0.3s ease-in-out; display: block; text-align: center;}
.demostart {background: #000; padding: 16px 38px; font-weight: 700; font-size: 16px;  letter-spacing: 1px; border-radius: 30px; text-transform: uppercase; display: inline-block;
    margin: 20px 0 0 0; color: #fff; transition: all 0.3s ease-in-out; text-align: center;}
.demostart:hover {background:#fff; color:#000; box-shadow: 0px 0px 10px rgba(0,0,0,.5); transition: all 0.3s ease-in-out;}
.demo:hover {background:#fff; color:#000; box-shadow: 0px 0px 10px rgba(0,0,0,.5); transition: all 0.3s ease-in-out;}
.demobig:hover {background:#fff; color:#000; box-shadow: 0px 0px 10px rgba(0,0,0,.5); transition: all 0.3s ease-in-out;}
small {text-align: left;}

#produktempfehlung .product_listing {background:#e2dfd5;}

.plist4 {background:#a0c5cf;} /* Service */
.plist4 .flex_produktbox {max-width: none;}
.plist4 h1 {color:#fff;}
.plist5 .panel {display: none;}
.plist2 .flex_produktbox {flex:1 1 350px;} /* Shoptemplates */

#product_boxes_list {margin-top: 50px;}

#newsletter-erstellen {background:url(/images/html-newsletter-templates.jpg) center center no-repeat; background-size:cover; color:#fff; text-align: center; max-width: 1800px; margin: 0 auto;}
#newsletter-erstellen .flexcontainer  {display: flex; justify-content: center; align-items: center;height:600px;}
#newsletter-erstellen .flexcontainer .item {}
#newsletter-erstellen h1 {font-size:60px; line-height: 70px;}
@media screen and (max-width:1100px){
    #newsletter-erstellen {background:url(/images/html-newsletter-templates_small.jpg) center center no-repeat; background-size:cover; color:#fff; text-align: center;}
}



#newsletter-service {background:url(/images/newsletter-service.jpg) center center no-repeat; background-size:cover; color:#fff; text-align: center; max-width: 1840px; margin: 0 auto;}
#newsletter-service .flexcontainer  {display: flex; justify-content: center; align-items: center;height:600px;}
#newsletter-service h1 {font-size:60px; line-height: 70px;}

@media screen and (max-width:1100px){
    #newsletter-service {background:url(/images/newsletter-service_small.jpg) center center no-repeat; background-size:cover; color:#fff; text-align: center;}
}

@media screen and (min-width:1600px){
    #newsletter-erstellen .flexcontainer, #newsletter-service .flexcontainer   {height:900px;}   
}

.daskleingedruckte p {font-size:13px; margin:30px 0; line-height: 20px; max-width: 900px; margin: 50px auto 0;}
.HTML-Newsletter-Beispiel {width: 100%; background: #e6e4df; text-align: center;}
.HTML-Newsletter-Beispiel img {max-width: 600px;}
@media screen and (max-width:700px){
    .HTML-Newsletter-Beispiel img {max-width:100%;}
}

#card-area span.price {font-size: 31px; display: inline-block; width: 100%; text-align: center; border-top: 1px solid; padding-top: 40px;}
#card-area .wrapper {max-width: 1000px;margin: 0 auto;}
#card-area {padding:0;}
#card-area .box-area {display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
#card-area .box {
    flex: 1 1 250px;
    font-size: 22px;
    max-width: 255px;
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 35px 22px;
    transition: all .3s ease-in-out;
    margin: 0 15px 30px;
    border-radius: 20px;
    border:1px solid rgba(0,0,0,.1);
}
#card-area .box img {width:100%; border-radius: 10px; display: block; transition: transform 0.5s;}
#card-area .overlay {
    height:0; 
    width: 100%; 
    color:#222;
    position:absolute; 
    background:#fff;
    left:0; 
    right:0; 
    bottom:0;
    overflow:hidden; 
    display: flex; 
    align-items:center; 
    justify-content: center; 
    flex-direction: column; 
    padding: 0 40px; 
    text-align:center; 
    font-size:14px; 
    transition: height 0.5s;
}

#card-area ul {margin:30px 0 30px 15px;}
#card-area ul li {list-style: none; text-align: center; font-size:16px; line-height: 25px;}

#card-area .wrapper .ov1 a {background:#979797;}
#card-area .wrapper .ov2 a {background:#4d4d4d;}
#card-area .wrapper .ov3 a {background:#171717;}


#card-area .overlay {display: none;}
#card-area .smartphone a {margin-top:10px; color:#ffffff; font-weight: 900; letter-spacing: 0.3px; text-decoration: none; font-size: 14px; background: #fff; border-radius: 50px; text-align: center; padding:8px 20px; display: block;}




#slide15 {padding:100px;}


#slide16 {padding:100px 0; background: #ffffff; line-height: 22px;}
#slide16 p {margin:0;}
#slide16 .abs {margin-top: 7px; display: inline-block; font-weight: 500; font-size: 12px;}
#slide16 a {text-decoration: underline;}
.highlights {letter-spacing: 4px; font-size: 24px; text-align: center; text-transform: uppercase; margin-bottom: 81px;line-height: 30px;}
#slide16 .img-fluid {max-width: 75px; height:auto;}
#slide16 h3 {font-size:1rem;}
#slide16 .container-flex-second {flex-wrap: nowrap;}
#slide16 .faq_icon {margin: 10px 20px; width: 80px;}
#slide16 .container-flex-second {margin-bottom: 30px;}
#slide16 .text {flex:1 1 465px; text-align: left;}
#slide16 .highlighttext {text-align: center; padding: 20px; text-transform: uppercase; letter-spacing: 2px; font-weight: 400;}
#slide16 .big {font-size: 20px; line-height: 32px; text-align: center; font-weight: 500; padding: 30px 0 10px;  background: #eaf0f2;  border-radius: 20px; color: #333;}
#slide16 .big .container-flex-second { margin: 0 auto 0 0; margin-right: auto;}
@media screen and (max-width:700px) {
    #slide16 {padding: 50px 15px 20px 15px}
    #slide16 .container-flex-second {flex-wrap: wrap;}
    #slide16 .text {text-align: center;}
    #slide16 .highlights {margin-bottom: 20px; letter-spacing: 2px; font-size: 20px;}
}

#beratung {
    position: fixed;
    top: 212px;
    left: -213px;
    background: url(/images/pfeil_beratung.png);
    background-position: center right;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 8px;
    width: 295px;
    height: 79px;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 80px 0 0;
    text-align: center;
    color:#fff; 
    font-size: 18px;
    font-weight:500;
}
span.bera {font-size: 27px; line-height: 31px;  text-transform: uppercase;  font-weight: 900;  letter-spacing: 3px;}
#beratung:hover {left:0px; transition: all 0.3s ease-in-out;}
@media screen and (max-width:1199px) {
    #beratung {display:none;}
}

#slide20 {padding:100px 0 50px; max-width: 1800px; margin: 0 auto;}
#slide20 ul.paket li {font-size:20px; font-weight:600;}
#slide20 .container-flex-special .flex300 {padding:0 30px;}
#slide20 .flex {margin-bottom: 50px;}
@media screen and (min-width:901px) {
    #slide20 .flex300, #slide20 .highlights {text-align: left;}
   
}