/*
#############################
 Startseite
#############################
*/

#startseite { }
#startseite b { font-weight: 600; }
#startseite h1 { font-size: 2.2em; margin-bottom: 25px; }
#startseite h2 { font-size: 2.0em; margin-bottom: 25px; }
#startseite h3 { font-size: 1.8em; margin-bottom: 25px; font-weight: 600; color: #000000; background: transparent; text-transform: none; text-align: center; }
#startseite h4 { font-size: 1.6em; font-weight: bold; }

#startseite .welcome {
         padding: 50px 0px 20px 0px;
         margin: 0px 0px 10px 0px;
         background: #EFEFEF;
         background: -moz-linear-gradient(top,  rgba(239,239,239,1) 0%, rgba(255,255,255,0) 100%);
         background: -webkit-linear-gradient(top,  rgba(239,239,239,1) 0%,rgba(255,255,255,0) 100%);
         background: linear-gradient(to bottom,  rgba(239,239,239,1) 0%,rgba(255,255,255,0) 100%);
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#00ffffff',GradientType=0 );

}
#startseite .welcome h3 { display: block; font-size: 2.0em; margin-bottom: 45px; text-align: center; }
#startseite .welcome .l { width: calc(40% - 0px); }
#startseite .welcome .l img { width: calc(80% - 40px); height: auto; margin: 0px 20px 20px 20px; }
#startseite .welcome .r { width: calc(60% - 0px); text-align: justify; font-size: 1.1em; line-height: 1.6em; }

#startseite #wwd {
         margin: 0px auto 50px auto;
         padding: 80px 0px 50px 0px;

         background: #d4d4d4;
         background: -moz-linear-gradient(top,  #d4d4d4 0%, #e0e0e0 31%, #f8f8f8 100%);
         background: -webkit-linear-gradient(top,  #d4d4d4 0%,#e0e0e0 31%,#f8f8f8 100%);
         background: linear-gradient(to bottom,  #d4d4d4 0%,#e0e0e0 31%,#f8f8f8 100%);
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4d4d4', endColorstr='#f8f8f8',GradientType=0 );
}
#startseite #wwd img { margin: 10px 20px; }

#startseite #wwd .a_c {
        color: #6F6F6F;
         font-style: italic;
         font-size: 0.9em;
         margin-top: -10px;
}

#startseite #wwd .in .list ul {
         float: left;
         width: calc(33.33333% - 40px);
         margin: 20px 0px 20px 60px;
         padding: 0px;
         list-style: none;
         color: #5F5F5F;
         text-shadow: rgba(255,255,255,0.3) 1px 1px 0px;
         border: 0px #000 solid;
}
#startseite #wwd .in .list ul:first-child { margin-left: 0px; }

#startseite #wwd ul li {
         margin: 20px 0px 10px 0px;
         padding: 5px 0px;
         list-style: none;
         text-align: left;
}

#startseite #wwd ul li.sub {
         margin: 0px 0px 10px 0px;
         padding: 10px 0px 0px 0px;
         border-top: 4px #BFBFBF dotted;
         list-style: none;
}
#startseite #wwd ul li .icon { opacity: 0.8; }


#startseite #wwd .list .item {
         display: inline-block;

         width: calc(25% - 75px);

         margin: 25px 20px;
         padding: 20px;

         font-size: 0.8em;
         line-height: 1.5em;
         text-align: center;
         background: #FFFFFF;

         -webkit-border-radius: 10px;
         -moz-border-radius: 10px;
         border-radius: 10px;

         -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
         -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
         box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1);
}
#startseite #wwd .list .item:first-child { margin-left: 0px; }
#startseite #wwd .list .item:last-child { margin-right: 0px; }
#startseite #wwd .list .item .icon { margin-bottom: 10px; }
#startseite #wwd .list .item b { display: block; margin-bottom: 10px; font-size: 1.4em; }

#wwd .payment_anbieter { display: block; margin-top: 20px !important; border: 0px #000000 solid; text-align: center; }
#wwd .payment_anbieter img {
         display: inline-block;
         width: 80px !important;
         height: auto;
         opacity: 0.75;
         filter: grayscale(100%);
         margin-top: 10px !important;
         margin: 0px;
}



#startseite #referenzen {
        margin: 0px auto 50px auto !important;
        font-size: 0.8em;
}
#startseite #referenzen .banner {
         -webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.5);
        -moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.5);
        box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.5);
}

#startseite #referenzen .line { border-bottom: 3px #DFDFDF dotted; margin: 40px 0px; }

#startseite #referenzen .info {
         font-family: 'Merriweather';
         font-size: 1.8em;
         text-align: center;
         font-style: italic;
         color: #BFBFBF;
         vertical-align: middle;
         border: 0px #000000 solid;
         line-height: 1.1em;
}

#startseite #referenzen .mr {
         display: table;
         width: 100%;
         min-height: 330px;
         border: 0px #000000 solid;
}

#startseite #referenzen .mr .block {
         display: table-cell;
         width: 500px;
         height: 330px;
}

#startseite #referenzen .mr .block .text {
         font-family: 'Poppins';
         font-size: 2.8em;
         color: #FFFFFF;
         font-weight: 900;
         line-height: 1.1em;
         text-align: left;

         width: 260px;
         padding: 170px 20px 0px 20px;
}

#startseite #referenzen .mr .zr {
         display: table-cell;
         width: 250px;
         height: 330px;
}

#startseite #referenzen .mr .info {
         display: table-cell;
         width: calc(100% - 500px - 250px - 100px);
         height: 280px;
         margin-top: -305px;
         padding: 0px 50px 0px 50px;
}

#startseite #referenzen #slider-referenzen-mr {
         display: block;
         position: absolute;
         z-index: 10;

         width: 336px;
         height: 280px;
         margin: -305px 0px 0px 320px;
}

#startseite #referenzen .lb {
         display: table;
         width: 100%;
         min-height: 200px;
}
#startseite #referenzen .lb .block {
         float: right;
         display: table-cell;
         width: 500px;
         height: 200px;
}

#startseite #referenzen .lb .block .text {
         font-family: 'Poppins';
         font-size: 2.6em;
         color: #FFFFFF;
         font-weight: 900;
         line-height: 1.1em;
         text-align: right;

         width: 460px;
         padding: 140px 10px 0px 0px;
}

#startseite #referenzen .lb .zr {
         display: table-cell;
         width: 300px;
         height: 200px;
}

#startseite #referenzen .lb .info {
         display: table-cell;
         width: calc(100% - 500px - 200px - 100px);
         height: 200px;
         margin-top: -305px;
         padding: 0px 50px 0px 50px;
}

#startseite #referenzen #slider-referenzen-lb {
         display: block;
         float: right;
         position: relative;
         z-index: 10;

         width: 728px;
         height: 90px;
         margin-top: -170px;
         margin-right: 30px;
}

#startseite #referenzen .bb {
         display: table;
         width: 100%;
         min-height: 300px;
}
#startseite #referenzen .bb .block {
         display: table-cell;
         width: 500px;
         height: 300px;
}

#startseite #referenzen .bb .block .text {
         font-family: 'Poppins';
         font-size: 2.8em;
         color: #FFFFFF;
         font-weight: 900;
         line-height: 1.1em;
         text-align: left;

         width: 250px;
         padding: 190px 20px 0px 20px;
}

#startseite #referenzen .bb .zr {
         display: table-cell;
         width: 550px;
         height: 300px;
}

#startseite #referenzen .bb .info {
         display: table-cell;
         width: calc(100% - 500px - 250px - 100px);
         height: 280px;
         margin-top: -305px;
         padding: 0px 50px 0px 50px;
         font-size: 1.8em;
}

#startseite #referenzen #slider-referenzen-bb {
         display: block;
         position: absolute;
         z-index: 10;

         width: 800px;
         height: 250px;
         margin: -275px 0px 0px 240px;
}


/* Feedback */
#feedback {
         background:transparent url(../images/bg_poly.jpg) center center no-repeat;
         -webkit-clip-path: polygon(0 15%, 100% 0, 100% 100%, 0% 100%);
         clip-path: polygon(0 15%, 100% 0, 100% 100%, 0% 100%);
}
#feedback .in { padding: 60px 0px 20px 0px; }

#feedback .gesamt {
         display: block;
         width: calc(100% - 180px);
         margin: 0px auto;
         text-align: center;
         border: 0px #FFFFFF solid;
}

#feedback .gesamt .item {
         display: inline-block;

         width: calc(25% - 30px - 16px - 10px);
         padding: 15px 15px;
         margin: 15px 10px;
         text-align: center;

         font-size: 1.6em;
         color: #FFFFFF;

         border: 1px #f28a5a solid;

         cursor: pointer;
         opacity: 0.75;
         filter: grayscale(0%);

         -webkit-transition: all 0.8s ease;
         -moz-transition   : all 0.8s ease;
}
#feedback .gesamt .item:hover { opacity: 1.0; filter: grayscale(0%); }

#feedback .gesamt .item .h_line {
         background: #FFFFFF;
         height: 4px;
         margin: 10px auto 10px auto;
}

#feedback .gesamt .item span { float: right; }
#feedback .gesamt .text { display: block; width: 100%; font-size: 0.8em; text-align: center; padding-top: 10px; color: #000000; }
#error_massage_feedback { margin-bottom: 20px; }
#feedback #bewertungen h4 { font-size: 2.0em; color: #FFFFFF; text-shadow: rgba(0, 0, 0, 0.15) 1px 1px 0px;  }

/* Rabattsystem */
#rabattsystem {
         display: block;
         width: 100%;
         margin: 0px 0px 50px 0px;
         padding-top: 50px;

         line-height: 1.6em;
         background:#FFFFFF url(../images/bg_rabatt.png) center -100px no-repeat;
         background-size: cover;
}

#rabattsystem .info {
         float:left;
         display: block;
         width: 400px;
}

#rabattsystem .info b {
        display: block;
        font-size: 1.2em;
}

#rabattsystem .info img {
         width: 80%;
         max-width: 270px;
         height: auto;
         margin-top: 30px;
         margin-bottom: 30px;
}

#rabattsystem .button_color.bigger { margin-top: 30px; }

#rabattsystem .item_box {
        float:right;
        display: block;
        width: calc(33.3333% - 150px);
        text-align: center;
}

#rabattsystem .item_box .item {
        display: inline-block;

         width: calc(85% - 50px);

         margin: 25px auto;
         padding: 25px;

         text-align: center;
        background: #FFFFFF;

        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;

         -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.05);
        -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.05);
        box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.05);
}

#rabattsystem .item_box .item:hover {
        -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.10);
        -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.10);
        box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.10);
         cursor: pointer;
}

#rabattsystem .item_box .item:hover.bronze {
        background: #FFFFFF;
        background: -moz-linear-gradient(-60deg,  #c59c8a 0%, #ffffff 40%);
        background: -webkit-linear-gradient(-60deg,  #c59c8a 0%,#ffffff 40%);
        background: linear-gradient(160deg,  #c59c8a 0%,#ffffff 40%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c59c8a', endColorstr='#ffffff',GradientType=1 );
}

#rabattsystem .item_box .item:hover.silber {
        background: #FFFFFF;
        background: -moz-linear-gradient(-60deg,  #CFCFCF 0%, #ffffff 40%);
        background: -webkit-linear-gradient(-60deg,  #CFCFCF 0%,#ffffff 40%);
        background: linear-gradient(160deg,  #CFCFCF 0%,#ffffff 40%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CFCFCF', endColorstr='#ffffff',GradientType=1 );
}

#rabattsystem .item_box .item:hover.gold {
        background: #FFFFFF;
        background: -moz-linear-gradient(-60deg,  #F0DC94 0%, #ffffff 40%);
        background: -webkit-linear-gradient(-60deg,  #F0DC94 0%,#ffffff 40%);
        background: linear-gradient(160deg,  #F0DC94 0%,#ffffff 40%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F0DC94', endColorstr='#ffffff',GradientType=1 );
}

#rabattsystem .item_box .image {
        background-size: 150px 150px !important;
         height: 150px;
         width: 150px;
         margin: 0px auto;
}
#rabattsystem .item_box .bronze .image { background:transparent url(../images/rabattsystem_bronze.png) center center no-repeat; }
#rabattsystem .item_box .silber .image { background:transparent url(../images/rabattsystem_silber.png) center center no-repeat; }
#rabattsystem .item_box .gold .image { background:transparent url(../images/rabattsystem_gold.png) center center no-repeat; }

#rabattsystem .item b {
        display: block;
         font-size: 1.3em;
}

#rabattsystem .item i {
        display: inline-block;
         width: 130px;
         height: 130px;
         line-height: 130px;
         margin: 20px auto;

         background: #EFEFEF;

         font-style: normal;
         font-size: 3.0em;
         color: #000000;
         text-align: center;
         vertical-align: middle;

         -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        border-radius: 100px;
}



/* Wiki */
#wiki { margin: 10px 0px; }

#wiki a:link, #wiki a:visited {
         display: inline-block;
         cursor: pointer;

         color: #685B50;
         text-align: center;
         font-size: 1.1em;
         font-weight: 500;

         padding: 5px 15px 5px 15px;
         margin: 2px 10px 10px 0px;

         -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;

         background: #FFFFFF;
         border: #ededed 2px solid;
         text-decoration:none;
}

#wiki a:before { content: "# "; color: #BFBFBF; }

#wiki a:hover {
         text-shadow: rgba(0, 0, 0, 0.15) 1px 1px 0px;
         color: #FFFFFF;
         background: #ff5400;
         border: #ff5400 2px solid;
         text-decoration:none;
}

#wiki a:hover:before { color: #FFFFFF; }