@font-face {
	font-family: Xolonium;
	src: url("../font/Xolonium-Regular.ttf");
}
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600');
body {background: #000; color: #fff; font-weight: 300}

h1, h2 {color: #fff; font-family: "Xolonium"; font-size: 30px; position: relative; padding-left: 66px}
h3 {color: #fff; font-family: "Xolonium"; font-size: 20px; position: relative;}
h4, .link {color: rgba(220,43,24,1); font-family: "Xolonium"; font-size: 16px; position: relative;line-height: 0; text-decoration: none}
h1::before {content: url("../images/icon-news.png"); position: absolute; top: 7px; left: 0}
h2::before {content: url("../images/icon-galerie.png"); position: absolute; top: 7px; left: 0}
strong {font-weight: 600}

header {position: fixed; top: 0; left: 0; width: 100%; z-index: 100;}
.nav-kontakt {position: absolute; top: 5px; right: 30px; z-index: 10}
.nav-kontakt a{color: #818181; text-decoration: none; padding-left: 10px; font-family: "Xolonium"; font-size: 11px; text-transform: uppercase}
.nav-kontakt a:hover{color: #dc2b18}
.logo {background: #000 none repeat scroll 0 0; height: 150px; margin-left: -10px; margin-top: -54px; overflow: hidden; position: relative; transform: rotate(-4deg); width: 117%; z-index: 9;}
.logo img {width: 100%; height: auto; max-width: 500px;transform: rotate(4deg); padding: 60px 60px 0 40px}
.navi {position: absolute; top: 0px; left: 0; width: 100%; background: rgba(220,43,24,0.6); height: 170px}
.navi ul {position: absolute; bottom: 10px; right: 30px}
.navi ul li {display: inline-block;position: relative; padding-left: 28px}
.navi ul li a {color: #fff; text-decoration: none; position: relative; font-family: "Xolonium"; font-size: 20px; text-transform: uppercase}
.navi ul li::before {content: url("../images/nav-list.png"); position: absolute; left: 3px; top: 3px}
.navi ul li:first-of-type::before {content: none}
.info, .info-resp {position: relative; margin: 74px 0 0 30px; }
.info p, .info-resp p {color: #fff; display: inline-block; padding: 2px 9px; font-family: "Xolonium"; font-size: 17px; text-transform: uppercase}
.info p:first-of-type, .info-resp p:first-of-type {background: #dc2b18;}
.info p:last-of-type, .info-resp p:last-of-type {background: #000}
.eyecatcher {position: relative; z-index: 0;  margin-bottom: -100px}
.eyecatcher img {width: 100%; height: auto}
.info-resp {display: none}
.adresse {position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.5); padding: 3px 0}
.adresse p {color: #fff; font-family: "Xolonium";padding-left: 30px }
.link-geiwiz {color: #fff; text-decoration: none; font-weight: 600}
.link-geiwiz:hover {color: #000}
#shop {padding: 250px 0 0 0; margin-bottom: -100px}
#news {padding: 250px 0 0 0; margin-bottom: -100px}
#galerie {padding: 250px 0 100px 0}
#impressum {padding: 50px 0 100px 0}
#impressum a {color: #fff; text-decoration: none}
#impressum a:hover {color: rgba(220,43,24,1); }
#rally {padding: 250px 0 100px 0}
#kontakt {padding: 200px 0; background: url("../images/bg-kontakt.jpg")no-repeat; background-size: cover; position: relative}
#kontakt .top {position: absolute; bottom: 21px; left: calc(50% - 20px)}
#kontakt h2 {padding-bottom: 20px}
#kontakt strong {text-transform: uppercase}
.klein span {font-size: 13px}
.unten {padding-bottom: 20px}
.shop {display: flex}
.shop-box {background: #dc2b18; text-align: center; margin: 0 10px; justify-content: space-between; align-items: center; flex-grow: 3; position: relative; width: 28%; min-height: 170px}
.shop-box p {color: #fff; padding: 0 20px 20px 20px; font-family: 'Open Sans', sans-serif;font-size: 14px; font-weight: 300; line-height: 19px}
.shop-box span {font-family: "Xolonium"; font-size: 20px; color: #000;padding: 10px 0 10px 0; display: block; border-bottom: 1px solid #000}

.shop-link {background: #b32112!important; width: 100%; height: 40px; position: absolute; left: 0; bottom: -30px}
.shop-link:hover {background: #000!important}
.shop-link a {color: #fff; text-decoration: none;padding-top: 20px; display: block; font-family: "Xolonium";position: relative; font-size: 14px}
.shop-link a img {margin: -7px 5px 0 0 }
#news span {color: #dc2b18; font-family: "Xolonium";}
.newsblock {background: #1b1b1b; padding: 20px; margin-bottom: 10px}
.mehr-bilder {position: relative}
.mehr-bilder img {width: 100%; height: auto; }
.mehr-bilder label {background: rgba(220, 43, 24, 0.6) none repeat scroll 0 0; color: #fff; font-family: "Xolonium"; font-size: 20px; left: calc(50% - 113px); padding: 13px 35px; position: absolute; text-decoration: none; top: 172px; z-index: 100;}
.mehr-bilder label:hover {background:rgba(220,43,24,1)}
.produktbox {display: inline-block}
.produktbox a img:hover {background: rgba(220,43,24,0.6) }
.popup-100 {height: auto; padding-top: 50px}
.galerie img {padding: 10px; width: 32%; height: auto}
.shoplink a {color: #dc2b18; border: 1px solid #dc2b18; padding: 5px; text-decoration: none; font-size: 12px; text-transform: uppercase;  display: block; text-align: center}
.shoplink a:hover {background:#dc2b18; color: #fff; }
.shoplink img {padding: 0 0 10px 0!important}
/* Bilgrößen */
.hundert {width: 100%; height: auto}
.achtzig {width: 80%; height: auto}
.siebzig {width: 70%; height: auto}
.sechzig {width: 60%; height: auto}
.fuenfzig {width: 49%; height: auto}
.vierzig {width: 40%; height: auto}
/* Ende */

.para { background: url("../images/para.jpg")no-repeat; background-size: cover;  padding-top: 60px; position: relative; height: 300px; margin-bottom: -100px}
.para .kante {position: absolute; top: 0; left: 0; width: 100%}
.para .button {position: absolute; bottom: -15px; left: calc(50% - 20px);}

.popuplabel { color: #787878; cursor: pointer; font-size: 13px}
.popupinput { display: none}
.popupinput + .popup {box-sizing: border-box; position: fixed; display: block; width: 0; height: 0; padding: 0; margin: 0; overflow: hidden; left: 0;top: 50%;
    left: 50%; z-index: 3645; opacity: 0;transition: all .8s ease, height .3s ease .3s}
.popupinput:checked + .popup { width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5);opacity: 1; top: 0; left: 0}
.box {background-color: #000; border: 1px solid #000; padding: 5%; width: 100%; height: 100%; overflow: auto; box-sizing: border-box}
.box p {padding-bottom: 10px}
.box img {padding: 10px; }
.box span {font-weight: 700; color:rgba(220,43,24,1)}
.popup ul li {list-style: disc}
.popup ul {padding-left: 10px; padding-bottom: 15px}

.popup label { position: absolute; top: 70px; right: 70px; width: 30px; height: 30px}

.popup label::before,
.popup label::after { content: ""; display: block; width: 3px; height: 100%; background: rgba(220,43,24,1); position: absolute; transform: rotate(45deg); cursor: pointer;left: 65px; top: -50px; z-index: 100}
.popup label::after {transform: rotate(-45deg)}

.fsp-close {font-size:30px; color:#B61918;}
.fsp-content {width:75% !important;  height:100% !important; display:flex !important; position:relative !important; align-items:center !important; margin:auto !important; justify-content:center !important; align-items:center !important; top:0px !important; left:0% !important; margin-top:30px !important; }
#popup-1, #popup-2, #popup-3, #popup-4, #popup-5, #popup-6, #popup-7, #popup-8, #popup-9, #popup-10, #popup-11, #popup-12 {display: none}
#popup-1 img, #popup-2 img, #popup-3 img, #popup-4 img, #popup-5 img, #popup-6 img, #popup-7 img, #popup-8 img, #popup-9 img, #popup-10 img, #popup-11 img, #popup-12 img, #popup-100 img {padding: 10px}
#popup-1 p, #popup-2 p, #popup-3 p, #popup-4 p, #popup-5 p, #popup-6 p, #popup-7 p, #popup-8 p, #popup-9 p, #popup-10 p, #popup-11 p, #popup-12 p, #popup-100 p {padding-bottom: 20px}
#popup-1 a, #popup-2 a, #popup-3 a, #popup-4 a, #popup-5 a, #popup-6 a, #popup-7 a, #popup-8 a, #popup-9 a, #popup-10 a, #popup-11 a, #popup-12 a, #popup-100 a {color: #dc2b18; text-decoration: none}
.resp-para {display: none}
@media screen and (min-width:1600px){
    .para {height: 600px}
}

@media screen and (min-width:1450px){
    .para {height: 550px}
}

@media screen and (min-width:1300px){
    .para {height: 450px}
    #kontakt .top {bottom: -19px}
}

@media screen and (max-width: 860px) {
    .logo img {max-width: 400px; padding: 90px 0 0 40px}
    .eyecatcher img {padding-top: 66px}
    .galerie img {width: 49%; }
    .para {height: 250px}
}

@media screen and (max-width: 546px) {
    .navi ul {display: none} 
    .navi {height: 132px}
    .info {display: none}
    .info-resp p {width: 100%;font-size: 12px; padding-left: 30px }
    .info-resp {display: block; position: absolute; bottom: -64px;margin: 0; width: 100% }
    .adresse p {font-size: 12px; line-height: 17px}
    .shop {display: block; }
    .shop-box {width: 96%; margin-bottom: 40px}
    .resp-para {display: block; width: 100%; height: auto; margin-bottom: -200px}
    .para {display: none}
}

@media screen and (max-width: 500px) {
   .achtzig, .siebzig, .sechzig, .fuenfzig {width: 100%; height: auto}
  
}

@media screen and (max-width: 410px) {
   .logo img {max-width: 290px;}
 
}

@media screen and (max-width: 387px) {
   .nav-kontakt a {font-size: 9px;}
    .nav-kontakt {right: 10px}
   
}