/* basics //////////////////////////////////// */

/* browser egalisieren */
html, body, body div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}
html {
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
}
:focus {
	outline:none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
td {
	vertical-align: top;
}
sup {
	font-size:11px;
	vertical-align:top;
	padding-left:3px;
	padding-right:3px;
}

body {
	margin:0px;
	padding:0px;
	text-align:center;
	background:url(bb-imgs/bg.png);
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:right bottom;
}

@font-face {
    font-family: 'belgranoregular';
    src: url('bb-fonts/belgrano-regular-webfont.eot');
    src: url('bb-fonts/belgrano-regular-webfont.eot#iefix') format('embedded-opentype'),
         url('bb-fonts/belgrano-regular-webfont.woff2') format('woff2'),
         url('bb-fonts/belgrano-regular-webfont.woff') format('woff'),
         url('bb-fonts/belgrano-regular-webfont.ttf') format('truetype'),
         url('bb-fonts/belgrano-regular-webfont.svg#belgranoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* layout */


/* container*/.inhalt {
position:absolute;
	width:990px;
	height:600px;
	right:120px;
	bottom:194px;
display:block;
	text-align:left;
	z-index:1;
}
.links {
	position:absolute;
	top:0px;
	left:10px;
	width:443px;
	z-index:10;
}
.logo {
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	height:94px;	
}
.logo img {
	width:100%;
	height:100%;
	height:auto;
}
.personlinks {
	position:absolute;
	top:10px;
	left:355px;
	width:400px;
	height:600px;
	z-index:2;
	background:url(bb-imgs/daester.png);
	background-repeat:no-repeat;
	background-position:200px 0px;
	background-size:auto 580px;
}	
.personrechts {
	position:absolute;
	top:32px;
	left:638px;
	width:352px;
	height:568px;
	z-index:3;
	background:url(bb-imgs/holzer.png);
	background-repeat:no-repeat;
	background-position:14px 4px;
	background-size:auto 530px;
}	

/* textformate */

body, td {
	font:14px/18px belgranoregular,verdana,sans-serif;
	color:#000;
}


.inhalt a {
	color:#000;
	text-decoration:none;
	border-bottom:1px dotted #fbe830;
}.inhalt a:hover, .inhalt a:active, .inhalt a:focus {
	color:#000;
	text-decoration:none;
	border-bottom:1px solid #fbe830;
}h1 {
	font-size:20px;
	line-height:24px;
	width:100%;
	margin-top:37px;
	font-weight:normal;
}
.personlinks p {
	font-size:15px;
	line-height:20px;
	width:198px;
	margin-top:272px;
	text-align:right;
}
.personrechts p {
	font-size:15px;
	line-height:20px;
	margin-top:272px;
	margin-left:194px;
	text-align:left;
}


/* RESPONSIVE
//////////////////////// */

@media only screen and (max-height: 860px) {
	body {
		background-position:right -640px;
	}
	.inhalt {
	top:66px;
	}
}


@media only screen and (max-width: 1230px) {
	body {
		background:url(bb-imgs/bg-k.png);
		background-repeat:no-repeat;
		background-attachment:fixed;
		background-position:center bottom;
	}
	.inhalt {
	left:50%;
		margin-left:-495px;
	}
}

@media only screen and (max-width: 1230px) and (max-height: 860px) {
	body {
		background-position:center -640px;
	}
}


/*mobile*/

@media only screen and (max-width: 1024px) {
	body {
		background:none;
				background: url('bb-imgs/mobilebg.jpg') no-repeat;
				background-position: center 85px;
				background-size: cover;
	}
	
	.inhalt {
	width:352px;
		top:24px;
		margin-left:-176px;
	}
	.links {
		width:100%;
	}
	.logo {
		height:74px;	
	}
	h1 {
		font-size:13px;
		line-height:16px; 
		margin-top:28px;
	}
	.personlinks {
		top:172px;
		left:0px;
		width:100%;
		height:568px;
		background-size: auto 460px;
		background-position:170px 0px;
	}	
	.personrechts {
		top:370px;
		left:0px;
		width:100%;
		height:628px;
		background-size: auto 500px;
		background-position:0px 0px;
	}	
	.personlinks p {
		font-size:13px;
		line-height:16px; 
		width:188px;
		margin-top:12px;
	}
	
	.personrechts p {
		font-size:13px;
		line-height:16px;
		margin-top:366px;
		margin-left:184px;
	}
}


@media only screen and (max-width: 380px) {
	.inhalt {
	width:300px;
		margin-left:-150px;
	}
	.logo {
		height:64px;	
	}
	h1 {
		margin-top:28px;
	}
	.personlinks {
		background-size: auto 420px;
		background-position:145px 0px;
	}	
	.personrechts {
		top:368px;
		height:580px;
		background-size: auto 470px;
		background-position:0px 0px;
	}	
	.personlinks p {
		width:170px;
		margin-top:2px;
	}
	.personrechts p {
		margin-top:326px;
		margin-left:154px;
	}
}


/* Modalfenster */
.display__popup {
  position: relative;
  background: #FFFFFF;
  padding: 5rem;
  width:auto;
  max-width: 450px;
  margin: 2rem auto;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

#modalfenster {
margin-top: 20px;
padding: 10px;
background: rgba(0,0,0,0.15);
float: left;
text-align: center;
}
@media only screen and (max-width: 480px) {
#modalfenster {
margin-top: 280px;
width: 43%;
padding: 3%;
}
.modal {
padding-top: 70px;
}
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
#modalfenster {
margin-top: 500px;
width: 70%;
padding: 3%;
}
}
/* Modal Content */
.modal-content {
  background-color: #fff;
  margin: auto;
  padding: 20px;
  padding-top: 10px;
  width: 350px;
}
.modal-content a {
cursor: pointer;
}
.modal-content img {
max-width: 95%;
height: auto;
}
/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 36px;
  font-weight: 100;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.infobutton {
margin-top: 20px;
box-shadow: 5px 3px 3px grey;
}
#myBtn {
cursor: pointer;
border: none;
background: #f5e524;
padding: 10px;
font-weight: bold;
color: #000;
font-family: 'belgranoregular';
text-transform: uppercase;
font-size: 16px;
letter-spacing: 0.07em;
}
}