/*============= browser resets & clearings */
.clear { *zoom: 1; }
.clear:before, .clear:after { display: table; content: ""; line-height: 0; }
.clear:after { clear: both; }
.container:before, .container:after { display: table; content: ""; line-height: 0; }
.container:after { clear: both; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article,aside,details,figcaption,figure,footer,header,hgroup,nav,menu,section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
*,html,body { -webkit-text-size-adjust:none!important; }
* html body * { overflow:visible; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
a:focus, a:hover, a:active { outline: 0;}
div:target { outline: 0 none; }
[hidden] { display: none; }
fieldset, img { border:0 solid; }
button, input, select, textarea { margin: 0; font-size: 100%; vertical-align: middle; }
button, input { *overflow: visible; line-height: normal; }
button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
label, select, button, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"] { cursor: pointer; }
input[type="search"] { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -webkit-appearance: textfield; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
textarea { overflow: auto; vertical-align: top; }
/* =============== */

a#totop { 
position: fixed;
bottom: 20px;
right: 20px;
color: #fff;
z-index: 2000;
}


#impressum-bohne {
position: absolute;
top: 10%;
left:55%;
z-index: 10;
}
#snacks-bohne-unten {
position: absolute;
bottom: 0;
left:55%;
z-index: 10;
}
#snacks-bohne-oben {
position: absolute;
top: 26px;
right:30%;
z-index: 10;
}

html {
width: 100%;
height: 100%;
margin: 0 auto;
padding: 0;
overflow-y: scroll;
}

body {
width: 100%;
height: 100%;
margin: 0 auto;
padding: 0;
font-family: 'Droid Sans', sans-serif;
font-size: 15px;
height: auto !important;
min-height: 100%;
}

#wrapper {
width: 100%;
height: 100%;
margin: 0 auto;
padding: 0 0 0 0;
height: auto !important;
min-height: 100%;
}

.container {
margin: auto;
max-width: 925px;
padding-right: 10px;
padding-left: 10px;
position: relative;
z-index: 100;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}



/* Blöcke
============================== */
.abschnitt {
padding: 76px 0 50px 0;
display: block;
width: 100%;
position: relative;
box-sizing: border-box;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}


.abschnitt.hell { 
background-color: #c8bdb3;
color: #3a1309;
}
.abschnitt.dunkel {
background-color: #3a1309;
color: #c8bdb3;
}


/* navigation
============================== */
#navigation {
background-color: #3a1309;
color: #e6d9a8;
padding: 25px 0;
}
#navigation  .span4 {
text-align: center;
}
#navigation  .span8 {
text-align: right;
}

.nav {
margin: 35px 0 2px 0;
}
.nav li {
display: inline-block;
height: 19px;
overflow: hidden;
margin: 0px 0px 15px 24px;
line-height: 19px;
}

.nav li a {
display: block;
line-height: 19px;
height: 19px;
padding: 0;
margin: 0;
text-indent: 9999px;
}

.nav li a.start { width: 49px; background: transparent url("../images/mobil-kaffee-start.png") no-repeat 0 0; }
.nav li a.infos { width: 48px; background: transparent url("../images/mobil-kaffee-infos.png") no-repeat 0 0; }
.nav li a.drinks { width: 148px; background: transparent url("../images/mobil-kaffee-drinks-snacks.png") no-repeat 0 0; }
.nav li a.referenzen { width: 103px; background: transparent url("../images/mobil-kaffee-referenzen.png") no-repeat 0 0; }
.nav li a.kontakt { width: 73px; background: transparent url("../images/mobil-kaffee-kontakt.png") no-repeat 0 0; }

.nav li a:hover,
.nav li a:focus {
background-position: 0 -24px;
}

/* header
============================== */
#header {
border-top: 5px solid #a58769;
border-bottom: 5px solid #a58769;
background: #3a1309 url("../images/fader-coffee-background.jpg") no-repeat center top;
padding: 0;
}

.slides li { 
position: relative; 
color: #3a1309;
}
.flex-caption {
position: absolute;
right: 4%;
bottom: 4%;
background: #fff;
background: rgba(255,255,255,0.6);
padding: 2%;
z-index: 1000;
}
.flex-caption { color: #3a1309; margin-bottom: 0; }
.flex-caption img { margin-bottom: 15px; }

.flexslider .slides img.slide-hl { width: auto!important; }

/* header
============================== */
#meldung.abschnitt { padding: 10px 0; position: relative; z-index: 10; }
#meldung p { margin-bottom: 0; }
.datum { text-transform: uppercase; float: left; width: 150px; }
span.date { display: inline-block; *display: inline; }

.tickercontainer { 
width: 300px; 
min-height: 15px; 
margin: 0; 
padding: 0;
overflow: hidden; 
}
.tickercontainer .mask {
position: relative;
width: 100%;
overflow: hidden;
}
ul#ticker { 
position: relative;
left: 300px;
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
ul#ticker li { 
float: left; 
margin: 0; 
padding: 0; 
width: 100%; 
font-size: 15px;
font-family: 'Droid Sans', sans-serif;
}


/* vorstellung
============================== */
#vorstellung {
background-image: url("../images/living-coffee-line1-oben.png");
background-repeat: repeat-x;
background-position: left top;
padding-top: 50px;
position: relative;
z-index: 100;
}
.vorstellung-anhaenger {
margin-top: -75px;
}
.vorstellung-logo {
margin-top: 50px;
text-align: center;
}

/* drinks & snacks / leistungen
============================== */
#leistungen  {
background-image: url("../images/living-coffee-line1-unten.jpg");
background-repeat: repeat-x;
background-position: left top;
}
.drinks-bild1 {
border: 1px solid #e6d9a8;
margin-bottom: 150px;
margin-top: 60px;
}
.drinks-bild2 {
text-align: center;
}
.snacks-bild {
border: 1px solid #e6d9a8;
margin-top: 60px;
}

/* infos
============================== */
#infos {
background-image: url("../images/living-coffee-line1-oben.png");
background-repeat: repeat-x;
background-position: left top;
}

/* referenzen
============================== */
#referenzen {
background-image: url("../images/living-coffee-line1-unten.jpg");
background-repeat: repeat-x;
background-position: left top;
}
.referenzen-bild {
border: 1px solid #e6d9a8;
margin-bottom: 15px;
}

/* kontakt
============================== */
#kontakt { 
background-image: url("../images/living-coffee-line1-oben.png");
background-repeat: repeat-x;
background-position: left top;
}
.kontakt-tasse { 
float: right;
margin: 50px 50px 0 0;
}


/* impressum
============================== */
#impressum { 
background-image: url("../images/living-coffee-line1-unten.jpg");
background-repeat: repeat-x;
background-position: left top;
}
#impressum .row-fluid {
margin-top: 35px;
}


/* footer
============================== */
#footer.abschnitt {
padding: 0 0 40px 0;
}
#footer {
background-image: url("../images/living-coffee-line2-oben.png");
background-repeat: repeat-x;
background-position: left top;
}
#footer .border {
background-image: url("../images/living-coffee-line2-unten.png");
background-repeat: repeat-x;
background-position: left bottom;
padding: 30px 0;
}
#footer p.align-right {
float: right;
}
#footer p {
margin-bottom: 0px;
float: left;
margin-top: 4px;
line-height: 25px;
}
.footerlogo { float: left; margin-right: 10px; }

/* typo
============================== */
.braun { color: #3a1309; }
.hell { color: #a58769; }
.beige { color: #c8bdb3; }
.gelb { color: #e6d9a8; }
.rot { color: #ae3024; }
.weiss { color: #ffffff; }
.underline { text-decoration: underline; }

h1,
h2,
h3,
h4 { 
font-family: 'Droid Sans', sans-serif;
font-size: 18px;
margin: 0 0 25px 0; 
}
.h2 { font-size: 18px; }
h2,
#vorstellung h1,
#vorstellung h3 { margin: 25px 0; }

#kontakt h2 { margin-top: 35px; }
p {
font-family: 'Droid Sans', sans-serif;
margin: 0 0 15px 0;
line-height: 1.4em;
}
#navigation p {
font-size: 13px;
margin-bottom: 0;
}

#leistungen h2,
#referenzen h2,
#impressum h1,
#impressum h2,
#impressum h3,
#impressum h4 { color: #e6d9a8; } /* gelb */

#vorstellung h1,
#vorstellung h2,
#vorstellung h3,
#infos h2,
#kontakt h2 { color: #a58769; } /* hell */

/* listen
============================== */
.liste {
list-style: none;
margin: 25px 0;
padding: 0 0 0 0;
}
.liste li {
margin: 0 0 0 0;
padding: 0 0 0 0;
color: #fff;
font-size: 18px;
font-family: 'Droid Sans', sans-serif;
line-height: 25px;
}


a.link {
color: #c8bdb3;
text-decoration: underline;
}
a.link:hover,
a.link:focus {
color: #fff;
text-decoration: none;
}

a.credits { text-decoration: none; color: #c8bdb3; }
h3 a.credits { color: #e6d9a8; }


.flex-caption a.link { color: #3a1309; }
.flex-caption a.link:hover { color: #3a1309; text-decoration: none; }

/* images
============================== */
img {
max-width: 100%;
width: auto\9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}

/* flexslider
============================== */
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}


/* FlexSlider Necessary Styles */
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}

/* FlexSlider Default Theme */
.flexslider { margin: 0 0 0 0; zoom: 1; position: relative; }
.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.loading .flex-viewport { max-height: 300px; }
.flexslider .slides { zoom: 1; }
.carousel li { margin-right: 5px; }

/* Direction Nav */
.flex-direction-nav {*height: 0; }
.flex-direction-nav a  { text-indent: 9999px; text-decoration:none; display: block; width: 25px; height: 47px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
.flex-direction-nav .flex-prev { left: 10px; background: transparent url("../images/pfeil-links.png") no-repeat 0 0; }
.flex-direction-nav .flex-next { right: 10px; background: transparent url("../images/pfeil-rechts.png") no-repeat 0 0; }
.flexslider:hover .flex-prev { opacity: 1; left: 10px; }
.flexslider:hover .flex-next { opacity: 1; right: 10px; }
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; }
.flex-direction-nav .flex-disabled { opacity: 0!important; filter:alpha(opacity=0); cursor: default; }


/* Pause/Play */
.flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; }
.flex-pauseplay a:before  { font-family: "flexslider-icon"; font-size: 20px; display: inline-block; content: '\f004'; }
.flex-pauseplay a:hover  { opacity: 1; }
.flex-pauseplay a.flex-play:before { content: '\f003'; }

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3); }
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev { opacity: 1; left: 10px;}
  .flex-direction-nav .flex-next { opacity: 1; right: 10px;}
}

@media (max-width: 767px) {
#navigation  .span8 { text-align: center; }
#header .container { padding: 0; }
.datum { width: 100%; }
.tickercontainer, .tickercontainer .mask, ul#ticker { width: 100%; }
ul#ticker { left: 100%; }
.vorstellung-anhaenger { margin-top: 0px; }
#leistungen .span6 { position: relative; z-index: 100; }
.drinks-bild1 { margin-bottom: 20px; }
.drinks-bild2 { display: none; }
.snacks-bild { margin-top: 0px; margin-bottom: 20px;} 
.kontakt-tasse { float: none; margin: auto;}
#footer { text-align: center; }
#footer p { float: none; width: 100% }
.footerlogo { float: none; margin: 0 auto 15px auto; }
}


@media (max-width: 480px) {
.flex-caption { position: static; text-align: center; }
.flex-caption img { margin: auto auto 10px auto; }
.tickercontainer, .tickercontainer .mask, ul#ticker { width: 200%; }
}