@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500,700);

*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

}
* {
margin: 0;
padding: 0;
border: 0;
}
html {
height: 100%;
width:100%;
overflow-x: hidden;
}
body {
height: 100%;
font-size: 100%;
font-weight: normal;
font-weight: 400;
line-height: 1.3em;
font-family: 'Roboto', Helvetica, Arial, sans-serif;
color: #fff;
text-shadow: 1px 1px 2px rgba(195, 130, 87, 0.5);
background: #d6ac80 url(../img/fond.jpg) repeat fixed center top;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-font-smoothing: subpixel-antialiased;
}
::-webkit-scrollbar { display: none; }
::-moz-scrollbar { display: none; }

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

/* TYPO ===========================  */

h1, h2, h3, h4, p {
margin: 0;
line-height: 1.2em;
font-weight: 400;
letter-spacing: 1px;
}
h1 {
padding-top: 0em;
margin-bottom: 0.9em;
font-size: 1em;
font-weight: 500;
}
h2 {
padding-top: 0px;
margin-bottom: 1.5em;
font-size: 1em;
font-weight: 500;
}
h3 {
margin: 0;
padding-bottom: 0.2em;
font-size: 1.4em;
}
h4 {
padding-bottom: 0.9em;
font-weight: 400;
font-size: 0.95em;
}
p {
padding-bottom: 0.9em;
font-size: 0.95em;
}
@media screen and (max-width: 640px) {
h1 {
padding-top: 0.5em;
font-size: 1.1em;
}
p {
padding-bottom: 1em;
font-size: 1.1em;
font-weight: 400;
}
}
a {
color: #fff;
text-decoration: none;
outline: none;
}
a:hover, a:focus {
color: #fff;
outline: none;
text-decoration: none;

}
a:active, a:hover { 
outline: 0; 
}
.active {
cursor: default;
}
bold, strong { font-weight: bold; font-weight: 500; }

.underline {
padding-top: 0.9em;
display: inline-block;
border-bottom: 2px solid #FFF;
}

/* WRAPPER =============================================== */

#wrapper {
width: 600%;
height: 100%;
min-height:300px;
overflow: hidden;
}
@media screen and (max-width: 640px) {
#wrapper {
width: 100%;
height: auto;
min-height:100%;
}
}

/* HEADER ============================== */

#header {
position: fixed;
display:block;
top:0;
width: 100%;
height: 80px;
z-index:1000;
}
.header-inner{
position: relative;
top:35px;
height: 80px;
width: 100%;
max-width: 1140px;
margin: 0 auto;
}
.logo {
position: absolute;
left:7%;
top:0px;
width: 255px;
max-width: 255px;
height: 80px;
z-index:3;
}
.logo a:hover, .logo a:focus {
color: #fff;
outline: none;
text-decoration: none;
border: none;
}
.nav {
position: absolute;
display: block;
width: 100%;
max-width: 1140px;
top: 32px;
right: 0;
height: 40px;
text-align: right;
}
@media screen and (max-height: 660px) {
.header-inner { top: 15px; }
}
@media screen and (max-width: 768px) {
.logo {
position: absolute;
left: 7%;
bottom: 0px;
width: 210px;
max-width: 210px;
height: auto;
}
.nav{top: 24px;width: 100%;}
}
@media screen and (max-width: 690px) {
.logo {
position: absolute;
left: 5%;
bottom: 0px;
width: 190px;
max-width: 190px;
height: auto;
}
.nav{top: 21px;}
}
@media screen and (max-width: 660px) {
#header {
position: absolute;
top: 0;
max-height: 75px;
}
.header-inner{
position: absolute;
top: 0;
height: 75px;
}
.logo { display: none; }
.nav {
top: 10px;
text-align: center;
}
}

/* MENU =============================== */

.menu {
position: absolute;
right: 0;
top: 1px;
height: 28px;
width: 63%;
margin: 0 8% 0 0;
overflow: hidden;
text-align: right;
}
.menu li {
display:inline-block;
list-style: none;
padding: 2px 0;
margin: 0 0 0 8%;
}
.menu li.back {
position: absolute;
left:0;
width: 9px;
height: 24px;
margin: 0;
z-index: 8;
border-bottom: 2px solid #fff;
}
.menu li a {
position: relative;
display: block;
float: left;
height: 24px;
font-size: 0.8em;
font-weight: 700;
letter-spacing: 0.1em;
text-decoration: none;
color: #fff;
outline: none;
text-align: center;
text-transform: uppercase;
z-index: 10;
overflow: hidden;
}
.lavalamp-object {
height: 24px !important;
border-bottom: 2px white solid;
}
.menu li a:hover, .menu li a:visited, .lavaLamp li a:active { border: none; }

@media screen and (max-width: 660px) {
.menu {
height: 58px;
width: 100%;
margin: 0;
text-align: center;
}
.menu li {
padding: 3px 0;
margin: 0 5%;
}
.menu li a {
height: 17px;
font-size: 0.8em;
}
.menu li.back {
border:none;;
}
}
@media screen and (max-width: 1024px) and (max-height: 768px) {
.menu li.back {
border:none;;
}
}
@media screen and (max-width: 768px) and (max-height: 1024px) {
.menu li.back {
border:none;;
}
}

.container {
position:relative;
height: 100%;

width: 100%;
max-width: 1140px;
margin: 0 auto;
padding: 140px 0 100px;
}
@media screen and (min-width: 769px) {
.container { max-height: 800px; }
}
@media screen and (max-height: 660px) {
.container { 
padding: 110px 0 90px;
}
}
@media screen and (max-width: 768px) and (min-height: 1000px) {
.container { max-height: 1000px; }
}
@media screen and (max-width: 640px) {
.container {
height: auto;
max-height: 100%;
padding: 0px 0 0px;
}
}

/* SEITEN ================================================ */

#start, #konzept, #presse, #automat, #kontakt, #impressum {
position: relative;
display:block;
width: 16.66%;
float: left;
height: 100%;
text-align: center;
}
@media screen and (max-width: 640px) {
#start, #konzept, #presse, #automat, #kontakt, #impressum {
width: 100%;
float: none;
}
}
@media screen and (max-width: 640px) {
#konzept, #presse, #automat {
border-bottom:1px solid #fff;
}
.footer-mobile {
border-top:1px solid #fff;
}
}
#start {
background: url(../img/fond-start.jpg) no-repeat center top;
background-size: cover;
}
.left { 
margin-left: 8%;
float: left;
height: 100%;
text-align: left;
}
.right { 
margin-right: 8%;
float: right;
height: 100%;
text-align: left;
}
@media screen and (max-width: 640px) {
.left, .right {
position: relative;
margin: 7px 0%;
width: 100%;
float: none;
height: auto;
}
}

/* START ========================= */

.box-start {
position: relative;
width: 48%;
height: 95%;
margin: 0 auto;
text-align: center;
}
.logo-start {
position: relative;
top: 0;
width: 100%;
height: 100%;
padding: 0% 0;
background: url(../img/dk-logo-g.png) no-repeat center center;
background-size: contain;
}
@media screen and (max-width: 640px) {
.box-start { width: 50%; height: 320px; }
.logo-start { height: 95%; }
}
@media screen and (max-width: 480px) {
.box-start { width: 57%; }
.logo-start { height: 92%; }
}
@media screen and (max-width: 320px) {
.box-start { width: 73%; height: 520px; }
.logo-start { height: 75%; }
}

/* KONZEPT ========================= */

.konzept-l { 
position: relative;
float: left;
width: 40%; 
max-width: 410px; 
}
.slider {
position: relative;
float: right;
margin-top: 15px;
width: 36%;
max-width: 410px;
height: auto;
-webkit-box-shadow: 1px 1px 7px 1px rgba(50, 50, 50, 0.2);
-moz-box-shadow: 1px 1px 7px 1px rgba(50, 50, 50, 0.2);
box-shadow: 1px 1px 7px 1px rgba(50, 50, 50, 0.2);
}
.slider li img:hover {
cursor: url(../img/zoom_cursor.png) 25 25, cell;
}
.klick {
position: absolute;
float: left;
top: 55%;
left: 24%;
width: 28%;
height: 31%;
background: url(../img/klickmich.png) no-repeat center center;
background-size: contain;
}

@media screen and (max-height: 780px) {
.klick {
top: 60%;
left: 29%;
width: 22%;
height: 26%;
background: url(../img/klickmich-small.png) no-repeat center center;
background-size: contain;
}
}
@media screen and (max-height: 720px) {
.klick {
top: 65%;
}
}
@media screen and (orientation: portrait) and (max-width: 768px) {
.slider {  
width: 40%; 
}
.klick {
width: 27%;
height: 22%;
top: 48%;
left: 40%;
background: url(../img/klickmich-small.png) no-repeat center center;
background-size: contain;
}
}

@media screen and (max-height: 660px) {
.konzept-l { 
width: 46%; 
max-width: 46%;
}
.slider {  
width: 34%; 
}
.klick {
top: 65%;
left: 32%;
}
}
@media screen and (max-height: 580px) {
.klick {
top: 69%;
}
}
@media screen and (max-height: 550px) and (min-width: 481px) {
.slider { 
margin-top:0px; 
width: 32%; 
}
.klick {
display:none;
}
}
@media screen and (max-width: 640px) {
.konzept-l {
padding: 20px 5% 20px;
width: 100%;
max-width: 100%;
height: auto;
margin:0;
}
.slider  {
width: 53%;
float: right;
margin: 0 5% 30px 0px;
}
.klick {
width: 33%;
height: 30%;
top: 67%;
left: 2%;
}
}
@media screen and (max-width: 480px) and (orientation: landscape) {
.slider { width: 55%; }
.klick {
 width: 33%;
height: 30%;
top: 70%;
left: 2%;
background: url(../img/klickmich-small.png) no-repeat center center;
background-size: contain;
}
}
@media screen and (max-width: 320px) and (orientation: portrait) {
.slider  { width: 90%; }
.klick { display: none; }
}

/* Scrollbars ========================= */

.scrollbox {
position: relative;
float: left;
width: 100%;
height: 100%;
overflow: auto;
}
.scrollbox p a:hover {
border-bottom: 2px solid #fff;
}


@media screen and (max-width: 640px) {
.scrollbox { float: none; }
}

/* PRESSE ========================= */

.presse-l { width: 36%; }
.presse-l p { padding-bottom: 1.4em;; }
.presse-r { width: 40%; padding-right: 25px; }

@media screen and (max-width: 640px) {
.presse-l {
padding: 2.4em 5% 1.2em;
width: 100%;
float: none;
height: auto;
max-width: 100%;
margin: 0;
}
.presse-l h3 {
margin: 0;
padding-bottom: 0.2em;
font-size: 1.2em;
font-weight: 400;
}
.presse-r {
display: none;
}
}

/* AUTOMAT ========================= */

.center {
position: relative;
width: 60%;
height: 100%;
margin:0 auto;
text-align: center;
}
.first {
width: 100%;
height: 100%;
padding: 6% 0;
background: url(../img/schnickschnack.png) no-repeat center center;
background-size: contain;
}
.first img {
width: auto;
max-width: 100%;
height: 100%;
}
.second {
position: absolute;
top:0;bottom:0;left:0;right:0;
width: 100%;
height: 40%;
margin: auto 0;
padding: 0 15%;
text-align: center;
vertical-align: middle;
display: none;
}
.second h4, .second p { font-size: 1.3em; }
.center-mobile  {
display:none;
float: left;
width: 100%;
height: auto;
}

@media screen and (max-width: 768px) {
.center {display: none;}
.center-mobile  {display: block;}
.first {
position: relative;
float: left;
width: 100%;
height: 400px;
margin-top: 15px;
}
.second {
position: relative;
display: block;
float: left;
height: auto;
margin: 0;
padding: 50px 15% 0 15%;
}
.second h4, .second p {font-size: 1.2em;}
}
@media screen and (max-width: 640px) {
.first { display: none; }
.second {
padding: 2.4em 5% 1.2em;
width: 100%;
text-align: left;
}
.second h4, .second p { 
font-size: 1.8em; 
}
}

@media screen and (max-width: 480px) {
.second h4, .second p { 
font-size: 1.6em; 
}
}
@media screen and (max-width: 320px) {
.second {
padding: 2.4em 10% 1.2em 5%;
}
.second h4, .second p { 
font-size: 1.5em; 
}
}

/* KONTAKT ========================= */

.kontakt-l {width: 23%;}
.preload {display: none;}
.map-r {
position: relative; 
margin-top: 4px;
width: 56%;
height: 100%;
max-height: 525px; 
background: url(../img/map.jpg) no-repeat center center;
background-size: cover;
transition: background 0.3s linear;
}
.spot {
position: absolute;  
display: block;
top: 58%;  
left: 52%;
width: 80px;
height: 80px;
border-radius:40px;
}
.spot a {
display: block;
width: 60px;
height: 60px;
text-decoration: none;
border: none;
}
.spot a:hover {text-decoration: none;border: none;}
.hier {
position: absolute;
float: left;
width: 100px;
height: 60px;
background: url(../img/hier.png) no-repeat center center;
background-size: contain;
left:34%;
bottom:6%;
}
@media screen and (max-height: 790px) {
.hier {bottom:3.5%;}
}
.footer-mobile {
display: none;
position: relative;
float: left;
width: 100%;
height: 60px;
padding: 15px 5%;
}
.close-butt {
display: none;
position: absolute;
bottom: 20px;
right: 20px;
width: 31px;
height: 31px;
color: #fff;
background: url(../img/close.png) no-repeat center center;
background-size: contain;
text-indent: -1000px;
}
.close-butt a { text-decoration: none; outline: 0; }
@media screen and (max-width: 768px) and (orientation: portrait) {
.hier {left:37%;bottom:17%;}
}
@media screen and (max-width: 640px) {
.kontakt-l, .map-r  {
position: relative;
padding: 2.1em 5% 1.2em;
width: 100%;
float: left;
height: auto;
max-width: 100%;
}
.map-r  {
height: 400px;
max-width: 90%;
margin: 10px 5% 30px 5%;
}
.hier { display: none; }
.footer-mobile, .close-butt { display: block; }
}

/* IMPRESSUM ========================= */

.wide {
width: 84%;
max-width: 1140px;
height: 100%;
padding-top: 0em;
margin: 0 8%;
padding-right: 20px;
text-align: left;
}
@media screen and (max-width: 640px) {
.wide  {
position: relative;
width: 100%;
max-width: 100%;
height: auto;
margin: 0;
padding: 30px 5% 20px;
}
}

/* Footer =============================================== */

.footer-top , .footer-bottom{
width: 100%;
height: 70px;
}
.footer-top {
display: block;
position: fixed;
top: 730px;
}
.footer-bottom {
display: none;
position: fixed;
bottom: 0px;
}
@media screen and (max-height: 800px) {
.footer-top { display: none; }
.footer-bottom { display: block; }
}
@media screen and (max-width: 768px) {
.footer-top { display: none; }
.footer-bottom { display: block; }
}
@media screen and (max-width: 640px) {
.footer-top, .footer-bottom { display: none; }
}
.footer-inner {
position: relative;
width: 100%;
max-width: 1140px;
margin: 0 auto;
}
.footer-inner ul {
position: relative;
top: 0;
width: 100%;
}
.footer-inner ul li {
display: block;
font-size: 0.8em;
line-height: 1.2em;
font-weight: 400;
letter-spacing: 0.1em;
-moz-appearance: none;
-webkit-appearance: none;
-o-appearance: none;
-ms-appearance: none;
appearance: none;
}
.footer-inner ul li a, .copy {
position: absolute;
display: inline-block;
top: 0;
width: auto;
margin: 0;
padding: 3px 0px;
}
.footer-inner ul li > .copy {
left: 8%; 
font-size: 0.9em;
}
.footer-inner ul li a {
right: 8%;
font-weight: 700;
text-decoration: none; 
}
.footer-inner ul li a:hover {
color: #fff;
border-bottom:2px solid;
}
.footer-inner ul li a.active:hover {
text-decoration: none;
border-bottom: 0px solid;
}
@media screen and (max-width: 640px) {
.footer-inner ul li > .copy { left: 0%;  }
.footer-inner ul li a { right: 0%; }
.footer-inner ul li a:hover { border-bottom: 0px solid; }
}

/* Pfeilbuttons ====================================== */

.prev, .next {
position: absolute;
top: 0;
width: 50px;
min-height: 100%;
opacity: 0.4;
}
.prev {
left: 1%;
background: url(../img/arrows.png) no-repeat 10px center;
}
.next {
right: 1%;
background: url(../img/arrows.png) no-repeat -25px  center;
}
.prev:hover, .next:hover {
/*background-image: url(../img/arrows-red.png);*/
opacity: 1;
border-bottom:none;
}

@media screen and (max-width: 640px) {
.prev, .next { display: none; }
}

/* Hover Transitions ====================================== */

a, .footer-inner ul li a, .prev, .next {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s; 
-o-transition: all 0.3s; 
transition: all 0.3s; 
}

/*  ====================================== */

/*
* html ul { position: absolute; left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}

* html { background: url(fake.jpg) }
* html #full { height: 100%; }


/* Clearfix =========================================== */

.clearfix:before, .clearfix:after {
display: table;
content: " ";
}
.clearfix:after { clear: both; }