/* hind-madurai-300 - latin */
@font-face {
  font-family: 'Hind Madurai';
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/hind-madurai-v11-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/hind-madurai-v11-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/hind-madurai-v11-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/hind-madurai-v11-latin-300.woff') format('woff'), /* Modern Browsers */
       url('/fonts/hind-madurai-v11-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/hind-madurai-v11-latin-300.svg#HindMadurai') format('svg'); /* Legacy iOS */
}
/* hind-madurai-regular - latin */
@font-face {
  font-family: 'Hind Madurai';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/hind-madurai-v11-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/hind-madurai-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/hind-madurai-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/hind-madurai-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/hind-madurai-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/hind-madurai-v11-latin-regular.svg#HindMadurai') format('svg'); /* Legacy iOS */
}
/* hind-madurai-500 - latin */
@font-face {
  font-family: 'Hind Madurai';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/hind-madurai-v11-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/hind-madurai-v11-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/hind-madurai-v11-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/hind-madurai-v11-latin-500.woff') format('woff'), /* Modern Browsers */
       url('/fonts/hind-madurai-v11-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/hind-madurai-v11-latin-500.svg#HindMadurai') format('svg'); /* Legacy iOS */
}
/* hind-madurai-600 - latin */
@font-face {
  font-family: 'Hind Madurai';
  font-style: normal;
  font-weight: 600;
  src: url('/fonts/hind-madurai-v11-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/hind-madurai-v11-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/hind-madurai-v11-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/hind-madurai-v11-latin-600.woff') format('woff'), /* Modern Browsers */
       url('/fonts/hind-madurai-v11-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/hind-madurai-v11-latin-600.svg#HindMadurai') format('svg'); /* Legacy iOS */
}

html {
	height: 100%;
	width: 100%;
}
body {
	margin: 0;
	padding: 0px 3% 0px 3%;
	font-size: 14px;
	color: #000;
	font-family: 'Hind Madurai', sans-serif;
	width:95;
	font-weight: 300;
}

#imagelightbox{position:fixed; top:20px; margin:0 auto; box-shadow: 0px 0px 50px #000; border:15px solid #fff; background:#fff;}
#imagelightbox::before{width:100%; height:100%; position: fixed; background: #000; display: block; content: " ";}

a {
	outline: 0;
	color:#000;
	text-decoration: none;
		-o-transition: .3s;
	-ms-transition: .3s;
	-moz-transition: .3s;
	-webkit-transition: .3s;
	/* ...and now for the proper property */
	transition: .3s;
	font-weight: 600;
}
a:hover {
	color:#FF0095;
}


.clearfix {
	clear: both;
	padding-bottom:20px;
}



.wrapper {
	width: 90%; /*1200px;*/
	margin: 0 auto;
	margin-top:5%;
	margin-bottom:5%;

	text-align: left;
	padding:0px 5% 5% 5%;
	background:url(../stuff/bg.png) #eee fixed;
	display: inline-block;
	
	
}


.wrapper2 {
	width: 100%; /*1200px;*/
	margin: 0 auto;
	text-align: left;
	
	display: block;
	height:auto;
	max-width: 1600px;


	
	
}

.wrapper3 {
	width: 90%; /*1200px;*/
	margin: 0 auto;
max-width: 1600px;

	text-align: left;
	padding:0px 5% 0% 5%;
	display: inline-block;
	
	
}


.wrapper img:first-child, .wrapper img:nth-child(2), .wrapper img:nth-child(3) {
	margin-top: 2%;
}

.wrapper img{    margin: 1.5%;
    vertical-align: middle;
    padding: 0.7%;
    background: #fff;

}
.wrapper3 p{max-width: 800px;}


h1{line-height:1em;}


h1, h2 {
	font-size:16px;
	margin:0px;
	padding:20px 0px 0px 0px;
	color:#fff;
	display:inline;
	font-weight:300;
	letter-spacing:0.05em;
	float:left;
	margin:33px 60px 0px 0px;
	position:relative;
	

}


p {
	font-size:14px;
	line-height:1.6em;
	padding:0px;
	
}

.clear {
	padding:0px 20px 0px 20px;
	width:80%;
	background:none;
}


h2 a {display:inline;}



.logo {

	display:inline;
	background:none;
	text-align: right!important;
	text-align:left;
	z-index:10;
	float:right;
	position: relative;
	top:40px;
	right:10px;
	}

	.logo img{background: none; width:50%;}
	.logopos{position: fixed; width:90%; z-index: 10000; max-width: 1600px;}

h1, .logo h2 {border-bottom:0px dotted #000; padding-bottom:10px; font-size: 70px; color:#000; font-weight: 300;
}


#projekte{margin-top:90px; 	
}
a:focus { outline: none;}

#projekte a img:hover{-webkit-box-shadow: 0px 0px 24px -8px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 24px -8px rgba(0,0,0,0.75);
box-shadow: 0px 0px 24px -8px rgba(0,0,0,0.75);
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
		-o-transition: .3s;
	-ms-transition: .3s;
	-moz-transition: .3s;
	-webkit-transition: .3s;
	/* ...and now for the proper property */
	transition: .3s;
	-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: grayscale(0%);	
}

#projekte a img{
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
		-o-transition: .3s;
	-ms-transition: .3s;
	-moz-transition: .3s;
	-webkit-transition: .3s;
	/* ...and now for the proper property */
	transition: .3s;


	
}



@media screen and (max-width: 780px) {
	.wrapper img {
		width: 88% !important;
		margin: 3%;
		padding: 3%;
		margin-top: 0;
		text-align:center;
	}
	 .logo{text-align:center;}
	.wrapper img:first-child {
		margin-top: 3%;
	}
	#kaufen, #info, #impressum {
		width: 90% !important;
		margin: 3%;
		margin-top: 0;
		padding: 2%;
	}
	.logo img {
		width: auto !important;
		margin: 3%;
		padding: 3%;
		margin-top: 0;
		width:20%!important;
	}
.wrapper{text-align:left;}
 h1, .logo h2 {font-size:24px; text-align:left; border-bottom:0px dotted #000; padding:20px 10px 0px 0px; margin:0px 0px 0px 0px; line-height:1.6em;}
.logo{position:relative; text-align:center; width:100%; margin:0px; padding:0px; top:0px;
	right:0px;}
#projekte{margin-top:50px;}

}