/*
* cliclab³ miniFlex V1.0
* Copyright 2014, c.schneider@e-sens-e.de
* cliclab³ is a Search Engine Optimized (WCAG) Web Content System
* incl. comprehensive quality and expansion guarantees.
* More details can be found at www.e-sens-e.de/cliclab
* css/styles.css
* 2014-10-03 (c) e.sens.e GmbH
* mobile first (reise)
* normalize
* open font
* basics
* tags
* Allgemeine Klassen
* Wrapper
* Header
* Top Navigation
* Body
* Left Navigation
* Pane - Left, Center, Right
* Content
* Footer
* Page Border
* grey: #413425;
* lightgrey: #3f3f3f;
* sand: #dccfb6;
* red: #72041a;
* link #72041a
* type: #e3e3e3;
* black: #1b1b1b;
30
>35.5
>48
58
>64
>80
*/
/* #normalize
================================================== */
* {
border: 0;
font-size: 100%;
font: inherit;
margin: 0;
padding: 0;
vertical-align: baseline;
}
*, *:before, *:after {
-webkit-box-sizing: border-box; /* Safari/Chrome, andere WebKit-Browser */
-moz-box-sizing: border-box; /* Firefox, andere Gecko-Browser */
box-sizing: border-box; /* Opera/IE 8+ */
-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
-webkit-overflow-scrolling: touch;
*behavior: url(../boxsizing.htc);
}
.br{border: 1px dotted red !important;}
.col_0{xbackground: red!important;}
.info,.info2{width:100%;height:50px;display:block;}
a:hover { text-decoration: none; }
a:active { background: none; }
/******************************************************************************
* open Font
******************************************************************************/
@font-face {
font-family: 'impactregular';
src: url('../fonts/impact-webfont.eot');
src: url('../fonts/impact-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/impact-webfont.woff2') format('woff2'),
url('../fonts/impact-webfont.woff') format('woff'),
url('../fonts/impact-webfont.ttf') format('truetype'),
url('../fonts/impact-webfont.svg#impactregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'damionregular';
src: url('../fonts/damion-regular-webfont.eot');
src: url('../fonts/damion-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/damion-regular-webfont.woff2') format('woff2'),
url('../fonts/damion-regular-webfont.woff') format('woff'),
url('../fonts/damion-regular-webfont.ttf') format('truetype'),
url('../fonts/damion-regular-webfont.svg#damionregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'nyregular';
src: url('../fonts/ny-regular-webfont.eot');
src: url('../fonts/ny-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/ny-regular-webfont.woff2') format('woff2'),
url('../fonts/ny-regular-webfont.woff') format('woff'),
url('../fonts/ny-regular-webfont.ttf') format('truetype'),
url('../fonts/ny-regular-webfont.svg#nyregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Genericons';
src: url('../fonts/genericons-regular-webfontt.eot');
src: url('../fonts/genericons-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/genericons-regular-webfont.woff') format('woff'),
url('../fonts/genericons-regular-webfont.ttf') format('truetype'),
url('../fonts/genericons-regular-webfont.svg#genericonsregular') format('svg');
font-weight: normal;
font-style: normal;
}
/******************************************************************************
* basics
******************************************************************************/
form, fieldset, legend {
vertical-align:baseline;
background:transparent;
}
html, button, input, select, textarea {
font-family: sans-serif;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
audio,canvas, img, video, input, select{
vertical-align: middle;
}
textarea {
overflow-y: auto;
resize: vertical;
}
ol, ul {
list-style: none;
}
img, fieldset
{
border-style: none;
}
input[type="button"], input[type="submit"], button {
cursor: pointer;
}
table { border-collapse: collapse; border-spacing: 0; }
/******************************************************************************
* tags
******************************************************************************/
html {
overflow-x: hidden;
overflow-y: scroll;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body
{
color: white;
font-family: georgiabold, serif;
font-size: 87.5%;
text-align: left;
line-height: 1.6em;
background: url(../img2/background2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body.home-ranta-reise {
background-image: url(../img2/background.jpg);
}
form
{
display: inline; /* IE */
}
small { font-size: 80%;}
sub,sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }
h1{
font-size: 1.150em; /* 24 / */
line-height: 1.5em; /* 21 / 14 */
text-rendering: optimizeLegibility;
}
h2{
font-size: 1.2em; /* 21 / 14 */
line-height: 1.2em; /* 21 / 14 */
text-rendering: optimizeLegibility;
}
h3{
font-size: 1.25em; /* 21 / 14 */
line-height: 1.25em; /* 21 / 14 */
text-rendering: optimizeLegibility;
}
h5{
font-size: 1.714em; /* 21 / 14 */
line-height: 1.7em; /* 21 / 14 */
text-rendering: optimizeLegibility;
}
p {
font-size: 1em; /* 14 / 14 */
line-height: 1.5em; /* 21 / 14 */
margin-bottom: 1.5em; /* 21 / 14 */
}
strong {
font-weight: bold;
}
/* gucket ob du dat fuer alles wilscht
img {
width:100%;
height:auto;
}*/
a:link,
a:visited
{
color: #35d3ff;
text-decoration: none;
outline: 0;
}
a:hover,
a:active
{
text-decoration: underline;
color: #35d3ff;
outline: 0;
}
a:focus {
outline: thin dotted;
outline: 0;
}
/******************************************************************************
* Wrapper sidebar navigation
******************************************************************************/
#layout,
#menu,
.menu-link {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
#layout {
position: relative;
padding-left: 0;
}
.menu-link:link,
.menu-link:hover {
padding: 0.8em 0 0.5em 0.65em;
text-decoration: none;
color: black;
float: left;
}
#layout.active {
position: relative;
left: 250px;
}
#layout.active #menu {
left: 250px;
width: 250px;
}
#layout.active .menu-link {
left: 250px;
}
#menu {
margin-left: -250px; /* "#menu" width */
width: 250px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000; /* so the menu or its navicon stays above all content */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/*
All anchors inside the menu should be styled like this.
*/
#menu a {
color: white;
border: none;
padding: 0;
margin-bottom: .1em;
font-size: 3em;
line-height: 1.2em;
font-family: impactregular, arial, sans-serif;
text-decoration: none;
display: inherit;
text-align: center;
text-transform: uppercase;
}
/*
Remove all background/borders, since we are applying them to #menu.
*/
#menu .pure-menu,
#menu .pure-menu ul {
border: none;
background: transparent;
padding: 12em 0 0 0;
}
/*
Change color of the anchor links on hover/focus.
*/
#menu .pure-menu li a:hover,
#menu .pure-menu li a:focus {
color:#4F8BC7;
background: transparent url(../img2/white60.png) top left repeat;
}
/*
This styles the selected menu item `
`.
*/
#menu .pure-menu-selected,
#menu .pure-menu-heading {
background: #1f8dd6;
}
/*
This styles a link within a selected menu item ``.
*/
#menu ul#nav li.current a {
color: #fff;
background: #eba555;
}
/*
This styles the menu heading.
*/
#menu .pure-menu-heading {
font-size: 110%;
color: #fff;
margin: 0;
}
#menu li {
background: transparent;
}
/******************************************************************************
* Wrapper main
******************************************************************************/
.header, .content {
padding-left: 2em;
padding-right: 2em;
}
.header {
background: url(../img2/grey40.png) top left repeat;
padding: 10px 2em;
}
.header h1 {
text-indent: -10000px;
height: 0em;
}
.header a {
text-align:right;
display: block;
height: 70px;
}
#main .logo img {
max-width: auto;
width: auto;
height: 100%;
margin-right: 2em;
}
.fixed {
position: fixed;
top: 0;
z-index: 100;
background: #EFEFEF;
padding: 0.3em 1em;
width: 100%;
max-width: 100%!important;
height: 4.5em;
}
/*
.fixed #nav-toggle{
display: none;
}
.fixed li{
margin-top: 2%;
}
*/
.content {
margin-left: auto;
margin-right: auto;
max-width: 940px;
padding-left: 2em;
padding-right: 2em;
padding-bottom: 0.5em;
margin: 0 0 0 5px;
}
.content_border {
border-bottom: 1px solid #cdd7da;
}
/* contentareas default */
#content_0 {
border: none;
display: none;
}
#main {
}
.footer {
padding: 2em 0;
}
.footer-list {
min-height: 100px;
display: block;
}
.footer-list a {
color: #d5cdb5;
display: block;
background: #7A7676;
padding: 0.5em;
border-bottom: 1px solid #3b342a;
font-size: 2em;
text-decoration: none;
}
.footer-list.social {
margin-top: 1.5em;
}
.footer-list.social a {
color: white;
font-size: 1.5em;
line-height: 1.75em;
background: none;
padding:0;
border: none;
text-decoration: none;
}
.footer-list.social li{
display: inline-block;
margin-right: 0.5em;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
background: #7A7676;
background-size: cover;
text-align: center;
width: 2.5em;
height: 2.5em;
}
div.footer div {
text-align: center;
}
/* footer color */
div.footer div.content {
background: #3F3F3F;
padding: 20px 20px 10px 20px;
}
div.footer div.content.no-border {
padding-top: 0px;
}
.footer-list li {
line-height: 2em;
}
.footer-list h1{
padding: 1em 0;
}
.m-flex{
letter-spacing: -0.31em;
*letter-spacing: normal; /* reset IE < 8 */
*word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
display: -webkit-flex;
-webkit-flex-flow: row wrap;
/* IE10 uses display: flexbox */
display: -ms-flexbox;
-ms-flex-flow: row wrap;
}
.l-box {
padding: 0.5em;
}
.noline {
border: none;
}
.m-box {
padding: 1em;
}
.alpha {
padding-left: 0px;
}
.omega {
padding-right: 0px;
}
a.httplink:hover {
text-decoration: none;
cursor: default;
}
.no-border {
border:none;
}
/******************************************************************************
* cliclab text block generic
******************************************************************************/
.float_left
{
clear: left;
float: left;
}
.float_right
{
clear: right;
float: right;
}
.align_left
{
text-align: left;
}
.align_right
{
text-align: right;
}
.align_center
{
text-align: center;
}
.align_justify
{
text-align: justify;
}
.allcaps
{
text-transform: uppercase;
}
/******************************************************************************
* cliclab text block
******************************************************************************/
div.textblock {
font-family: nyregular, arial, sans-serif;
font-size: 2.5em;
line-height: 1.5em;
color: white;
}
body.home-ranta-reise div.textblock {
font-family: nyregular, arial, sans-serif;
font-size: 1.6em;
}
div.textblock h3 {
font-size: 1.5em;
padding-top: .875em;
color: #eba555;
}
div.textblock i {
font-weight: normal;
font-style: italic;
font-size: inherit;
}
div.textblock.tal h3 {
font-size: 3.5em;
font-weight: bold;
}
div.textblock.textblock_pure-us-1-4 h3 {
font-size: 1.5em;
}
div.textblock.tal .textblock_subline {
font-size: 2em;
line-height: 3em;
}
div.textblock_zitat {
background: url(../img2/white60.png) top left repeat;
text-align: center;
color: white;
padding: 0em;
text-shadow: 1px 1px 1px #333;
font-family: impactregular, arial, sans-serif;
}
div.textblock_zitat i{
color: #ab8b82;
font-size: 0.7em;
font-variant: normal;
}
div.textblock.m-box h3 {
padding-top: 0;
}
.img-frame {
background-color: #ffffff;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
box-shadow: 0 1px 1px #999999;
display: block;
height: auto;
max-width: 100%;
overflow: hidden;
padding: 0;
position: relative;
}
.img-frame h5 {
color: #757474;
font-family: open_sansbold,sans-serif;
font-size: 0.875em;
margin: 10px 12px 0 6px;
}
.img-frame p {
color: #666666;
font-size: 0.75em;
margin: 0;
padding: 0 5px 12px;
}
.image-wrapper a {
display: block;
line-height: 0;
margin: 0 0 10px;
padding: 0;
}
.image-wrapper a.go-link,
.image-wrapper a.go-details,
.image-wrapper a.more-info {
background: #627d99 url("../img/more-details2.png") center center no-repeat;
webkit-border-radius: 38px;
-moz-border-radius: 38px;
border-radius: 38px;
display: inline-block;
height: 38px;
line-height: 38px;
margin: 0 8px;
opacity: 0.7;
opacity: 1;
width: 38px;
}
.image-wrapper a.go-link {
background: #627d99 url("../img/go-shop2.png") 50% 50% no-repeat;
background: red;
}
.image-wrapper a.go-details {
background: #627d99;
background: #444F97;
width:auto;
padding: 0 15px;
color: white;
text-decoration: none;
}
.image-wrapper .extra-links {
display: block;
top: 35%;
position: absolute;
text-align: center;
z-index: 15;
width: 100%;
opacity: 0.6;
}
.image-wrapper .mouse-effect {
background-color: #627d99;
opacity: 0.4;
}
.image-wrapper .mouse-effect {
background-color: #627d99;
background-color: #CCCCCC;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
z-index: 10;
}
.textblock_photobox {
text-align: center;
margin: 0 0 0.5em;
font-family: damionregular, arial, sans-serif;
color: white;
font-size: 1.8em;
}
.textblock_photobox a{
display: block;
text-decoration: none;
}
.textblock_photobox h3 {
color: #333;
}
.textblock_photobox b {
color: #333;
text-shadow: 1px 1px 1px #eaeaea;
display: block;
margin: 1.5em 0;
font-size: 0.7em;
}
body.home-ranta-reise .textblock_photobox b {
font-size: inherit;
}
.textblock_photobox img {
margin-top: 1.5em;
padding: 0 0.9em;
}
.textblock_photobox .photo-frame {
margin: 0 0.4em;
background: transparent url(../img2/white60.png) top left repeat;
box-shadow: 0px 3px 24px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 3px 24px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 3px 24px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.textblock_productboxlink .img-frame h3 {
color: white;
text-align: center;
background: none;
line-height: 2.125em;
padding-bottom:0;
}
.textblock_productboxlink .img-frame h3 {
font-size: 1.250em;
padding-top:14px;
line-height:1em;
}
.textblock_productboxlink .img-frame img {
border: 1px solid #dddddd;
margin-bottom:0;
}
.textblock_productboxlink .img-frame img {
border: 1px solid #cccccc;
}
.textblock_productboxlink .img-frame{
xpadding: 0 5%;
}
.textblock_productboxlink .img-frame span.exzerpt {
text-align: justify;
margin: 0 5%;
display: block;
padding-bottom: 10px;
font-size: 0.750em;
line-height: 1.688em;
}
.textblock_productboxlink .img-frame span.exzerpt{
min-height: 228px;
}
/******************************************************************************
* contentareas - miniflex
******************************************************************************/
.index #content_2 {
background: #1b1b1b;
}
.index #content_2 div:nth-of-type(4n+0) {
background: #3f3f3f;
}
.index #content_4 .textblock {
background: #3f3f3f;
margin-bottom:0;
}
.herzog-glossar #content_9,
.herzog-filtern-bruehen #content_9,
.herzog-coffee-catering #content_9,
.herzog-gastronomie #content_9,
.index #content_5 {
background: transparent url(../img/media/ecaf73a93db9afbe74c36502641af8fd.jpg) 1em 0 repeat-y;
background-size: 96%;
min-height: 28em;
padding-top: 20px;
color: #eaeaea;
}
/******************************************************************************
* genericon
******************************************************************************/
.genericon {
display: inline-block;
-webkit-font-smoothing: antialiased;
font-size: 2em;
line-height: 1;
font-family: 'Genericons';
text-decoration: inherit;
font-weight: normal;
font-style: normal;
vertical-align: top;
}
/**
* IE7 and IE6 hacks
*/
.genericon {
*overflow: auto;
*zoom: 1;
*display: inline;
}
.genericon-menu:before { content: '\f419'; }
.genericon-twitter:before { content: '\f202'; }
.genericon-facebook:before { content: '\f203'; }
.genericon-facebook-alt:before { content: '\f204'; }
.genericon-wordpress:before { content: '\f205'; }
.genericon-googleplus:before { content: '\f206'; }
.genericon-linkedin:before { content: '\f207'; }
.genericon-linkedin-alt:before { content: '\f208'; }
.genericon-mail:before { content: '\f410'; }
.genericon-expand:before { content: '\f431'; }
.genericon-collaps:before { content: '\f432'; }
.textblock_divide {
border-bottom: 2px solid #cdd7da;
margin: 2em 0;
display: block;
}
.textblock_subline {
color: #5d5d5d;
display: block;
font-weight: bold;
line-height: 2em;
}
.t-slider-controller {
display: block;
width: 100%;
text-align: right;
letter-spacing: 0;
}
.t-slider-controller a {
width: 2em;
height: 2em;
border: 1px solid #bababa;
line-height: 1.6em;
display: inline-block;
padding: .0em .5em .5em .5em;
color: #797979;
margin-left: .5em;
outline: none;
}
.t-slider-controller a:hover{
background: #CDD7DA;
}
/******************************************************************************
* contenttabs rwd made by superclaudio
******************************************************************************/
.contenttabs {
width: 100%;
}
.tabbox #contenttab1 {
background: #3F3F3F;
color: #E6EAEA;
}
.tabs {
xdisplay: inline-block;
}
.tab {
background-color: #151B1B;
}
.tabbox .tabpanel {
display: none;
width: 100%;
padding: 1em;
background: #3F3F3F;
}
#content_30,
#content_50 {
display: block;
}
.herzog-produkte #content_3 .tabs a,
.herzog-produkt_1 #content_3 .tabs a,
.herzog-produkt_2 #content_3 .tabs a,
.herzog-produkt_3 #content_3 .tabs a,
.herzog-produkt_4 #content_3 .tabs a,
.herzog-filtern-bruehen #content_2 .tabs a,
.herzog-filtern-bruehen #content_3 .tabs a,
.herzog-coffee-catering #content_3 .tabs a,
.herzog-coffee-catering #content_4 .tabs a,
.herzog-gastronomie #content_3 .tabs a,
.herzog-gastronomie #content_5 .tabs a,
.herzog-gastronomie #content_7 .tabs a,
.herzog-kaffee #content_7 .tabs a,
.herzog-kaffee #content_5 .tabs a,
.herzog-kaffee #content_3 .tabs a {
width: 50%;
display: inline-block;
min-height: 3em;
line-height: 3em;
letter-spacing: 0;
font-size: 1.375em;
text-align: center;
}
.herzog-filtern-bruehen #content_3 .tabs a,
.herzog-coffee-catering #content_7 .tabs a,
.herzog-gastronomie #content_3 .tabs a,
.herzog-gastronomie #content_7 .tabs a,
.herzog-kaffee #content_7 .tabs a,
.herzog-kaffee #content_5 .tabs a {
width: 33%;
}
.index #content_4.textblock,
.herzog-glossar #content_8 .textblock,
.herzog-filtern-bruehen #content_8 .textblock,
.herzog-coffee-catering #content_8 .textblock,
.herzog-gastronomie #content_8 .textblock {
background-color: #3F3F3F;
margin-bottom:0px;
}
.herzog-filtern-bruehen #content_2 .tabpanel {
min-height: 23em;
}
.herzog-gastronomie #content_3 .tabpanel {
min-height: 21em;
}
.herzog-gastronomie #content_5 .tabpanel {
min-height: 29em;
}
.herzog-coffee-catering #content_4 .tabpanel {
min-height: 26em;
}
.herzog-kaffee #content_3 .tabpanel {
min-height: 13em;
}
.herzog-kaffee #content_5 .tabpanel {
min-height: 19em;
}
.herzog-produkte #content_2,
.herzog-produkt_1 #content_2,
.herzog-produkt_2 #content_2,
.herzog-produkt_3 #content_2 {
position: relative;
}
.tabbox .selectedTab{
background: #3F3F3F;
color: #EAEAEA;
}
.herzog-glossar #content_1 .col_0,
.herzog-glossar #content_1 .col_1
{
background: #3F3F3F;
padding-top: 20px;
padding-bottom: 1000px;
margin-bottom: -980px;
}
.herzog-glossar #content_1 .col_2,
.herzog-glossar #content_1 .col_3
{
background: #565656;
padding-top: 20px;
padding-bottom: 1000px;
margin-bottom: -980px;
}
.herzog-glossar #content_1 {
overflow: hidden;
}
a.bestellen {
text-align: center;
color: white;
text-decoration: none;
width: 50%;
padding: 1.5em;
display: block;
background-color: #710419;
text-transform:uppercase;
font-size: 1.5em;
bottom: 8px;
position: absolute;
}
/******************************************************************************
* drawer
******************************************************************************/
#layout .tabbox h3.tabpanel {
display: block;
min-height: inherit;
font-size: 1.5em;
background: #7A7676;
padding: .3em 0 .3em 0.75em;
letter-spacing: 0;
border-bottom: 1px solid #1B1B1B;
}
#layout .tabbox h3.tabpanel.tab_last{
border: none;
}
#layout .tabbox .contenttabs {
display: none;
}
/******************************************************************************
* toTop
******************************************************************************/
#toTop {
display: none;
margin-right: 0.5em;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
background: #B2B1AC;
background-size: cover;
text-align: center;
width: 2.5em;
line-height: 2.8em;
height: 2.5em;
cursor: pointer;
z-index: 200;
bottom: 10px;
position: fixed;
right: 46.9%;
opacity:.7;
}
.white-popup {
position: relative;
background:red;
padding: 20px;
width:auto;
max-width: 500px;
margin: 20px auto;
}
/******************************************************************************
* contact footer
******************************************************************************/
.contact-footer {
background-color: rgba(27, 27, 27, 0.99);
bottom: 0;
display: none;
left: 0;
padding-bottom: 30px;
padding-top: 0px;
position: fixed;
right: 0;
z-index: 50;
}
.contact-footer .content {
border: none;
}
.close-footer {
border: 2px solid #818181;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
bottom: -13px;
float: right;
height: 40px;
margin-right: 30px;
opacity: 0.3;
padding-top: 6px;
position: relative;
text-align: center;
-webkit-transition: all 500ms ease 0s;
transition: all 500ms ease 0s;
width: 40px;
}
.circle_footer {
border: 1px solid #818181;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
height: 34px;
margin-bottom: 10px;
margin-right: 10px;
opacity: 0.6;
padding-top: 2px;
text-align: center;
-webkit-transition: all 500ms ease 0s;
transition: all 500ms ease 0s;
width: 34px;
display: inline-block;
max-width: 100%;
}
.close-footer:hover ,
.circle_footer:hover {
opacity: 1;
}
.info_footer {
display: block;
margin-bottom: 10px;
position: relative;
}
.info-icon {
display: inline-block;
margin-right: 10px;
position: relative;
}
.contact {
line-height: 26px;
margin-right: 1em;
color: #bdbdbd;
}
.info_footer p {
display: inline-block;
margin-bottom: 5px;
color: #bdbdbd;
line-height: inherit;
}
.info_footer a {
color: #bdbdbd;
}
.close-text_footer {
height: 50px;
}
.close-text {
color: #818181;
float: right;
margin: 20px 25px 0 0;
display: none;
-webkit-transition: all 500ms ease 2s;
transition: all 500ms ease 2s;
}
.footer_logo {
margin-bottom: 10px;
}
h5 {
color: #585858;
font-size: 14px;
line-height: 20px;
margin-bottom: 10px;
margin-top: 10px;
color: white;
font-weight: 500;
letter-spacing: 1px;
margin-bottom: 23px;
margin-top: 10px;
text-transform: uppercase;
}
.cl-input {
display: block;
height: 38px;
line-height: 1.42857;
padding: 8px 12px;
vertical-align: middle;
width: 100%;
}
.textfield {
background-color: transparent;
border-bottom: 2px #818181 solid;
border-bottom-width: 2px;
font-size: 13px;
margin-bottom: 15px;
padding-left: 0;
padding-top: 0;
color: white;
}
.text-area {
background-color: transparent;
border-bottom: 2px #818181 solid;
color: white;
font-size: 13px;
padding-bottom: 20px;
padding-left: 0;
padding-top: 0;
height: 5em;
overflow: auto;
}
.submit-button {
background-color: transparent;
border: 2px solid #818181;
border-radius: 5px;
color: #818181;
font-size: 13px;
font-weight: 600;
margin-top: 10px;
padding: 5px 15px;
position: relative;
text-transform: uppercase;
transition: all 500ms ease 0s;
}
.submit-button:hover {
background-color: #818181;
color: white;
}
.text-area.error,
.textfield.error,
.text-area:hover,
.textfield:hover {
border-bottom-color: #C65F60;
}
.textfield.error {
margin-bottom: 5px;
}
label.error {
color: #C65F60;
margin-bottom: 15px;
display: block;
}
.success-message {
background-color: green;
color: white;
border-radius: 5px;
margin-top: 30px;
padding-left: 30px;
padding-right: 30px;
text-align: center;
display: none;
font-family: sans-serif;
}
.cl-form-fail.success-message{
background-color: red;
}
.success-message p {
margin: 1.5em 0;
padding: 0.4em;
}
/* #Lists
================================================== */
div.textblock {
letter-spacing: 0;
}
.index div.textblock ul
{
margin: 0;
padding: 0;
}
div.textblock ul
{
margin-top: 1em;
}
.debug div.textblock ul
{
background: #c65f60;
}
div.textblock ul li {
background: url("../img2/bullet3.png") no-repeat scroll 0em 0.3em transparent;
font-size: inherit;
line-height: inherit;
margin: 0;
padding-left: 2em;
}
.index div.textblock ul li {
background: url("../img2/bullet2.png") no-repeat scroll 1em 1.2em transparent;
font-size: 2em;
line-height: 3em;
margin: 0 0 1.375em;
padding-left: 2em;
}
.index div.textblock ul li:hover {
background-color: #666666;
}
div.textblock ul li a{
display: block;
color: #EAEAEA;
text-decoration: none;
}
div.textblock ul li:last-child
{
margin-bottom: 0;
}
/*
ul, ol { margin-bottom: 20px; }
ul { list-style: none outside; }
ol { list-style: decimal; }
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
ul.square { list-style: square outside; }
ul.circle { list-style: circle outside; }
ul.disc { list-style: disc outside; }
ul ul, ul ol,
ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%; }
ul ul li, ul ol li,
ol ol li, ol ul li { margin-bottom: 6px; }
li { line-height: 18px; margin-bottom: 12px; }
ul.large li { line-height: 21px; }
li p { line-height: 21px; }
/* #Images
================================================== */
.scale-with-grid img,
img.scale-with-grid {
max-width: 100%;
height: auto; }
/******************************************************************************
* special features
******************************************************************************/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ''; content: none;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
/* --------------------------
* Responsive Styles
* --------------------------
*/
.info2 {background: #C65F60;}
.info2:before{content: "less than 30 iphone hochkant";}
@media screen and (min-width: 30em) {
}
@media screen and (min-width: 35.5em) {
.info2 {background: yellow;}
.info2:before{content: "35.5 iphone quer";}
#content_0 {
display: inherit;
}
#main {
}
.header {
background: transparent;
height: inherit;
}
.header a {
text-align: center;
display: inline-block;
width: 93%;
height: inherit;
}
.textblock_photobox img {
margin-top: .5em;
padding: 0 0.5em;
}
.index div.textblock ul li {
background: url("../img/bullet1.png") no-repeat scroll 1em 1.2em transparent;
font-size: 1.75em;
line-height: 3.0em;
padding-left: 2em;
}
.index #content_2 div.textblock h3 {
font-size: 1.375em;
padding-top: 1.475em;
}
div.textblock.m-box {
padding-top: 0;
}
div.textblock.m-box h3,
div.textblock h3 {
padding-top: .5em;
}
div.textblock.textblock_pure-us-1-4 h3 {
font-size: 1em;
}
}
@media screen and (min-width: 40em) {
.index div.textblock ul li {
background: url("../img/bullet1.png") no-repeat scroll 1em 1.2em transparent;
font-size: 1.75em;
line-height: 3.4em;
padding-left: 2em;
}
}
@media screen and (min-width: 48em) {
.info2{background: green;}
.info2:before{content: "48";}
div.footer div {
text-align: left;
}
.footer-list li{
/*border-left: 2px solid #444F97;
padding-left: 1em;*/
margin-bottom: .1em;
}
.footer-list.social {
margin-top: 0;
text-align: right;
}
.footer-list.social li {
margin-right: 0.5em;
margin-top: 0;
}
.footer-list a {
display: inline;
background: none;
border: none;
padding: 0;
font-size: 1.25em;
}
.footer-list a:hover {
text-decoration: underline;
}
div.footer h1{
color: #757575;
font-size: inherit;
}
.header .logo {
display: inline-block;
}
.header .logo img {
width: inherit;
}
.header.fixed {
background: white;
height: auto;
text-align: center;
}
#main {
}
.debug div.textblock ul {
background: red;
}
.debug div.textblock {
background: green;
}
.index div.textblock ul li{
line-height: 4em;
background-position: 1.2em 1.6em;
}
#layout .tabbox h3.tabpanel {
display: none;
}
#layout .tabbox .contenttabs {
display: block;
}
}
@media (min-width: 52em) {
.info2 {background: violet!important;}
.info2:before{content: "52";}
div.textblock.textblock_pure-us-1-4 h3 {
font-size: 1.5em;
}
}
@media (min-width: 58em) {
.info2 {background: blue;}
.info2:before{content: "58";}
.footer-list.social li {
margin-right: 0.5em;
}
.header.fixed {
height: auto;
}
.debug div.textblock {
background: violet;
}
.index div.textblock ul li{
line-height: 4.7em;
background-position: 1.2em 2em;
}
.herzog-glossar #content_8 h3,
.herzog-coffee-catering #content_8 h3,
.herzog-gastronomie #content_8 h3,
.index div.textblock h3 {
font-size: 2em;
}
}
@media (min-width: 68em) {
#layout {
padding-left: 250px; /* left col width "#menu" */
left: 0;
}
#menu {
left: 250px;
}
.menu-link {
position: fixed;
left: 250px;
display: none;
}
#layout.active .menu-link {
left: 250px;
}
#toTop {
right: 35%;
}
}