/* chivo-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/chivo-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* chivo-italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Chivo';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/chivo-v20-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* chivo-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/chivo-v20-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* chivo-800 - latin */
@font-face {
  font-display: swap;
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 800;
  src: url('/fonts/chivo-v20-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


html {
	overflow-y:scroll;
}
table {
	font-size:100%;
}
textarea {
	font-family: 'Chivo', Verdana, Geneva, sans-serif;
	font-size:100%;
}
p {
	margin:0px;
	margin-bottom:10px;
	margin-top:3px;
	padding:0px;
}
hr {
	color:#CCC;
}
a:link, a:visited   {
	color: #db3512;
	text-decoration:underline;
	font-weight:normal;
}
a:hover, a:focus, a:active  {
	color: #000; /*9EBEE4*/
	text-decoration:underline;
	font-weight:normal;
}
a img {
	border:0px;
}
br.clear {
	clear:both;
}

#inhalt ul {
	list-style-type: square;
	margin: 20px 0px 0px 22px;
	padding: 0px;
}
#inhalt li {
	margin: 0px;
	margin-top:5px;
	padding: 0px;
}

#skip {
	position:absolute;
	left:-1000px;
}
.skip {
	margin: 0px;
	padding: 0px;
	text-indent: -10000px;
	list-style-type: none;
}

body {
	margin: 0px 0.5% 5px 0.5%;
	font-family:'Chivo', Calibri, Verdana, Geneva, sans-serif;
	font-weight: 400; 
	color:#000;
	background-color:#fff;
	line-height:130%;
}
h1 {
	font-size:250%;
	font-weight:600;
	line-height:100%;
	font-weight: 800; 
	margin-bottom:20px;
	color:#000;
}
h1:first-child {
	padding-top:0;
	margin-top:0;
}
h2 {
	font-size:200%;
	line-height:normal;
	font-weight: 600; 
	margin-bottom:15px;
	color:#000;
}
h2 img {
	padding-top:7px;
}
h3 {
	font-size:140%;
	line-height:normal;
	font-weight: 600; 
	margin-bottom:10px;
	color:#000;
}
#wrapper {
	position:relative;
	margin:0 auto 0 auto;
	max-width:1100px;
	/*min-width:750px;*/
	height:auto;
	z-index:1;
}
#head {
	width:100%;
	height:160px;
	position:relative;
	transition:0.8s;
}
#kapfenberg {
	width:270px; /*px;*/
	position:absolute;
	height:70px;
	top:25px;
	right:0px;
}
#kapfenberg img {
	max-width:100%;
	height:auto !important;
}
#immo {
	position:absolute;
	left:0;
	top:14px;
	width:400px;
	height:100px;
	z-index:10;
	transition: 0.8s;
	font-size:3em;
	line-height:normal;
}
#immo a {
	text-decoration:none;
	color: black;
	font-weight:800;
}
#navi {
	width:100%; /*870px;*/
	position:absolute;
	height:auto;
	top:120px;
	left:0;
	font-size:120%;
	z-index:100;
}
#main {
	background-color:#ffe6e6;
	width:100%;
	height:auto;
	padding:0;
	z-index:100;
}
#inhalt {
	width:97%; /*700px;*/
	height:auto;
	padding:17px 1.5%; /*17px*/
	font-size: 110%;
}

/* NAVI */

#navi ul {
	width:100%; /*px;*/
	height:auto;
	list-style:none;
	padding:0;
	margin:0;
	float: right;
}
#navi li {
	width:auto;
	float:left;
	margin:0;
	padding:3px 30px 3px 0;
}
#navi li:last-child {
	padding:3px 0;
}
#navi li a {
	/*display:block;*/
	text-align:center;
	/*height:68px;*/
	text-decoration:none;
	text-transform:uppercase;
	padding:2px;
	font-weight: 700; 
}
#navi li a:link, #navi li a:visited {
	color:#000;
}
#navi li a:hover, #navi li a:focus, #navi li a:active, #navi li a.active {
	color:#FFF;
	background-color:#db3512;
}


/*Footnavi */

#footer {
	width:100%;
	padding:20px 0 0 0;
	font-size:0.7em;
}
#footer ul {
	width:100%;
	margin:0;
	padding:0;
	text-align: center;
}
#footer ul li {
	width:auto;
	margin:0;
	padding:0 20px;
	display: inline;
	list-style:none;
	border-left:1px solid #ccc;
}
#footer ul li:first-child {
	padding:0 20px 0 0;
	border-left:none;
}
#footer ul li a {
	text-decoration:none;
}
#footer ul li a:link, #footer ul li a:visited {
	color:#666;
}
#footer ul li a:hover, #footer ul li a:active, #footer ul li a:focus {
	color:#db3512;	
}



/* Ende Footernavi */


/* Allgemeine Definitionen */
a img {
	border:none;
}
img {
	max-width:100%;
	height:auto !important;
}
.clear {
	clear:both;
}
nav a#pull {
	display: none;
}

/* Bildergalerie Leerstände */
div.pic {
	width:163px;
	height:108px;
	padding:17px 17px 0 0;
	float:left;
}
div.pic.p6 {
	padding:17px 0 0 0;
}

/* Übersicht Leerstände */
.projekte {
	position:relative;
	width:30%;
	margin-right:2%;
	margin-bottom:15px;
	height:auto;
	float:left;
	
	background-color:#db3512;
	padding:1%;
	text-align:center;
	border-radius:20px;
	min-height:400px;
}
.projekte img {
	border-top-left-radius:16px;
	border-top-right-radius:16px;
}
.projektbild {
	border-top-left-radius:16px;
	border-top-right-radius:16px;
	height:200px;
	
	background-size: 200%;
	background-position: center;
	background-repeat: no-repeat;
	transition:0.7s;
	background-color:#FFF;
}
.projektbild:hover, .projektbild:active {
	background-size: 215%;
}
.projekttext {
	min-height:120px;
	padding-top:30px;
	line-height:175%;
	overflow:hidden;
}
.projektpreis {
	min-height:50px;
}

.projekte:nth-child(3n+4) {
	clear:left;
}

.projekte img { width:100% }
.text { padding-top:10px; }
.projekte a {
	color:white !important;
	font-size:120%;
	text-decoration:none;
	text-shadow:none;
	display:block;
}
.projekte.last { margin-right:0; }


/* Map bei Leerflächen */
#map_canvas {
	width: 100%; 
	height: 500px;
}

th {
	text-align:left;
	background-color:#D1D1D1;
}
table.foerderungen tr:nth-child(odd) { background-color:#efefef; }


.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video {
	position: relative;
	padding-bottom: 56.25%; /* 640x360 */
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}


/* ############################# */

#nav_icon {
	display: none;
}


/* ######################################################*/


.ribbon {
	position: absolute;
	left: -2px; 
	top: -2px;
	z-index: 1;
	overflow: hidden;
	width: 180px; 
	height: 90px;
	text-align: right;
}
.ribbon span {
    /*font-family: 'Mansalva';*/
    font-size: 15px;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    line-height: 30px;
    transform: rotate(-25deg);
    -webkit-transform: rotate(-25deg);
    width: 240px;
    display: block;
    background: #79A70A;
    background: linear-gradient(#9BC90D 0%, #79A70A 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 20px;
    left: -62px;
}
.lila {
	background-color:#968cff;
	color:#FFF !important;
	padding:3px 20px 20px 20px;
}
.lila h1 {
	color:#FFF !important;
}
.links {
	float:left;
	width:60%;
	padding:0 5% 0 0;
}
.rechts {
	float:left;
	width:35%;
	padding: 0;
}
.rund {
	border-radius:40px;
	padding: 20px 30px 20px 30px;
	margin:30px 0;
}
.whitebox {
	background-color:#FFF;
}
.redbox, .redbox h1, .redbox h2, .redbox h3  {
	background-color:#db3512;
	color:#FFF !important;
}
.redbox a:link, .redbox a:visited {
	color:#FFF !important;
	text-decoration:none;
}
.redbox a:hover, .redbox a:active {
	color:#d2e6b9 !important;
	text-decoration:underline;
}
.greenbox {
	background-color:#d2e6b9;
}
.greenbox a:link, .greenbox a:visited {
	color:#000 !important;
	text-decoration:none;
}
.greenbox a:hover, .greenbox a:active {
	color:#db3512 !important;
	text-decoration:underline;
}
.wordbreak {
	word-wrap:break-word;
}

.center {
	text-align:center;
}

.large {
	font-size:130%;
}

#topbild img {
	width:100% !important;
}

.button {
	border-radius:20px;
	background-color:#FFF;
	padding:20px;
	margin:40px 0 20px 0;
	transition:0.7s;
	text-align:center;
	border:1px solid #968cff;
	display:block;
}
a.button  {
	color:#000 !important;
	text-decoration:none;
}
.button:hover {
	background-color:#db3512;
}

@media screen and (max-width: 1000px) {
	#navi li {
		padding:3px 20px 3px 0;
	}
}
@media screen and (max-width: 950px) {
	#navi  {
		font-size:115%;
	}
	#navi li {
		padding:3px 15px 3px 0;
	}
}


@media screen and (max-width: 1124px) {
	div.pic.p6 {
		padding:17px 17px 0 0;
	}
}
@media screen and (max-width: 890px) {
	#inhalt {
		hyphens: auto;
	}

	#head { 
		height:95px;
	}
	#navi {
		position:absolute;
		width:300px;
		left:45px;
		top:5px;
		height:0;
		z-index:100;
		background-color:#d2e6b9;
		opacity: 0;
		transition: 0.4s;
		border: 5px double #968cff;
		border-radius: 10px;
		overflow:hidden;
	}
	#navi ul {
		width:auto; 
		height:auto;
		padding:8px 15px;
		float:none;
	}
	#navi li {
		width:100%;
		float:none;
		margin:0;
		padding:8px 0;
		border-bottom:1px solid #efefef;
	}
	#navi li:last-child { border-bottom:none; }
	#navi li a {
		padding:0;
		height:auto;
		text-decoration:none;
	}
	#navi li a:link, #navi li a:visited {
		
	}
	#navi li a:hover, #navi li a:focus, #navi li a:active, #navi li a.active {
		color:#db3512;
		background-color:inherit;

	}

	#navi.change {
		opacity: 1;
		height:auto;
	}
	
	#immo {
		font-size:2em;
		left:55px;
		top:9px;
		width:80px;
		height:auto;
	}
	#kapfenberg {
		width:250px; /*px;*/
		height:70px;
		top:10px;
		right:5px;
	}
	#main {
		
	}
	
	/* Bildergalerie Leerstände */
	div.pic {
		width:110px;
		height:auto;
		padding:10px 10px 0 0;
		float:left;
	}
	div.pic.p6 {
		padding:10px 10px 0 0;
	}
	/* Map bei Leerflächen */
	#map_canvas {
		width: 97%; 
		height: 350px;
	}
	
	
	/* ICON */
		
	#nav_icon {
		position:absolute;
		left:5px;
		top:10px;
		width:35px;
		height:35px;
		z-index:100;
		
		display: inline-block;
		cursor: pointer;
	}
	#nav_icon::after {
		content: "Menü";
		font-size: 12px; 
		color: #333; 
		transition: 0.4s;
	}
	#nav_icon.change::after {
		content: "Close";
	}
	#nav_icon div {
		width: 35px;
		height: 2px;
		background-color: #999;
		margin: 8px 0;
	}
	.bar1, .bar2, .bar3 {
		width: 35px;
		height: 1px;
		background-color: #000;
		margin: 10px 0;
		transition: 0.4s;
	}
	#nav_icon div.bar3 {
		margin: 0px 0;
	}
	/* Rotate first bar */
	.change .bar1 {
		-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
		transform: rotate(-45deg) translate(-7px, 4px) ;
	}
	
	/* Fade out the second bar */
	.change .bar2 {
		opacity: 0;
	}
	
	/* Rotate last bar */
	.change .bar3 {
		-webkit-transform: rotate(45deg) translate(-10px, -8px) ;
		transform: rotate(45deg) translate(-10px, -8px) ;
		width: 35px !important;
	}
	/* Ende Icon */

	h1 { font-size: 200%; }
	h2 { font-size: 130%; }

}
@media screen and (max-width: 730px) {
	/* Übersicht Leerstände */
	.projekte {
		width:47%;
		margin-right:2%;
		margin-bottom:15px;
	}
	.projekte.last { margin-right:2%; }
	.projekte:nth-child(2n+2) {
		margin-right:0%;
	}
	.projekte:nth-child(3n+4) {
		clear:none;
	}

	h1 { font-size: 170%; }
	h2 { font-size: 120%; }
	
	.links, .rechts {
		float:none;
		width:100%;
		padding: 0;
	}

}

@media screen and (max-width: 560px) {
	#head { 
		height:110px;
	}
	#immo {
		left:5px;
		top:65px;
	}
}

@media screen and (max-width: 505px) {
	/*
	#head { 
		height:80px;
	}
	#immo {
		font-size:1.5em;
		left:55px;
		top:3px;
		width:65px;
		height:auto;
	}
	#kapfenberg {
		width:230px;
		height:70px;
		top:5px;
		right:0px;
	}
	#nav_icon {
		position:absolute;
		left:5px;
		top:2px;
		width:35px;
		height:35px;
		z-index:100;
		
		display: inline-block;
		cursor: pointer;
	}
	#navi {
		left:63px;
		top:4px;
	}
	*/
	/* Bildergalerie Leerstände */
	div.pic {
		width:90px;
		height:auto;
		padding:8px 8px 0 0;
		float:left;
	}
	div.pic.p6 {
		padding:8px 8px 0 0;
	}
	
	/* Map bei Leerflächen */
	#map_canvas {
		width: 95%; 
		height: 300px;
	}
	
}


@media screen and (max-width: 360px) {
	/* Übersicht Leerstände */
	.projekte {
		width:96%;
		margin-right:0;
		padding:2%;
		margin-bottom:10px;
	}
}

.fettweiss {
    color: #FFF;
}