/* CSS Document */
@charset "utf-8";
@font-face {font-family:'Roboto'; src:url('../fonts/Roboto-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap;}
@font-face {font-family:'Roboto'; src:url('../fonts/Roboto-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap;}
@font-face {font-family:'Roboto'; src:url('../fonts/Roboto-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap;}
@font-face {font-family:'ElsieSwashCaps'; src:url('../fonts/ElsieSwashCaps-Black.ttf') format('truetype'); font-weight:900; font-style:normal; font-display:swap;}

html {height:100%;}
html body *:focus {outline:none;}
a {outline:none;}
body {padding:0 0 70px 0; margin:0; font-family:Roboto, sans-serif; font-weight:300; font-size:16px; line-height:24px; color:#123; background:#fff;}
.footer {position:fixed; bottom:0; left:0; width:100%; height:auto; padding:12px 0 10px; margin:0; z-index:99;
	text-align:center; font-weight:400; font-size:14px; line-height:24px; color:#332; background:#000; 
}
.content {position:relative; width:80%; max-width:800px; height:auto; padding:10% 0; margin:0 auto;}
.bild1, .bild2, .bild3, .bild4, .bild5, .bild6, .bild7 {padding:40%; margin:0; width:20%; height:20%; display:block;
	background-position:center top; background-attachment:fixed; background-repeat:no-repeat;
	-webkit-background-size:cover;
  	-moz-background-size:cover;
  	-o-background-size:cover;
  	background-size:cover;
}
.bild1 {background-image:url(../img/banner/IMG_9009.jpg);}
.bild2 {background-image:url(../img/banner/IMG_8972.jpg);}
.bild3 {background-image:url(../img/banner/IMG_8896.jpg);}
.bild4 {background-image:url(../img/banner/IMG_8881.jpg);}
.bild5 {background-image:url(../img/banner/IMG_8808.jpg);}
.bild6 {background-image:url(../img/banner/IMG_8655.jpg);}
.bild7 {background-image:url(../img/banner/IMG_8639.jpg);}

h1, h2, h3, h4, h5, h6 {font-family:'ElsieSwashCaps', cursive; font-weight:900;}
h1, h2 {font-size:42px; line-height:48px; padding:0; margin:24px auto; display:block; text-align:center;}

p, li {margin-bottom:24px;}
iframe {padding:0; margin:0; display:block;}
strong {font-weight:700;}
em {font-family:'ElsieSwashCaps', cursive; font-weight:900; font-size:20px;}

img {padding:0; margin:0; width:100%; display:block;}
.logo {position:absolute; top:10%; left:10%; width:180px; display:block; z-index:100;}
.center {text-align:center;}
.clear {clear:both;}

.drittel {width:33.33%; padding:0; margin:0; float:left; text-align:center;}
.drittel img {width:100%; margin:20px 0; padding:0; display:block;}
.drittel:hover {opacity:0.9;}

.bunt {background:#000; padding:10% 0 16%; margin:0; clear: both;}
.bunt p {font-family:'ElsieSwashCaps', cursive; font-weight:900; font-size:80px; line-height:100px; text-align:center; padding:0; margin:0;
background-image: url(../img/bunt.jpg); background-position:center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #000 !important;
}
.bunt .big {font-size:140px; line-height:160px; letter-spacing:0.1em;}

a {color:inherit; text-decoration:none;}
a:hover {color:inherit; text-decoration:none;}

.navi {margin:0 20px; padding:22px 0 0; float:right;}
.navi li {list-style-type:none; padding:0; margin:0 auto; text-align:center; display:inline-block;}
.navi li a {padding:0 10px 10px; margin:0; height:10px; width:auto; display:block; color:#fff; text-decoration:none; text-transform:uppercase;}
.navi li a:hover, .navi li.active a {color:#fff; text-decoration:underline;}

/*==========================================================
	Responsive CSS
==========================================================*/
@media only screen and (max-width: 799px){
body {font-size:14px; line-height:20px;}
p, li {margin-bottom:20px;}
.logo {top:6%; left:6%;}
}
@media only screen and (max-width: 666px){
.drittel {width:100%; padding:0; float:none;}
.bunt p {font-size:48px; line-height:60x;}
.bunt .big {font-size:80px; line-height:100px; letter-spacing:0.1em;}
}
@media only screen and (max-width: 449px){
.logo {top:5%; left:50%; margin-left:-90px;}
}