/*
         ============================================
         bonusfarm.de CSS
         Gestaltung & Umsetzung: Bannerexpress.de
         ============================================
         Grundfarben: #639138 (Grün), #002a23 (Dunkel Grün), #f2f6ef (Hell Grün BG), #a4c4bf (Blau-Grün Hell Kontrast)
*/

/* Links */
a {
         transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

a:link, a:visited {
         text-align: left;
         font-size: 1.0em;
         color: #202279;
         font-weight: normal;
         text-decoration:underline;
}

a:hover {
         font-weight: normal;
         color: #4e2795;
         text-decoration:none;
}

a.dbutton:link, a.dbutton:visited {
         display: inline-block;

         background: #002a23;

         text-align: left;
         font-size: 1.2em;
         font-weight: bold;
         text-shadow: rgba(0,0,0,0.2) 1px 1px 1px;
         color: #FFFFFF !important;

         line-height: 1.2em;

         padding: 5px 15px 5px 15px !important;
         margin: 5px 0px 5px 0px;
         text-decoration:none;

         border: 0px #202279 solid;
         -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
         border-radius: 5px;
}
a.dbutton:hover {
         background-color: #FFFFFF;
         font-weight: bold;
         color: #002a23 !important;
         text-shadow: rgba(255,255,255,0.1) 1px 1px 1px;
}

a.dbutton.highlight {
         background-color: #639138;
         font-weight: bold;
         color: #FFFFFF !important;
         text-shadow: rgba(0,0,0,0.1) 1px 1px 1px;
         padding: 15px 25px 15px 25px !important;
}
a.dbutton.highlight:hover {
         background-color: #002a23;
         font-weight: bold;
         color: #FFFFFF !important;
}


/* Überschriften */
h1 {
         font-family: 'Catamaran';
         font-size: 2.0em;
         font-weight: bold;
         text-align: left;
         color: #002a23;
         margin: 0px 0px 5px 0px;
         padding: 0px 0px 0px 0px;
         vertical-align:top;
         line-height: 1.1em;
}

h2 {
         font-family: 'Catamaran';
         font-size: 1.6em;
         font-weight: bold;
         text-align:left;
         color:#002a23;
         margin: 0px 0px 5px 0px;
         padding: 0px 0px 0px 0px;
         vertical-align:top;
         text-decoration:none;

}

h1, h2 span { color: #639138; }

h3, .h3 {
         display: block;
         font-family: 'Catamaran';
         font-size: 1.4em;
         font-weight: bold;
         text-align:left;
         color: #639138;
         margin: 5px 0px 5px 0px;
         padding: 0px 0px 0px 0px;
         vertical-align:top;
         text-transform: uppercase;
}

h3 a, .h3 a {
         font-size: 0.9em;
         font-weight: bold;
         text-align:left;
         color: #639138;
         text-decoration: none;
}

h3 a:hover, .h3 a:hover {
         font-size: 0.9em;
         font-weight: bold;
         text-align:left;
         color: #002a23;
         text-decoration: underline;
}

/*
h3 a {
         display: inline-block;
         float: right;
         padding: 2px 5px 2px 5px;

         font-size: 0.8em !important;
         font-weight: normal !important;
         color: #FFFFFF !important;
         text-decoration: none !important;

        background: #282c34;
        background: -moz-linear-gradient(top,  #282c34 0%, #4c5467 100%);
        background: -webkit-linear-gradient(top,  #282c34 0%,#4c5467 100%);
        background: linear-gradient(to bottom,  #282c34 0%,#4c5467 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282c34', endColorstr='#4c5467',GradientType=0 );

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

h3 a:hover {
        -webkit-box-shadow: inset 0px 0px 10px 0px rgba(255,255,255,0.25);
        -moz-box-shadow: inset 0px 0px 10px 0px rgba(255,255,255,0.25);
        box-shadow: inset 0px 0px 10px 0px rgba(255,255,255,0.25);
}    */

h4 {
         font-family: 'Catamaran';
         font-size: 1.3em;
         font-weight: bold;
         text-align:left;
         vertical-align:top;
         color:#3337a5;

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

         background: #efefef;
         text-shadow: 1px 1px 0px rgba(255,255,255,0.2);
         border-top: 2px #b50000 solid;
}

* {
         -webkit-text-size-adjust: none;
         -moz-text-size-adjust: none;
         -webkit-text-size-adjust: none;
         -ms-text-size-adjust: none;
         font-size-adjust: none;
         size-adjust: 100%;
}


/* Standards */
body {
         background:#58852e;
         /*background:#ffffff; */
         font-size: 1.0em;
         font-size: 15px;
         vertical-align:top;
         text-align:left;
         width: 100%;
         height: 100%;
         margin: 0;
         padding: 0;
         min-width: 800px;
}

body, tr, td, div {
         /*font-family: 'Catamaran';  */
         font-family: 'Open Sans';
         color: #002a23;
         vertical-align:top;
         text-align:left;
}

img              { border: 0px; }
.clear           { clear:both; line-height:0.0em; height: 0px; display: block; background-color: #FFDF00; }
.block           { display: block !important; }
.inline          { display: inline-block !important; }
.upper           { text-transform: uppercase; }
.pad             { padding: 10px; }
.pad_l           { padding-left: 10px; }
.pad_top         { padding: 20px 0px; }
.pad_r           { padding-right: 10px; }
.pad_big         { padding: 20px; }
.no_pad          { padding: 0px !important; }
.round           { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
.round_big       { -webkit-border-radius: 50px !important; -moz-border-radius: 50px !important; border-radius: 50px !important; }
.round_small     { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.a_left          { text-align: left; }
.a_center        { text-align: center !important; }
.a_right         { text-align: right; }

.big             { font-size: 1.2em; }
.bigger          { font-size: 1.4em !important; }
.small           { font-size: 0.8em; }
.smaller         { font-size: 0.7em; }

.f_l             { float:left; }
.f_r             { float:right; }

.w75             { float: left; width: 75%; }
.w66             { float: left; width: 66%; }
.w50             { float: left; width: 50%; }
.w40             { float: left; width: 40%; }
.w33             { float: left; width: calc(100% / 3); }
.w25             { float: left; width: 25%; }

img.auto         { width: 100%; height: auto; }

.bg0 { background-color: #FFFFFF !important; }
.bg1 { background-color: #f2f6ef !important; }
.bg2 { background-color: #002a23 !important; }
.bg3 { background-color: #639138 !important; }
.bg4 { background-color: #a4c4bf !important; }

.marked  { color: #639138 !important; }

.clipped {
         padding-bottom: 80px !important;
         -webkit-mask:radial-gradient(100% 100% at top, #fff calc(100% - 100px), #0000 calc(100% - 100px + 6px));
          mask:radial-gradient(100% 100% at top, #fff calc(100% - 100px), #0000 calc(100% - 100px + 6px));
}
#wrapper.clipped {
         padding-bottom: 0px !important;
         -webkit-mask: none !important;
         mask: none !important;
}

.clipped_top {
         padding-top: 50px !important;
         -webkit-mask:radial-gradient(100% 100% at bottom, #fff calc(100% - 100px), #0000 calc(100% - 100px + 6px));
          mask:radial-gradient(100% 100% at bottom, #fff calc(100% - 100px), #0000 calc(100% - 100px + 6px));
}

.bg_verlauf_1 {
         background: #053a31; /* Old browsers */
         background: -moz-linear-gradient(top,  #053a31 0%, #002a23 100%);
         background: -webkit-linear-gradient(top,  #053a31 0%,#002a23 100%);
         background: linear-gradient(to bottom,  #053a31 0%,#002a23 100%);
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#053a31', endColorstr='#002a23',GradientType=0 );
}

.bg_verlauf_2 {
         background: #639138; /* Old browsers */
         background: -moz-linear-gradient(bottom,  #639138 0%, #3a690e 100%);
         background: -webkit-linear-gradient(bottom,  #639138 0%,#3a690e 100%);
         background: linear-gradient(to top,  #639138 0%,#3a690e 100%);
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a690e', endColorstr='#002a23',GradientType=0 );
}

.icon {
         float: left;
         display: block;

         width: 32px;
         height: 32px;
         margin: 0px 5px 0px 0px;
         padding: 0px 0px;
         border: 0px #ffffff solid;

         background-color: transparent;
         background-size: 32px 32px;
         background-repeat: no-repeat;
         background-position: center center;
}
.icon.home { background-image: url(../images/icon_home.png); }
.icon.cashback { background-image: url(../images/icon_cashback.png); }
.icon.reg { background-image: url(../images/icon_reg.png); }
.icon.login { background-image: url(../images/icon_login.png); }
.icon.logout { background-image: url(../images/icon_logout.png); }

.icon.fav { background-image: url(../images/icon_fav.png); }
.icon.star { background-image: url(../images/icon_star.png); }
.icon.star_hover { background-image: url(../images/icon_star_hover.png); }

.icon.linkedin { background-image: url(../images/icon_linkedin.png); }
.icon.x { background-image: url(../images/icon_x.png); }
.icon.facebook { background-image: url(../images/icon_facebook.png); }
.icon.insta { background-image: url(../images/icon_insta.png); }


/* Seite */
#wrapper {
         width: 100%;
         margin: 0px auto;
         padding: 0px;
         max-width: 1200px;
         background: #f2f6ef;
         -webkit-box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.45);
         -moz-box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.45);
         box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.45);
}

.in {
         width: calc(100% - 40px);
         max-width: 1140px;
         min-width: 760px;
         margin: 0px auto;
}

#header {
         display: block;
         background: #639138;
         width: calc(100% - 0px);
         min-width: 800px;
         height: auto;
         margin: 0px auto;
}

#header .top {
         display: block;
         background: #002a23;
         width: calc(100% - 0px);
         height: 80px;
}

#header.member { min-height: 90px; height: auto; }
#header.clipped { max-height: 350px; }

#header .membermenu {
         padding: 10px 0px;
         color: #FFFFFF;
         text-shadow: rgba(0,0,0,0.2) 1px 1px 0px;
}

#header .membermenu a {
         color: #FFFFFF;
         text-shadow: rgba(0,0,0,0.2) 1px 1px 0px;
}

#logo {
         float:left;
         width: 250px;
         height: 60px;

         margin: 10px 0px 0px 0px;
         padding: 0px 0px 0px 0px;
         text-align: left;
}
#logo img { width: auto; max-width: 300px; padding: 0; height: 100%; }

#menu {
         float: right;
         width: calc(100% - 252px);

         margin: 18px 0px 0px 0px;
         padding: 0px 0px 0px 0px;
         text-align: right;
         border: 0px #000000 solid;
}

#menu a {
         display: inline-block;

         margin: 3px 10px 3px 10px;
         padding: 6px 12px;
         font-size: 1.1em;
         font-weight: bold;
         color: #f2f6ef;
         text-decoration: none;
}

#menu a.active, #menu a:hover { color: #639138; }
#menu .icon {width: 22px; height: 22px; background-size: 22px 22px; }

#splash {
         display: table;
         width: 100%;
         height: 360px;
}
#splash .text { display: table-cell; width: 400px; border: 0px #000000 solid; text-align: center; vertical-align: top; padding-top: 30px; font-size: 1.3em; color: #FFFFFF; text-shadow: 2px 2px 5px rgba(0,0,0,0.3); }
#splash .text a.button { font-size: 1.1em; padding: 10px 15px 5px 15px !important; }
#splash .image { display: table-cell; width: calc(100% - 400px); height: auto; vertical-align: middle; border: 0px #000000 solid; text-align: center; background: transparent url(../images/header_bg.jpg) bottom left no-repeat; background-size: 100%; }
#splash .text h1 { color: #FFFFFF; font-weight: 700; text-align: center; line-height: 1.1em;  }

/* NAV */
#header .membermenu nav {
         display: inline-block;
         float: left;
         animation: slide-in 1s ease-out;
}

/*#639138 (Grün), #002a23 (Dunkel Grün), #f2f6ef (Hell Grün BG), #a4c4bf  */

#header .membermenu nav ul {
         position: relative;
         display: flex;
         flex: 1 1 auto;
         margin: 0;
         padding: 0 20px;
         list-style-type: none;
         li:not(:last-child) {
                 margin-right: 20px;
         }
         li {
                 border: 2px solid transparent;
                 border-radius: 25px;
                 padding: 5px 10px;
                 transition: background 0.2s;
                 list-style-type: none;
                 cursor:pointer;  background: rgba(0,0,0,0.1);
                 a {
                         display: block;
                         color: #FFFFFF;
                         text-decoration: none;
                         text-transform: uppercase;
                         transition: color 0.2s;

                 }
                 ul {
                         visibility: hidden;
                         opacity: 0;
                         position: absolute;
                         display: block;
                         margin: 15px -12px;
                         padding: 0;
                         background: #639138;
                         border: 2px solid rgba(0,0,0,0.1);
                         border-radius: 0px;
                         transition: opacity 0.2s, visibility 0.2s;
                         li {
                                 margin: -2px 0 0 -2px;
                                 width: calc(100% - 20px);
                                 line-height: 1.7;
                                 a {
                                         color: #2375D8;
                                 }
                         }
                 }
                 &:hover {
                         background: #002a23;
                         border: 2px solid rgba(0,0,0,0.0);
                         a {
                                 color: #F9F8FD;
                         }
                         ul {
                                 background: #002a23;
                                 visibility: visible;
                                 opacity: 1;
                                 box-shadow: 0px 3px 5px 2px rgba(0,0,0,0.1);
                                 li {
                                         a {
                                                 color: #F9F8FD;
                                         }
                                 }
                         }
                         li {
                                 border-radius: 0px;
                         }
                 }
         }
}
@keyframes slide-in {
         0% { top: -50px; }
         40% { top: 20px; }
         70% { top: 10px; }
         100% { top: 15px; }
}

a .option {
         display: inline-block;
         width: 16px;
         height: 16px;
         border: #fff 0px solid;
}
a .option.aktiv { background: transparent url(../images/menue_rally_aktiv.png) center center no-repeat; }
a .option.inaktiv { background: transparent url(../images/menue_rally_inaktiv.png) center center no-repeat; }



/* Seite */
#site {
         margin: 10px auto 80px auto;
         padding: 10px 0px;
         min-height: 250px;
         font-size: 1.0em;
}

#sidebar {
         float: left;
         width: 300px;
}
#sidebar .h3 { text-align: left; }
#sidebar .box, #sidebar .boxenincludes, #sidebar .vouchers-menubox-info { color: #FFFFFF !important; }
#sidebar .mobile { display: none; }

#sidebar .box a {
         display: block;
         width: calc(100% - 10px);
         min-height: 1px;
         padding: 3px 5px;
         margin: 1px 0px 0px 0px;

         background: rgba(255,255,255,0.1);
         line-height: 1.1em;
         text-transform: normal;
         text-decoration: none;
         color: #FFFFFF;
         border-left: 2px #639138 solid;

         transition: background-color 0.3s ease-in-out;
}
#sidebar .box a:hover { background: #639138; color: #FFFFFF; }

#content {
         float: right;
         width: calc(100% - 300px - 20px);
         margin: 0px 0px;
}

#content_big {
         float: none;
         width: calc(100% - 0px - 0px);
         margin: 10px 0px;
}

/* Footer */
#footer {
         background: #002a23;
         width: calc(100% - 0px);
         padding: 10px 0px 10px 0px;
         margin-top: -100px;
}
#footer .item:nth-child(1) img { width: 200px; height: auto; margin-bottom: 10px; }

#footer .logo {
         display: block;
         width: 100%;
         min-height: 80px;
         height: auto;
         background: transparent url(../images/logo_bonusfarm_white.png) left center no-repeat;
         background-size: 90% auto;
}

#footer .item {
         float: left !important;
         display: block;

         padding: 0px;
         margin: 20px 10px;

         color: #FFFFFF;
         font-size: 0.9em;
         text-align: left;
         opacity: 0.7;

         border: 0px #FFFFFF solid;
}
#footer .item:nth-child(1) { width: 240px; }
#footer .item:nth-child(2),
#footer .item:nth-child(3),
#footer .item:nth-child(4),
#footer .item:nth-child(5) { float: right; width: calc(100% / 4 - (260px / 4) - 30px); }

#footer .item b {
         display: block;
         padding: 0px;
         margin: 0px 0px 10px 0px;

         color: #FFFFFF;
         font-size: 1.0em;
         text-align: left;
         opacity: 0.6;
}

#footer a, #footer a:link, #footer a:visited {
         display: block;
         color: #FFFFFF;
         font-size: 1.0em;
         font-weight: normal;

         padding: 2px 0px 2px 0px;
         margin: 0px 0px 0px 0px;
         text-decoration: none;

         opacity: 1.0;
}
#footer a:hover { color: #639138; opacity: 1.0; }
#footer .f_r { color: #FFFFFF; font-size: 0.9em; opacity: 0.4; }


/* Boxen */
.box {
         display: block;
         width: calc(100% - 22px);
         background: #FFFFFF;
         padding: 10px;
         margin-bottom: 15px;
         border: 1px rgba(0,0,0,0.1) solid;
         -webkit-box-shadow: 0px 10px 10px -10px rgba(0,0,0,0.75);
         -moz-box-shadow: 0px 10px 10px -10px rgba(0,0,0,0.75);
         box-shadow: 0px 10px 10px -10px rgba(0,0,0,0.75);
}

.box.no_pad { padding: 0px !important; width: calc(100% - 0px); }

.box_head {
         display: block;
         font-family: 'Source Sans Pro';
         font-size: 1.1em;
         font-weight: normal;
         text-align:left;
         vertical-align:top;
         color:#FFFFFF;

         margin: 0px 0px 10px 0px;
         padding: 3px 10px 3px 10px;

         background: #639138;
}


#login_box {
         position: absolute;
         z-index: 1000;
         left: calc(50% - 220px);
         top: calc(30% - 100px);

         display: none;
         width: 400px;
         padding: 20px;
         margin: 0px auto;

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

#login_box b {
         color: #FFFFFF;
         font-size: 2.0em;
         font-weight: 900;
         display: block;
         text-align: center;
}

#login_box form { max-width: 300px; margin: 10px auto; }
#login_box form, #login_box fieldset { border: 0px; }
#login_box input { width: calc(100% - 12px); }
#login_box input[type="submit"] { width: calc(100% - 0px); padding: 3px 0px !important; }


/* startseite */
#startseite { background: #FFFFFF; }
#startseite h2 { font-size: 2.2em; }
#startseite .box3er .item {
         float: left;
         display: block;
         width: calc((100% / 3) - 60px);

         padding: 20px;
         margin: 20px 0px;

         font-size: 1.2em;
         text-align: center;
}
#startseite .box3er .item:nth-child(2) { margin: 20px 30px; }
#startseite .box3er .item i { font-size: 3.0em; font-weight: bold; line-height: 1.0em; display: block; text-align: center; margin-bottom: 20px; }
#startseite .box3er .item h3 { text-align: center; font-size: 1.0em; text-transform: none; }

#startseite .korn { display: inline-block; background: transparent url(../images/korn.png) left 120px no-repeat; min-width: 300px; min-height: 440px; border: 0px #000 solid; background-size: 80%; }
.infotext .w66 { padding-top: 20px; }

#kampagnen {}
#kampagnen .item { float: left; width: calc(100% / 3 - 10px - 20px); margin: 5px; color: #FFFFFF; padding: 5px 10px 0px 10px; }
#kampagnen .item .icon { width: 20px; height: 20px; background-size: 20px; }
#kampagnen .item b { display: block; float: left; overflow: hidden; width: calc(100% - 30px); height: 20px; }
#kampagnen .item .fav { float: right; width: 20px; }

#kampagnen .item .image { display: inline-block; width: 90px; margin: 10px 10px 10px 0px; float: left; background: #FFFFFF; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
#kampagnen .item .image img { width: calc(100% - 4px); height: auto; max-width: 90px; border: 2px #FFFFFF solid; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
#kampagnen .item .verguetung { display: inline-block; float: right; overflow:hidden; width: calc(100% - 110px); height: 80px; margin: 10px 0px 5px 0px; color: #FFFFFF !important; font-size: 0.9em !important; }


/* Formulare Sumbit + Button */
input[type="text"], input[type="date"], input[type="password"], select, textarea {
         /*display: inline-block; */

         text-align: left;
         font-size: 1.0em;
         font-weight: normal;
         text-shadow: rgba(0,0,0,0.2) 1px 1px 1px;
         color: #000000;

         /*
         padding: 3px 6px 3px 6px;  */
         margin: 2px 0px;


         text-decoration:none;
         text-transform: normal;

         background-color: #EFEFEF;

         border: 1px #7F7F7F solid;
         -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
         border-radius: 3px;
}

input[type="submit"], input[type="reset"], button[type="submit"] {
         /*display: inline-block;   */
         cursor: pointer;
        /* width: auto; */

         font-family: 'Source Sans Pro';
         text-align: center;
         font-size: 1.0em;
         font-weight: normal;
         text-shadow: rgba(0,0,0,0.2) 1px 1px 1px;
         color: #FFFFFF;

         /*
         padding: 3px 6px 3px 6px;  */
         margin: 2px 0px;


         text-decoration:none;
         text-transform: normal;

         background-color: #639138;
         border: 2px transparent solid;
         -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
         border-radius: 3px;
}

input[type="submit"]:hover, input[type="reset"]:hover, button[type="submit"]:hover {
         background-color: #002a23;

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

         margin: 2px 0px;

         border: 2px transparent solid;
         -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
         border-radius: 3px;
}


/* Schatten */
#shadow {
         display: none;
         position: fixed;
         top: 0px;
         left: 0px;
         right: 0px;
         bottom: 0px;

         z-index: 999;
         background-color: rgba(255, 255, 255, 0.75);
         width: 100%;
         height: 100%;
         cursor: pointer;
}

#w {
        position: fixed; z-index: 20000; display: none; bottom: 0; left: 0px; background: #000000; color: #FFFFFF; padding: 10px;
}