/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
*{

  webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust:none;
  outline: 0;
}

html,
body,
button,
input,
select,
textarea {
    color: #660000;
}

html, body {
    font-size: 1em;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}
html {
    overflow-y: scroll;
}

input, button, select, textarea {
    font-weight: 300;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Links
   ========================================================================== */

a, .animated { -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; }
a { text-decoration: underline; color: #660000; }
a:visited {  }
a:hover { }
a:focus { }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active, a:focus { outline: 0; text-decoration: none; color: #660000; }

/* ==========================================================================
   Overwrite Bootstrap defaults
   ========================================================================== */

/* .website-wrapper                                { min-width: 1400px; }
.container                                      { max-width: 1400px; width: 1400px !important; padding-right: 0; padding-left: 0; overflow: hidden; } */

@media(max-width: 1199px) {
    .website-wrapper {
        min-width: 100%;
    }

    .container {
        max-width: 100%;
        width: 100% !important;
    }
}

@media(min-width: 1400px) {
    .website-wrapper {
        min-width: 1400px;
    }

    .container {
        max-width: 1400px;
        width: 1400px !important;
    }
}

.website-wrapper                                {  }
.container                                      { padding-right: 0; padding-left: 0; overflow: hidden; }
.container .row                                 { margin-left: -9px; margin-right: -9px; }
.container .row .grid                           { padding-left: 9px; padding-right: 9px; overflow: hidden; }
.container .row .grid.big-padding               { padding: 30px; }
.container .row.grid-bottom-padding > .grid     { padding-bottom: 18px; }
.grid-bottom-margin                             { margin-bottom: 35px; }

nav > ul                                        { margin: 0; padding: 0; list-style-type: none; }
nav > ul > li                                   { display: block; }
nav > ul > li > a                               { display: block; }
nav.horizontal-nav > ul > li                    { float: left; }

nav.horizontal-nav.centered > ul                { display: block; text-align: center }
nav.horizontal-nav.centered > ul > li           { float: none; display: inline-block; }

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

.gallery { padding-left: 15px; }
.gallery .col-md-2 { padding: 0 5px 5px 0;}

.gallermodule { padding-left:9px; margin-bottom:5px; }
.gallermodule img { padding-right:12px; padding-bottom:15px; }

.message-wrapper {
  margin-top: 10px;
  margin-bottom: 25px;
}

.float-none { float: none!important; }

.error, .success { color: white; border-radius: 4px; padding: 10px; }
.error { background-color: crimson; }
.success { background-color: forestgreen; }

.download { background-position:center left; padding-left:25px; background-repeat:no-repeat; }


/* typo */

/*
font-family:'UniversLTW01-47LightCn';
font-family:'UniversLTW01-67BoldCn';
*/

/*h1, h2, h3, h4, h5, h6, p, a,
li, span, td, th, html, body                    { margin-top: 0; font-family: 'UniversLTW01-47LightCn', Arial, sans-serif; }*/
h1, h2, h3, h4, h5, h6, p, a,
li, span, td, th, html, body                    { margin-top: 0; font-family: 'Roboto Condensed', Arial, sans-serif; font-weight: 300;}

h1,                                             { font-size: 21px; line-height: 1.4; margin-bottom: 15px; font-weight: bold; }
h1, h2, h3                                      { margin-bottom: 15px; }
h4                                              { font-size: 21px; }
p                                               { font-size: 18px; margin-bottom: 8px; }
li                                              { font-size: 18px; }
/*b, strong                                       { font-family: 'UniversLTW01-67BoldCn', Arial, sans-serif; font-weight: normal; }*/
b, strong                                       { font-family: 'Roboto Condensed', Arial, sans-serif; font-weight: 700; }
.uppercase                                      { text-transform: uppercase; }

/* header */

header                                          { background: url('../img/header_bg.png') repeat-y top center #d2c9c3; background-size: contain; }
header .container                               { min-height: 230px; }
header .top-nav-wrapper                         { display: block; width: 601px; height: 124px; background: url('../img/nav_top_bg.png') no-repeat left top transparent; margin-left: 183px; float: left }
header .top-nav                                 { display: block; margin: 29px 0 0 35px; }
header .top-nav a                               { color: #FFFFFF; font-size: 18px; line-height: 1; padding: 0 10px; text-decoration: none; }
header .top-nav a.active                        { text-decoration: underline; }
header .logo                                    { left:50%; transform: translateX(-50%);}
header .logo, header .logo a                    { clear: both; display: block; height: 132px; margin: 0 auto; position: absolute; top: 35px; width: 467px; }
header .logo a                                  { background: url("../img/logo_compactcook.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); margin: 0; top: 0; }
header .logo a:hover                            { opacity: 0.5; }
nav a                                           { text-decoration: none; }

header .top-langnav-wrapper                     { margin-right: 236px; float: right; width: 200px; }
header .langnav                                 { float: right; list-style-type: none; padding: 0; margin: 10px 0 0; position: relative; right: -5px; }
header .langnav li                              { float: left; }
header .langnav li a                            { text-decoration: none; text-transform: uppercase; font-size: 18px; line-height: 27px; padding: 0 5px; color: #b8b2af; text-decoration: underline; }
header .langnav li a:hover,
header .langnav li a:active,
header .langnav li a:focus                      { text-decoration: none; }

header .langnav li a.active                     { color: #660000; text-decoration: none; }

header .top-accountnav-wrapper                     { margin-right: 236px; float: right; width: 200px; }
header .accountnav                                 { float: right; list-style-type: none; padding: 0; margin: 10px 0 0; position: relative; right: -5 px; }
header .accountnav li                              { float: left; position: relative; }
header .accountnav li:first-of-type:after          { content: ""; position: absolute; display: block; width: 1px; height: 17px;background-color: #660000; top: 6px; right: 0;}
/*header .accountnav li a                            { font-family: 'UniversLTW01-67BoldCn', Arial, sans-serif; font-size: 16px; line-height: 27px; padding: 0 8px; color: #660000; text-decoration: underline; }*/
header .accountnav li a                            { font-family: 'Roboto Condensed', Arial, sans-serif; font-size: 16px; line-height: 27px; padding: 0 8px; color: #660000; text-decoration: underline; font-weight: 700;}
header .accountnav li a:hover,
header .accountnav li a:active,
header .accountnav li a:focus                      { text-decoration: none; }

header .accountnav li a.active                     { color: #660000; text-decoration: none; }

#mobile-menu{
  display: none;
  position: absolute;
  background: url('../img/header_bg.png') repeat-y top center #d2c9c3;
  background-size: contain;
  top: 180px;
  left: 0;
  height: calc(100vh - 157px);
  width: 100%;
  z-index: 100;
}
#mobile-menu ul{
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
}
#mobile-menu ul li{
  list-style: none;
  padding-bottom: 8px;
  border-bottom: 1px solid #660000;
  margin-bottom: 8px;
}
#mobile-menu ul li a{
  text-decoration: none;
  display: block;
}
#mobile-menu .grid-einkaufslisten-mobile{
  position: fixed;
  bottom: 20px;
  left: calc(50% - 10px);
  transform: translateX(-100%);
}
#mobile-menu .grid-favoriten-mobile{
  position: fixed;
  bottom: 20px;
  right: calc(50% - 10px);
  transform: translateX(100%);
}
#mobile-menu-icon {
  display: none;
  cursor: pointer;
  position:absolute;
  top: 25px;
  left:15px;
  width:35px;
  padding:0;
  z-index:1100;
  transition: top 0.3s ease;
  height: auto;
}

#mobile-menu-icon .bar1, #mobile-menu-icon .bar2, #mobile-menu-icon .bar3 {
  width: 35px;
  height: 5px;
  background-color: #660000;
  margin: 0 0 6px 0;
  transition: 0.4s;
}

#mobile-menu-icon.change .bar1 {
  -webkit-transform: rotate(45deg) translate(5px, 11px);
  transform: rotate(45deg) translate(5px, 11px);
}

#mobile-menu-icon.change .bar2 {opacity: 0;}

#mobile-menu-icon.change .bar3 {
  -webkit-transform: rotate(-45deg) translate(4px, -10px);
  transform: rotate(-45deg) translate(4px, -10px);
}

/* content */

body                                            { background-color: #eeebe9; }

section.content                                 { background-color: #eae6e4; position: relative; z-index: 5; }
section.content .side-content .inner            { box-shadow: 0 0 10px #bbbbbb; }
section.content .container .grid.side-content.side-left { padding-left: 9px; }
section.content .container .grid.side-content.side-right { padding-right: 9px; }
section.content .mid-content                    { background-color: #fff; box-shadow: 0 0 5px #eee; min-height: 700px; }

/*
#article-3 section.content .side-content > *        { opacity: .5; }
#article-3 section.content .side-content > *:hover  { opacity: 1; }
*/


.sidecontent-colored                            { background-color: #d3cac5; min-height: 330px; padding: 10px; }
.sidecontent-new                                { margin-bottom: 20px; }
.sidecontent-new b a                            { font-family: inherit; }
.sidecontent-new .sidecontent-colored           { min-height: auto; }
.sidecontent-colored .mehrlink                  { /* font-size: 26px; line-height: 33px; */ float: right; }
.side-content p                                 { font-size: 18px; line-height: 1.4; }
/*.side-content .h1                               { font-size: 47px; font-weight: 300; line-height: 59px; font-family: 'UniversLTW01-47LightCn', Arial, sans-serif; text-transform: uppercase; }*/
.side-content .h1                               { font-size: 47px; font-weight: 400; line-height: 59px; font-family: 'Roboto Condensed', Arial, sans-serif; text-transform: uppercase; }
.side-left .inner-side-title                    { text-align: right; }
.inner-side-title                               { margin-top: 80px; }

.img-and-caption                                { position: relative; }
/*.img-and-caption figcaption                     { position: absolute; top: 9px; left: 13px; color: #fff; text-transform: uppercase; font-family: 'UniversLTW01-67BoldCn', Arial, sans-serif; }*/
.img-and-caption figcaption                     { position: absolute; top: 9px; left: 13px; color: #fff; text-transform: uppercase; font-family: 'Roboto Condensed', Arial, sans-serif; font-weight: 700;}


/* categories */

.category .inner                                { background-color:#FFF;  box-shadow: 2px 3px 7px #AAAAAA; }
.category .inner a                              { position: relative; min-height: 150px; padding: 13px 9px; display: block; text-decoration: none; }
.category .inner a h2,
.category .inner a h3                           { font-size: 20px; line-height: 1; margin-bottom: 0px; text-transform: uppercase; line-height: 29px; position: relative; z-index: 4; }
.category .inner a .categocy-thumbnail          { position: absolute; bottom: -18px; right: -18px; z-index: 5; }


.category .inner a h2.cat-slogan { font-size:14px; line-height:14px; margin-bottom:8px; }

.recipe-list                                    { margin-top: 30px; }

.compact-list-wrapper > a                       { display: block; margin: 0 -15px 10px; padding: 15px; position: relative; }
.compact-list-wrapper > a:hover                 { background-color: #F5F5F5; box-shadow: 0 0 5px #aaaaaa; }
.compact-list-wrapper .text-wrapper h2          { font-size: 26px; }

.compact-list-wrapper .compact-info             { margin-top: 5px; }
.compact-list-wrapper .compact-info .img-container { display: block; height: 42px; }
.compact-list-wrapper .compact-info p           { line-height: 1; font-size: 16px; line-height:22px; }
.compact-list-wrapper .compact-info p .title.uppercase { color: grey; text-transform: uppercase; }
/*.compact-list-wrapper .compact-info p .data     { clear: left; font-family: 'UniversLTW01-67BoldCn', Arial, sans-serif; color: #660000; }*/
.compact-list-wrapper .compact-info p .data     { clear: left; font-family: 'Roboto Condensed', Arial, sans-serif; color: #660000; font-weight: 700;}
.compact-list-wrapper .compact-info .img-container > img { display: block; position: relative; top: 50%; transform: translateY(-50%) }

.einkaufsliste-wrapper {
    margin-bottom: 20px;
}
.einkaufsliste-item {
    padding: 9px;
}
.einkaufsliste-item .img-container{
  max-width: 230px;
}

.einkaufsliste-item h2 {
    margin-bottom: 10px;
    font-size: 25px;
}

.einkaufsliste-item .remove-link {
    margin-top: 15px;
    font-size: 15px;
}

.menuvorschlag-wrapper                          { padding: 40px 0; text-align: center; }
.menuvorschlag                                  { box-shadow: 0 0 3px #b1b1b1; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; display: inline-block; line-height: 34px; padding: 0 17px; text-decoration: none; }

.most-popular a                                 { text-decoration: none; }
.most-popular p                                 { line-height: 1.2; margin-top: 5px; height:60px; }
/*
.most-popular-hover:hover .grid                 { opacity: .5; }
.most-popular-hover:hover .grid:hover           { opacity: 1 !important; }
*/

/* sponsoren */

.sponsorbox { background-color: #ffffff; margin-top: 280px; -webkit-box-shadow: 0px 0px 13px -4px rgba(153,153,153,1); -moz-box-shadow: 0px 0px 13px -4px rgba(153,153,153,1); box-shadow: 0px 0px 13px -4px rgba(153,153,153,1);}
.sponsorbox .logo img { display: block; margin-left: auto; margin-right: auto; width: 280px; padding: 20px;}
.sponsorbox .sponsor img {display: block; margin-left: auto; margin-right: auto; padding: 20px;}
.sponsorbox .sponsorlabel h3 {text-align: center; padding: 20px;}

/* compact detail */

.compact-detail-left                            { position: relative; }
.compact-detail-left .title                     { position: relative; z-index: 2; }
.compact-detail-left .title h1                  { font-size: 33px; line-height: 1.1; margin: 0; padding: 13px 15px 12px; text-transform: uppercase; }
.compact-detail-left .action-top                { height: 29px; position: absolute; top: -62px; }
.compact-detail-left .action-top .action        { float: left; }
.compact-detail-left .action-top .action a      { display: block; background-color: #ffffff; }
.compact-detail-left .img-description           { font-size: 12px; color: grey; margin-top: 4px; }
.compact-detail-left .youtube                   { margin-top: 15px; }
.video-container .youtube                       { margin-top: 0; }
.bottom-padding                                 { padding-bottom: 20px; }
.videowrapper                                   { position: relative; padding-bottom: 56.45%; height: 0; }
.videowrapper.portrait                          { padding-bottom: 75%; }
.videowrapper iframe                            { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.videowrapper-youtube.portrait iframe           { width: 42.2%; left: 50%; transform: translateX(-50%); }


.detail-img-container                           { position: absolute; top: 61px; z-index: 1; padding-right: 9px;}
.detail-img-container.video-container           { top: auto; }

.action.email > a                               { background: url('../img/icon_email.png') no-repeat center center; }
.action.pdf > a                                 { background: url('../img/icon_download.png') no-repeat center center; }
.action.print > a                               { background: url('../img/icon_print.png') no-repeat center center; }

.action > a                                     { font-size: 19px; font-weight: 500; text-decoration: none; }

.compact-detail-right .inner                    { display: block; position: relative; min-height: 507px; padding-bottom: 122px; }
.compact-detail-right .compact-info             { display: block; float: left; padding-right: 18px; }
.compact-detail-right .compact-info p           { font-size: 13px; line-height:18px; }
.compact-detail-right .compact-info p .title.uppercase { color: grey; text-transform: uppercase; font-size: 12px; }
/*.compact-detail-right .compact-info p .data     { clear: left; font-family: 'UniversLTW01-67BoldCn', Arial, sans-serif; color: #660000; }*/
.compact-detail-right .compact-info p .data     { clear: left; font-family: 'Roboto Condensed', Arial, sans-serif; color: #660000; font-weight: 700}

.compact-detail-right .compact-info-wrapper     { position: absolute; top: -70px; width: 100% }
.compact-detail-right h2                        { font-size: 14px; border-bottom: 1px solid #660000; line-height: 12px; text-transform: uppercase; margin-bottom: 5px; }
.compact-detail-right p,
.compact-detail-right ol,
.compact-detail-right ul,
.compact-detail-right td                        { color: #000; font-size: 15px; line-height: 20px; margin: 0; padding: 0; }
.compact-detail-right li                        { color: #000; font-size: 15px; }
.compact-detail-right ol,
.compact-detail-right ul                        { padding-left: 20px; }
.compact-detail-right .compact-infobox          { margin-bottom: 10px; }
.compact-detail-right .compact-infobox.description { margin-bottom: 20px; }
.compact-detail-right .compact-infobox.fading-bottom-top{ position: relative; }
.compact-detail-right .compact-infobox.fading-bottom-top:after{ content: ""; display: block; position: absolute; bottom: 0; left: 0; height: calc(100% - 13px); width: 100%; background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 01) 50%, rgba(255, 255, 255, 0) 100%); }
.compact-detail-right .ingredients p            { margin: 0; overflow: hidden; }
/*.compact-detail-right .ingredients p:last-child { margin-bottom: 8px; }*/
span.left  { display: inline-block; min-width: 51px; float: left; min-height: 1px; margin-right:5px;}
span.right { float: left; width: 150px; }

.compact-infobox.bewertung.clearfix {
    bottom: 0;
    position: absolute;
    width: 100%;
}
.compact-detail-right .compact-infobox.login-box{
	padding: 10px;
	background-color: #660000;
  position: relative;
  top: -45px;
}
.compact-detail-right .compact-infobox.login-box *{
	color: white;
}
.compact-detail-right .compact-infobox.login-box a{
    font-size: .9rem;
	background-color: white;
	padding: 5px 20px;
	text-decoration: none;
	color: #660000;
	margin-top: 10px;
	display: inline-block;
	width: 176px;
	text-align: center;
	font-weight: bold;
}
.compact-detail-right .compact-infobox.login-box span{
	display: inline-block;
	margin: 0 10px;
}

.infobox-login-offset {
    position: relative;
    top: -25px;
}


.compact-detail-right .person-count             { background-color: #d3cac5; display: inline-block; padding: 2px 3px; position: relative; top: -1px; }
#persons                                        { width: 40px; -webkit-appearance: none; -moz-appearance: textfield; appearance: textfield; border: none; padding-left: 4px; margin: 0 4px;}

.compact-detail-right .anzahl-umrechnen         { color: #9b9b9b; display: inline-block; margin-left: 40px; text-transform: none; background: none; border: none; }

.link-einkaufsliste                             { color: #9b9b9b; text-decoration: none; }
.bewertung                                      { margin-top: 30px; }

/* breadcrumb */

.breadcrumb-wrapper                             { margin-bottom: 70px; }
.breadcrumb > li + li:before                    { content: "/"; color: #660000; }
.breadcrumb                                     { background: none repeat scroll 0 0 transparent; padding: 0; }
.breadcrumb li                                  { text-transform: uppercase; font-size: 20px; color: #660000  !important; }

.breadcrumb a, .breadcrumb a:hover { color: #aaa; }

.breadcrumb-spacer                              { height: 48px; }

/* einkaufsliste */

.grid-einkaufslisten { top: 196px; left: 30px; position: absolute; text-transform: uppercase; }
.grid-einkaufslisten a { line-height: 33px; text-decoration: none; }

@media(min-width: 1200px) {
    .grid-einkaufslisten { left: 228px; }
}

@media(min-width: 1400px) {
    .grid-einkaufslisten { left: 265px; }
}

/* favoriten */

.grid-favoriten { top: 196px; left: 180px; position: absolute; text-transform: uppercase; }
.grid-favoriten a { line-height: 33px; text-decoration: none; }

@media(min-width: 1200px) {
    .grid-favoriten { left: 368px; }
}

@media(min-width: 1400px) {
    .grid-favoriten { left: 405px; }
}

.favoriten-add { margin-left: 52px; }
.glyphicon-star { margin-right: 3px; }
.glyphicon-pdf { margin-right: 3px; }

/* search */

.grid-search                                    { background-color: #fff; top: 193px; box-shadow: 0 0 5px #eee; padding: 0; position: absolute; right: 237px; width: auto; z-index: 2; }
.search-wrapper                                 { display: block; width: 340px; overflow: hidden; float: right }
.search-left-side                               { background-color: #ffffff; float: left; line-height: 36px; padding: 0 10px; width: 70px; position: relative; z-index: 2; text-transform: uppercase; }
.search-right-side                              { display: block; float: left; height: 36px; width: 270px; }
.search-right-side > input                      { background: none repeat scroll 0 0 #fff; border: 0 none; display: block; float: left; height: 36px; line-height: 36px; width: 238px; padding: 0 5px 0 10px; }
.search-button                                  { background: none repeat scroll 0 0 #fff; border: 0 none; display: block; float: left; height: 36px; padding: 2px 5px; }
.search-wrapper.home                            { margin: 40px auto 70px; float: none; }
.glyphicon.glyphicon-search                     { position: relative; top: 3px; }

/* footer */

footer                                          { background-color: #eeebe9; padding-bottom: 30px; }
footer.no-banner                                          { padding-bottom: 0px; }
footer .footer-nav a:not(.icon)                 { color: #660000; font-size: 18px; line-height: 74px; padding: 0 15px; text-decoration: none; }
footer .footer-nav a.active                     { text-decoration: underline }
footer .footer-nav a.icon                       { float: left; position: relative; top: 8px; margin-right: 10px; }
footer .footer-nav a.icon:last-child           { margin-right: 0px; }
footer .footer-nav a.icon:hover                 { opacity: .6; }

/* grids */
.my-category-col-mobile{
  float: left; position: relative;
}
.col-xs-1-2,
.col-xs-2-2
{ float: left; position: relative; }

.col-xs-1-2     { width: 50%; }
.col-xs-2-2     { width: 100%; }


@media(min-width: 768px){
  .col-md-1-5,
  .col-md-2-5,
  .col-md-3-5,
  .col-md-4-5,
  .col-md-5-5     { float: left; position: relative; }

  .col-md-1-5     { width: 20%; }
  .col-md-2-5     { width: 40%; }
  .col-md-3-5     { width: 60%; }
  .col-md-4-5     { width: 80%; }

  .col-md-push-1-5 { left: 20%; }
  .col-sm-pull-3-5 { right: 60%; }
}


/* slider */

.cycle-next, .cycle-prev {
    margin-top: -42px;
    position: absolute;
    top: 50%;
    z-index: 999;
    font-size: 25px;
    cursor: pointer;
}
.cycle-next {
  right: 95px;
}
.cycle-prev {
  left: 95px;
}


/* forms */

label                                           { font-weight: 300; margin: 0; }

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Allowing overflow to be displayed
 */

.overflow-visible {
    overflow: inherit !important;
}

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

.line {
  margin-bottom: 10px;
}

.line input {
  width: 100%;
}

#article-31 section.content .mid-content,
#article-32 section.content .mid-content {
  min-height: auto;
}
body#article-31,
body#article-32 {
  background-color: #eae6e4;
}


.display_archive .campaign, .display_archive .campaign a {
	font-size: 18px;
	/*font-family: 'UniversLTW01-47LightCn', Arial, sans-serif;*/
	font-family: 'Roboto Condensed', Arial, sans-serif;
	font-weight: 300;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: "";
    }


    abbr[title]:after {
        content: "";
    }


    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
    .side-content, header, footer, .link-einkaufsliste, .anzahl-umrechnen, .action {
      display: none !important;
    }
}

.videos-text p {
    font-size: 16px;
}

.videos-text a {
    text-decoration: none;
}

.service-text {
    margin-top: 20px;
}

.service-text > p {
    font-size: 0.92em;
}

.cc-window.cc-banner{
	padding: 0px 0 0 20px !important;
}
.cc-banner .cc-message{
  padding: 10px 0;
}

/* --- Fancybox -------------------- */
.fancybox-is-open .fancybox-bg{
	opacity: .6;
}
.fancybox-content.ajax-box{
  display: inline-block;
  max-width: 100%;
  width: 633px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 50px;
  background: #ebebeb;
}
.fancybox-content.ajax-box p{
  font-size: 16px;
}
.ajax-box button{
  min-width: 100px;
  margin-right: 20px;
}
.ajax-box a{
  text-decoration: underline;
}
.compensate-for-scrollbar{
  margin-right: 0!important;
}
.fancybox-button svg{
  width: auto;
}
.fancybox-slide--html .fancybox-close-small{
  padding: 0;
  min-width: auto;
  right: -16px;
  top: 5px;
}
.fancybox-new-tab-btn{
  position: absolute;
  right: 35px;
  font-size: 19px;
  z-index: 10;
  top: 60px;
}
.mobile-link{
  display: none!important;
}
.videos-text i{
  float: left;
  padding-right: 10px;
  position: relative;
  margin-top: 4px;
}
.tipp-box{
  position: relative;
  margin-top: 15px;
  overflow: unset!important;
}
.tipp-box a{
  background-color: #F5F5F5;
  box-shadow: 0 3px 5px #aaaaaa;
  margin-right: 9px;
  padding-left: 0;
  cursor: pointer;
}
.tipp-box img{
  width: 150px;
  display: inline-block;
}
.tipp-box span{
  position: absolute;
  left: 165px;
  top: 10px;
}
.tipp-box .mehrlink{
  position: absolute;
  left: 165px;
  top: 32px;
}

.recipe-list-text ul, .recipe-list-text p {
  margin-bottom:0;
}

#gaestebuch-form textarea {
    width: 100%;
}

.comment-form {
    margin-bottom: 30px;
}

.comment-form-head h4 {
    background-color: #d3cac5;
    padding: 10px;
    padding-left: 10px;
    margin-bottom: 25px;
    /*font-family: 'UniversLTW01-67BoldCn', Arial, sans-serif;*/
	font-family: 'Roboto Condensed', Arial, sans-serif;
	font-weight: 700;
    font-size: 20px;
}

.comment-form-head a {
    text-decoration: none;
}

/* ----- Filter ------------------------- */

.bm-filter {
    background-color: #d3cac5;
    display: none;
    margin-bottom: 30px;
    margin-left: 8px;
    margin-right: 8px;
    padding: 6px 14px 14px;
    width: calc(100% - 16px);
}

.bm-filter.visible {
    display: block;
}

.bm-filter a {
    text-decoration: none;
}

.bm-filter strong a {
    /*font-family: 'UniversLTW01-67BoldCn', Arial, sans-serif;*/
	font-family: 'Roboto Condensed', Arial, sans-serif;
	font-weight: 700;
}

.bm-filter .col {
    flex-basis: 0;
    flex-grow: 1;
    -ms-flex-positive: 1;
    -ms-flex-preferred-size: 0;
    max-width: 100%;
    padding-left: 5px;
    padding-right: 5px;
}

.bm-filter .dropdown-menu {
    border-radius: 0;
}

.bm-filter .dropdown-menu .selected span.check-mark {
    top: 8px !important;
}

.bm-filter .dropdown-menu > li {
    font-size: 14px;
}

.bm-filter .dropdown-menu > li > a {
    padding: 6px 12px;
}

.bm-filter .dropdown-toggle,
.bm-filter .form-control {
    border-radius: 0;
}

.bm-filter .form-control:focus {
    border-color: #660000;
    box-shadow: none;
}

.bm-filter .row {
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    margin-left: -5px;
    margin-right: -5px;
}

.bm-filter .row.advanced-search {
    display: none;
}

.bm-filter .row.advanced-search.show {
    display: flex !important;
    display: -ms-flexbox !important;
}

.bm-filter #search-button {
    align-items: center;
    background-color: transparent;
    border: 1px solid #660000;
    display: flex;
    font-size: 16px;
    height: 32px;
    padding-left: 7.5px;
    padding-right: 7.5px;
    position: relative;
    top: 1px;
}

.bm-filter #search-button:hover {
    background-color: #eae6e4;
}

.bm-filter #search-button .icon {
    top: 0;
    transform: scale(1.25);
}

.bm-filter #search-button .bm-label {
    margin-left: 7.5px;
}

.bm-filter .search-title {
    font-size: 25px;
    text-align: center;
    width: 100%;
}

.bm-filter > .row {
    justify-content: center;
}

.bm-filter > .row > .col {
    padding-top: 8px;
}

.bm-filter > .row > .col {
    flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    max-width: 24.9%;
}

#reset-button {
    display: none;
    margin-left: 7.5px;
    position: relative;
    top: 1px;
}

#reset-button.show {
    align-items: center;
    display: flex !important;
}

.grid-search-new {
    background-color: transparent;
    box-shadow: none;
    right: 30px !important;
}

@media(min-width: 1200px) {
    .grid-search-new {
        right: 225px !important;
    }
}

@media(min-width: 1400px) {
    .grid-search-new {
        right: 265px !important;
    }
}

.grid-search-new .search-right-side {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    /* padding-left: 15px;
    padding-right: 15px; */
    width: 100%;
}

.grid-search-new .search-right-side .filter-toggle-button {
    background-color: transparent;
    border: none;
    padding: 0;
    text-transform: uppercase;
}

.grid-search-new .search-right-side .filter-toggle-button .glyphicon {
    margin-right: 3.75px;
    transform: scale(1.25);
    transform-origin: 100% 50%;
}

@media(max-width: 767px) {
    .bm-filter {

    }

    .bm-filter .col.bm-spacer {
        display: none;
    }

    .bm-filter .col .row .col + .col {
        margin-top: 8px;
    }

    .bm-filter .row .col,
    .bm-filter > .row > .col:nth-child(1),
    .bm-filter > .row > .col:nth-child(2) {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 5px;
    }

    .bm-filter > .row > .col {
        padding-bottom: 8px;
        padding-top: 0;
    }
}

/* ----- New Navigation ------------------------- */

#mobile-menu.new {
    background-color: #ebebeb;
    height: auto;
    overflow-y: scroll;
    padding: 12.5vh 0;
    top: 0;
}

#mobile-menu.new a {
    text-decoration: none;
}

#mobile-menu.new a:hover {
    text-decoration: underline;
}

#mobile-menu.new.change {
    display: block;
}

#mobile-menu.new .panel {
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

#mobile-menu.new .panel + .panel {
    margin-top: 0;
}

#mobile-menu.new .panel-body {
    border: none;
    padding: 15px 30px;
}

#mobile-menu.new .panel-body a {
    display: block;
}

#mobile-menu.new .panel-heading {
    background-color: transparent;
    border: none;
}

#mobile-menu.new .panel-title a {
    /*font-family: 'UniversLTW01-67BoldCn', Arial, sans-serif;*/
	font-family: 'Roboto Condensed', Arial, sans-serif;
	font-weight: 700;
    font-size: 1.125rem;
}

#mobile-menu.new .panel-title a:not(.collapsed) {
    color: #660000;
}

#mobile-menu-icon.new {
    display: block;
    top: 13px;
    width: auto;
}

#mobile-menu-icon.new a {
    /*font-family: 'UniversLTW01-67BoldCn', Arial, sans-serif;*/
		font-family: 'Roboto Condensed', Arial, sans-serif;
	font-weight: 700;
}

#mobile-menu-icon.new .desktop {
    cursor: auto;
    display: none;
}

#mobile-menu-icon.new .mobile {
    /*font-family: 'UniversLTW01-67BoldCn', Arial, sans-serif;*/
		font-family: 'Roboto Condensed', Arial, sans-serif;
	font-weight: 700;
}

@media(min-width: 576px){
    #mobile-menu.new {
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
        padding: 12.5vh 2.5%;
        width: 66.666vw;
    }
}

@media(max-width: 991px){
    #mobile-menu.new {
        height: 100vh;
    }
}

@media(min-width: 992px){
    #mobile-menu.new {
        min-width: 12vw;
        padding: 0;
        width: auto;
        overflow-y: auto;
    }

    #mobile-menu.new .panel-body {
        padding: 15px;
    }

    #mobile-menu-icon.new .desktop {
        display: block;
    }

    #mobile-menu-icon.new .mobile {
        display: none;
    }
}

@media(min-width: 1200px){
    #mobile-menu-icon.new {
        left: 18%;
    }
}

/* ----- Fixes ------------------------- */

header .top-accountnav-wrapper {
    margin-right: 0 !important;
    right: 22px !important;
}

@media(min-width: 1200px) {
    header .top-accountnav-wrapper {
        right: 217px !important;
    }
}

@media(min-width: 1400px) {
    header .top-accountnav-wrapper {
        right: 257px !important;
    }
}

/* @media(min-width: 1201px){
    header .top-accountnav-wrapper {
        right: calc(16.7% - 8px) !important;
    }
} */

/* ------------------------------------- */

.d-flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.order-1 {
    -ms-flex-order: 1;
    order: 1;
}

@media(min-width: 768px){
    .order-md-1 {
        -ms-flex-order: 1 !important;
        order: 1 !important;
    }
}

.order-2 {
    -ms-flex-order: 2;
    order: 2;
}

@media(min-width: 768px){
    .order-md-2 {
        -ms-flex-order: 2 !important;
        order: 2 !important;
    }
}

.bugfix-202104190644 {
    max-width: 100%;
    padding-right: 0;
    position: static;
    top: auto;
}

@media(max-width: 600px){
    .bugfix-202104190644 {
        margin-bottom: 70px;
    }
}

.logo {
    max-width: 100vw;
}

.logo a {
    background-position: 50% 50% !important;
    background-size: calc(100% - 40px) !important;
    max-width: 100vw;
    padding-left: 20px;
    padding-right: 20px;
}

.fancybox-navigation .fancybox-button {
    color: #fff !important;
    opacity: 1 !important;
    transition: color .2s !important;
    visibility: visible !important;
}

.fancybox-navigation .fancybox-button:hover {
    color: #ccc !important;
}