html {background-color: #000;font-size: 14px; margin: 0; padding: 0;letter-spacing:1px;
}
body {
/* background-image: url(hg3s.jpg); */ background-repeat: no-repeat;
background-size: 100%; background-position: center 0 !important;
margin: 0; padding: 0;
font-family:'Open Sans Condensed', 'Open Sans', Calibri, sans-serif; color: #000; font-weight: 400;
color: #ECE2B3;
}
.logo {right: 4%; 
  text-align: center;
position: absolute;
top:0.4em;
width:200px;
z-index: 13;
height: auto;
}
a:link {text-decoration: none; color: #D7C280; }
a:visited { color: #D7C280;text-decoration: none;}
a:hover {color: #fff; text-decoration : none;}
a:active {color: #A5A07F; text-decoration : none;}

h1, h2 {margin: 1.3em 7% 0.19em;
font-family: 'Pinyon Script', Garamond, cursive;color: #D7C63A;
font-weight: 400;text-align: left;
font-size: 2.79em;

}

h2 {
font-size: 1.69em;margin: 0 7% 0.6em;
}
/* .hg {background-image: url(hg3.jpg); background-repeat: no-repeat;
background-size: 100%;display:none;  width: 100%;
  height: 100%;z-index: 3;
  position: absolute;} */
.unt {
margin: 1.3em 20%;
text-align: right;
line-height: 1.69em;
}
.cont-o {
margin: 0 auto;
position: relative;
    z-index: 3;
}
.cont-u {

margin: 13% auto 0;

}
.cont-o > .vbreite > div {	
	text-align: center;
	cursor: pointer;
	padding-top: 5px;
	padding-bottom: 5px;

}
.vbreite {
	width: 100%;
	*zoom: 1;
}
.vbreite:before, .vbreite:after { content: ""; display: table; }
.vbreite:after { clear: both; }

.vbreite1 {
height: 1.09em; 
position: fixed;
  z-index: 999999;
  width: 100%;
}

.vbreite > * {
	-webkit-transition	: all 400ms ease-out;
	-moz-transition		: all 400ms ease-out;
	-o-transition		: all 400ms ease-out;
	-ms-transition		: all 400ms ease-out;
	transition			: all 400ms ease-out;	
}

.cont-o > .vbreite1 > div:hover {
color:#fff;
}

.navi {
	margin		: 0.10% 0 0;
	float		: left;
	display		: block;
	width: 20%;
	text-align: center;
	height: 1.6em;
vertical-align: middle;
padding-top: 3px;
}
.navi:hover {background: #000;}.navi:last-child {background:none;}
.ra {margin:-12em 10%;background-image: url(butrah.png);width: 261px;
  height: 98px;
  display: block;
  box-sizing: border-box;
  float: right;
  /* vertical-align: bottom; */
  font-size: 2em;
  line-height: 2.63em;
  }
.inhalt {
font-size: 1.13em;
    min-height: 39em;

}
#lightboxi {position:fixed; top:3%;left: 50%;  
  width: 800px;height:auto;background-color:rgba(0, 0, 0, 0.93);text-align:center;  margin: 0 0 0 -400px;z-index:20;box-shadow:-3px 7px 23px #3C3C3C;border-radius:7px;}

.onoff{display:block;}
.hide_lb{text-align:right;color:#7E7E7E;margin-right:20px;font-size:22px;font-family:sans-serif;width:3.9%;position:absolute;right:0.3em;top:1em;height:100%;cursor:pointer;}
.x{height:1.1em;}
.x:hover, .rotatex{animation:rotateX 1s 4s ease-in infinite;animation-iteration-count:3;-webkit-animation:rotateX 1s 4s ease-in infinite;-webkit-animation-iteration-count:3;text-align:right;color:#ccc;}
@keyframes rotateX{from{transform:rotateX(0deg);}
to{transform:rotateX(360deg);}
}

#lightboxi img {box-shadow:0 0 25px #111;width:initial;min-height:200px;margin:2.9em auto;  max-height: 700px;z-index: 23;}
.lbimg-gerahmt{ margin: 6.3em auto;
  max-height: 593px;}
/* */.rahmensp{z-index: 24;  max-height: 790px;display: none;
  position: absolute;width:100%;
  left: 0;
  top: -94px;
  position: absolute;}
  .rahmenbild, .rahmensp img{margin:0 auto; max-height: 790px !important;}

.titext, .rahmen  {box-sizing: border-box;
  position: absolute;
   right: 7px;
  bottom: 7px;
  z-index: 33;
  width: 107px;}
  .rahmen{  left: 3px;font-size: 0.9em;
  color: #A19E8E;
  top: 33px;} 
.new img {margin:-1px auto;}.new a{width:21.39%;}
.refsl0{width:100%;overflow:hidden;border-top:1px solid rgba(204, 204, 204, 0.17);padding:2% 0;overflow-wrap:break-word;margin-bottom: 1em;  height: 9em;}  
.refsl0:hover{overflow-x:scroll;}
#slide{min-width:5800px;margin-left:0.3em;}
.refsl0 a {
  display: inline-block;
  position: relative;
}
.refslide img, #slide img, .passepartout img{margin:0 2.3em;display:inline-block;position:relative;height:140px;width:auto;transition:height 0.731s, width 0.731s;-webkit-transition:height 0.731s, width 0.731s;}
.refslide img, #slide img {margin: -1px 1.3em;min-height: 121px;}
.refslide img:hover, #slide img:hover{height:149px;width:auto;}
.rueck1, .vor1, .rueck2, .vor2, .rueck, .vor{width:10%;height:95%;position:absolute;bottom:0;z-index:16;}
.rueck2, .vor2{height:35%;}
.rueck, .vor, .rueck2, .vor2{height:17em;}
.rueck1, .rueck2, .rueck{left:0;}
.vor1, .vor2, .vor{right:0;}
.rueck1:hover, .rueck2:hover, .rueck:hover{background-image:url(pfeilli.png);background-repeat:no-repeat;background-position:left;}
.vor1:hover, .vor2:hover, .vor:hover{background-image:url(pfeilre.png);background-repeat:no-repeat;background-position:right;}

.footer {
min-height: 6em;
background: rgba(0, 0, 0, 0.57);
padding: 1.7em 3em;
 margin: 0 0 3em;
font-size: 0.96em;
color: #99928A;  z-index: 97;
}
.footer > div {
display: inline-block;
margin: 1em 5.7%;z-index: 12;
}
p {
    font-size: 1.16em;
    line-height: 1.39em;
    margin: 0 7%;
    text-align: left;  max-width: 21em;
}
.w, ul {  max-width: 85%;
  line-height: 1.6em;  font-size: 1.37em;  text-align: left;
}
ul {margin-left: 5em;}
form {line-height: 1.39em;}

.ftext {
float: left;
width: 123px;
margin: 6px 0 0 14px;

line-height: 15px;
border: 0px solid #FF3369;
}
.f2text {
color: #000;
padding-left: 3px;
width: 60%;
line-height: 1.6em;

line-height: 15px;
border: 1px solid #ccc;
}
.butt {
background-color: #ddD;
color: #000;
padding-left: 3px;
width: 177px;
font-size: 9pt;
line-height: 15px;
border: 3px solid #B4B4B4;  margin: 3px 0;
}

.form, form, #myform, .kontakt {
width: 70%;
  max-width: 799px;
margin: 0 auto;
text-align: left;
}
.clear {clear: left;}
::-webkit-scrollbar-track, scrollbartrack-vertical {
  background-color: #16171F;
  border-left: 1px solid #131313;
}
::-webkit-scrollbar, scrollbar-small {
  width: 9px;
  height: 9px;
}
::-webkit-scrollbar-thumb, scrollbarthumb-vertical {
  background-color: #393939;
  border-bottom: 1px solid #444;
}

.disclaimer {
margin-top: 11px;
color: #ddd !important;
}
.powered-by-logo {
opacity: 0.3 !important;
}
.zusli {
width: 100%;
display: block;
padding: 0.4em 1em 0.4em 29%;
margin: 1.4em 0 0.21em;
background-color: #D7D7D7;
}
.xx {  
z-index:9999999999;position: fixed;}
.xxx {
display: none;z-index:9999999999;margin-left: 3.2em;
  padding: 1em;  top: -3em;
  position: absolute;
}
.text {margin-left: 5%;
  max-width: 24em;
} 
.dhg{
  background-color: rgba(19, 8, 24, 0.77);
} 
/* 
	===================================== DESKTOP, LARGE SCREENS ====
*/

@media only screen and (min-width: 1640px) {
.inhalt {
  min-height: 42em;
}	

}
@media only screen and (min-width: 1840px) {
.inhalt {
  min-height: 53em;max-width: 92%;
  margin: 0 auto;
}	
html {font-size: 14px;}
h1 { font-size: 2.99em;}
}


/* 
	=========================================== DESKTOP  1200px ====
*/
@media only screen and (max-width: 1280px) {
.footer > div {
display: inline-block;
margin: 1em 3.6%;
}
h1 {margin: 1em 7% 0.19em;font-size: 2.19em;}
h2 {
  font-size: 1.49em;}
p {
  font-size: 1em;
  }
  .text {
  max-width: 23em;margin-left: 3%;
}
.ra {
  margin: -9em 10%;
}

}



/* 
	============================================= IPAD LANDSCAPE ====
*/
@media only screen and (max-width: 1024px) {
h1 {
  font-size: 1.79em;
}
.footer > div {
display: inline-block;
margin: 1em 3%;
}
.ra {
  margin: -9em 5%;}
  s

.text {
  max-width: 23em;margin-left: 1%;margin-top: -6em;
}

.xxx {
  margin-left: 3.2em;
  padding: 1em;
  top: 1.6em;
  position: absolute;
}

.inhalt, p {
font-size: 0.93em;
	}
#slide {
  min-width: 5400px;
  }





}
/* 
	============================================== IPAD PORTRAIT ====
*/
@media screen and (max-device-width:768px) and (orientation:portrait){
.refsl0{margin-top:1.2em;}

.ra {margin:-10em 6%;}
.text {
  max-width: 17em;margin-left: 1%;  margin-bottom: 11em;
}


}



/* 
	=========================================== IPHONE LANDSCAPE ====
*/
@media handheld, only screen and (max-width: 480px) {
html {
  font-size: 13px;
}
 .logo img {max-height: 136px;
  width: auto;
  margin: -4px -23px 0 38px;
  }
  #slide {
  min-width: 5300px;
}

.ra {
  float: none;
  margin: 1em auto;
}
.text {background-color: rgba(9, 1, 16, 0.89);  position: relative;
  top: 37em;max-width: 23em;width: 23em;
  margin: 0 auto;}

	.navi { width: 100%;padding-left: 1em; text-align: left; display:none;background-color: rgba(9, 1, 16, 0.89);}

	.hom {background-image: url(navi-m-icon.gif);
  background-repeat: no-repeat;
  background-position: bottom right;  width: 4em; height: 3em;
}

.rahmen {
  bottom: 96px;
  }
.ra {
  float: none;
  margin: -1em auto;
}


p {
    font-size: 1.16em;
    letter-spacing: 0.02em;
    text-align: left;max-width: 86%;
}

.pro {

top: 60%;
}
.zusli {
width: 100%;
display: block;
padding: 0.4em 0.41em 0.4em;
overflow: hidden;
}
#lightboxi img {
  margin: 0.9em auto;
  }
.rahmenbild, .rahmensp img {
  margin: 0 auto;
  max-height: 584px !important;
}
.rahmensp {356  top: -77px;  margin-top: 3%;}
#lightboxi {
  padding-bottom: 9%;
}
#slide {
  min-width: 5340px;
  }

.form, form, #myform, .kontakt {
  width: 90%
  }
  .f2text {
  width: 96%;
  }
  .butt {
  width: 70%;}
  .refsl0 {
  height: 140px;margin-top: -4em;
  }
  .xxx {
  margin-left: 3.2em;
  padding: 0 1em 1em;
  top: 0em;
  position: absolute;
  }

  }


  /* 
	=========================================== IPHONE LANDSCAPE ====
*/
@media handheld, only screen and (max-height: 380px) {

  .text {
  max-width: 323px;
  margin-top: -4em;
}
}
/* 
	============================================ IPHONE PORTRAIT ====
*/
@media handheld, only screen and (max-width: 320px) {

html {
  font-size: 12px;
  }
	.cont-o, .cont-u { width: 100% !important; max-width: 100% !important; }

	.navi  {
			width		: 92%;
			margin-left	: 0%;
			margin-right	: 0%;
			padding-left	: 4%;
			padding-right	: 4%;
	}
	.inhalt {
font-size: 0.93em;
	}


p {
    font-size: 1.16em;
    letter-spacing: 0.02em;
    line-height: 1.09em;
    margin: 0 10%;
    text-align: left;
}
#slide {
  min-width: 5300px;
  }
.pro {

top: 60%;
}
/* .rahmenbild, .rahmensp img {
  margin: 0 auto;
  max-height: 688px !important;
  width: 435px;
  min-width: 476px;
  margin: -1px 0 0 -3.2em;
} */
}

/* 
	============================================  SMALL PHONES ====
*/
@media handheld, only screen and (max-width: 240px) {

	.inhalt {
font-size: 0.93em;
	}
.pro {

top: 60%;
}
/* ----------------- */
}
@font-face {
font-family : "'Pinyon Script'";
font-style : normal;
font-weight : 400;
src : local('Pinyon Script'), local('PinyonScript'), url(http://fonts.gstatic.com/s/pinyonscript/v6/TzghnhfCn7TuE73f-CBQ0DmuEnbvkdF7vjbeHX60E38.ttf) format('truetype');
}

@font-face {
font-family : "'Pinyon Script'";
font-style : normal;
font-weight : 400;
src : local('Pinyon Script'), local('PinyonScript'), url(http://fonts.googleapis.com/css?family=Old+Standard+TT) format('truetype');
}