#body {
    font-family: 'Questrial', sans-serif;
	font-weight:300;
	color:#000;
	font-size:18px;
	padding:0;
	margin:0;
	background:#fff;
	line-height:1.5em;
}


/* Navigation */

ul.nav, ul.nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.nav li {
    display:block;
	float:left;
}

ul.nav li a {
    padding: 20px 22px;
	font-size:18px;
	line-height:25px;
	text-decoration:none;
	display:block;
	position:relative;
}

ul.nav li ul {
    display: none;
	position:absolute;
    z-index: 100;
    min-width: 150px;
    text-align: left;
}

ul.nav li li a {
	font-size:14px;
	padding:10px 15px;
}


#nav_icon_wrapper {
	position: fixed;
	top: 5px;
	right: 5px;
	z-index: 10;
}

#nav_icon {
	position: relative;
	height: 40px;
	width: 40px;
	cursor: pointer;
	display: none;
	background: #fff;
	border-radius:5px;
}

#nav_icon .nav_line {
	position: absolute;
	left: 5px;
	width: 30px;
	height: 3px;
	background-color: #303F5F;
	background-color: #4e4e4e;
}

#nav_icon .nav_line1 {
	top: 10px;
	-webkit-transition: all 0.5s 0.1s ease, top 0.1s 0.2s linear, -webkit-transform 0.2s ease;
	transition: all 0.5s 0.1s ease, top 0.1s 0.2s linear, transform 0.2s ease;
}

#nav_icon .nav_line2 {
	top: 18px;
	-webkit-transition: opacity 0.2s 0.2s ease;
	transition: opacity 0.2s 0.2s ease;
}

#nav_icon .nav_line3 {
	top: 26px;
	-webkit-transition: all 0.5s 0.1s ease, top 0.1s 0.2s linear, -webkit-transform 0.2s ease;
	transition: all 0.5s 0.1s ease, top 0.1s 0.2s linear, transform 0.2s ease;
}

/* Clicked */

#nav_icon.clicked .nav_line1 {
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	top:17px;
	-webkit-transition: all 0.4s 0.1s ease, top 0.1s linear;
	transition: all 0.4s 0.1s ease, top 0.1s linear;
}

#nav_icon.clicked .nav_line2 {
	opacity:0;
	-webkit-transition: opacity 0.2s ease;
	transition: opacity 0.2s ease;
}

#nav_icon.clicked .nav_line3 {
	-webkit-transform: rotate(-135deg);
	-ms-transform: rotate(-135deg);
	transform: rotate(-135deg);
	top:17px;
	-webkit-transition: all 0.4s 0.1s ease, top 0.1s linear;
	transition: all 0.4s 0.1s ease, top 0.1s linear;
}


/* Content */

.contentbox h1.headline, .contentbox h2.headline, .seitenliste .contentbox h3 a {
    background: #525051;
    color: #fff;
    padding: 15px;
    text-align: center;
    margin: 0;
	text-decoration:none;
}

.contentbox h1.headline, .contentbox h2.headline {
	font-size:36px;
	line-height:40px;
}

.seitenliste .contentbox h3 a {
	font-size:24px;
	line-height:28px;
}
.contentwrapper .bgbox {
    height: 200px;
    background-size: cover;
    background-position: top center;
	position:relative;
}

.contentwrapper .bgbox .raster, #footer .raster, .contentwrapper .bgbox .bildcontainer {
    background: transparent url(https://tramino.s3.amazonaws.com/s/art-harder/771117/raster.png) no-repeat center center;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.contentbox .File.mobil img {
    width: 100%;
    height: auto;
    display: block;
}

.contentbox .TraminoTextile strong, p.intro {
	font-family: 'Roboto', sans-serif;
	font-weight:800;
}

.TraminoTextile li {
    list-style: none;
    background: transparent url(https://tramino.s3.amazonaws.com/s/art-harder/771119/artharder-icon.png) no-repeat;
    padding-left: 30px;
    background-size: 20px 11px;
    background-position: 0px 7px;
    margin-bottom: 10px;
}

.TraminoTextile ul {
    padding: 0;
    margin: 0;
}

.TraminoTextile a {
/*	border-bottom: 5px solid #d9d900;
	text-decoration:none;*/
	color:#525051;
	padding:5px 5px 0;
}

.TraminoTextile a:hover {
	background: #d9d900;
	color:#000;
}

.contentbox {
    padding: 0 0 50px;
}

.contentbox p {
    padding: 15px 0 0;
}

.contentbox h3 {
    padding: 50px 0 0;
}

.contentbox .bilderbox {
	text-align:center;
	padding:50px 0 0;
}

.contentbox .bilderbox a.fancyimage {
    display: inline-block;
    padding: 10px;
}

.contentbox .bilderbox a.fancyimage:hover {
	background: #d9d900;
}

.contentbox .bilderbox a.fancyimage img {
	display:block;
}

.seitenliste { position:relative; }

.seitenliste .contentbox {
    float: left;
    position: relative;
	cursor:pointer;
	padding:0;
	margin: 0 0 50px;
	overflow:hidden;
}

.seitenliste .contentbox img {
	box-shadow: 0px 15px 20px rgba(0,0,0,0.25);
}

.seitenliste .contentbox.size3 {
    width: 33%;
}



.seitenliste .contentbox.size2 {
    width: 33%;
}

.seitenliste .contentbox.first2 {
    width: 16%;
}

.seitenliste .contentbox.first5, .seitenliste .contentbox.first4 {
    width: 17%;
}


.seitenliste .contentbox.size4, .seitenliste .contentbox.size5 {
    width: 33%;
}


.break {
    clear: both;
}

.seitenliste .contentbox .File.Bild {
    padding: 25px;
    position: relative;
}

.seitenliste .contentbox .File.Bild img {
    width: 100%;
    height: auto;
}

.seitenliste .contentbox .headblock {
    position: absolute;
    bottom: 25px;
	left:25px;
	right:25px;
	min-height:20px;
	z-index:5;

}

.seitenliste .contentbox h3.headline, .seitenliste .contentbox h3.headline a {
	display:block;
	margin:0;
	color:#525051;
	background:#fff;
}

.seitenliste .contentbox h3.headline {
	padding:0;
}


.seitenliste .contentbox p {
	background:rgba(255,255,255,.9);
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	max-height:0px;
	margin:0;
	padding:0 25px;
	overflow:hidden;
}

.seitenliste .contentbox:hover .headblock p {
	max-height:500px;
	padding:25px;
}


.seitenliste .contentbox:hover .headblock a {
	background:#d9d900;
	color:#525051;
}


.seitenliste .desbo {
    position: absolute;
    background: #525051;
    bottom: 0;
    left: 0;
    right: 0;
    height: 132px;
	z-index:1;
}


#footer {
    background: #d9d900;
    text-align: center;
    position: relative;
    padding: 50px 0;
    color: #525051;
}

#footer a {
    text-decoration:none;
	color:inherit;
	padding:5px;
}

#footer a.phone {
    font-size: 24px;
	padding:10px;
	background:#fff;
}

#footer a:hover {
    background:#fff;
}


.TraminoForm {
    max-width: 370px;
    margin: 0 auto;
}

input[type="submit"] {
    font-size: 24px !important;
	padding:10px;
	background:#d9d900;
	color:#fff;
	border:0px solid #fff;
	width:100%;
	text-align:center;
	cursor:pointer;
	
}

input[type="submit"]:hover {
	background:#525051;
}p.wolke1 strong, p.wolke1 i {
    font-style:normal;
	font-size:20px;
	padding:5px;
}

.mobil { display:none; }

@media all and (max-width: 800px) {

	.nomobil { display:none !important; }
	.mobil { display:block; }
	
	header {
	    height: 50px;
	    background: #fff;
	    box-shadow: 0px 0px 20px rgba(0,0,0,0.25);
	    position: fixed;
	    top: 0;
	    left: 0;
	    right: 0;
		z-index:100;
	}
	
	#content {
		padding-top:50px;
		z-index:1;
	}
	
	.wrapper {
		position:relative;
		margin:0 auto;
		padding: 0 15px;
	}
	
	a.logo {
    	display: block;
    	height: 40px;
    	width: 200px;
    	overflow: hidden;
	}
	
	header a.logo img {
    	padding: 0;
   	    height: 62px;
	}
	
	#nav_icon { display: block; }
	
	header nav {
		top: 50px;
    	display: none;
    	position: fixed;
    	left: 0;
    	right: 0;
		bottom:0;
    	overflow: scroll;
    	height: auto;
    	background: #fff;
    	margin: 0;
	}

	header nav ul.nav li, header nav ul.nav li ul {
		display:block;
		position:relative;
		float:none;
	}
	
	header nav ul.nav li a {
		background:#525051;
		color:#fff;
		padding:15px;
		border-bottom:1px solid #ddd;
		border-top:1px solid #ddd;
		margin-bottom:-1px;
	}
	
	header nav ul.nav li li a {
		padding-left:30px;
	}	
	
	ul.nav li.nav_aktiv > a {
		background: #d9d900;
		color:#525051;
	}

	.contentbox .bilderbox a.fancyimage img {
    	width:100px;
    	height:auto;
	}
	
	.seitenliste .contentbox {
 		width: 100% !important;
		float: none !important;
	}
}

@media all and ( min-width: 801px ){

	header {
	    height: 105px;
	    background: #fff;
	    box-shadow: 0px 0px 20px rgba(0,0,0,0.25);
	    position: fixed;
	    top: 0;
	    left: 0;
	    right: 0;
		z-index:100;
	}
	
	.wrapper {
		position:relative;
		max-width:950px;
		margin:0 auto;
		padding: 0 15px;
	}
	
	.bigwrapper {
		position:relative;
		max-width:1400px;
		margin:0 auto;
		padding: 0 15px;
	}
	
	a.logo {
	    float: left;
    	display: block;
	    height: 100px;
	}
	
	a.logo img {
    	padding: 10px 20px;
    	height: 80px;
	}

	ul.nav ul.nav {
    	box-shadow: 0px 2px 10px rgba(0,0,0,0.25);
	    background: #eee;
		top:105px;
	}
	
	ul.nav li a {
    	border-bottom: 5px solid #fff;
	    background: #fff;
	    padding: 38px 15px;
		line-height:24px;
		color:#525051;
	}

	ul.nav li:hover > a, header a.logo:hover {
		border-bottom:5px solid #d9d900;
		background:#fff;
	}
	ul.nav li.nav_aktiv > a {
		color: #c1c100;
		border-bottom:5px solid #d9d900;
	}
	
	ul.nav li:hover ul {
		display:block;
	}

	ul.nav li:hover ul li {
		display:block;
		text-align:left;
		float:none;
	}
	
	#content {
		padding-top:105px;
		z-index:1;
	}
	
	p.wolke1 {
    	padding:0;
    	margin:0;
    	position:relative;
    	height:350px;
	}

	p.wolke1 strong, p.wolke1 i {
    	position:absolute;
	    display: block;
		font-size:28px;
		padding:0;
	}

p.wolke1 .z1 { right:55%; top:12%; }
p.wolke1 .z2 { left:65%; top:10%; }
p.wolke1 .z3 { left:15%; top:26%; }
p.wolke1 .z4 { right:30%; top:28%; }
p.wolke1 .z5 { right:50%; top:40%; }
p.wolke1 .z6 { left:60%; top:47%; }
p.wolke1 .z7 { left:15%; top:54%; }
p.wolke1 .z8 { right:35%; top:61%; }
p.wolke1 .z9 { left:30%; top:68%; }
p.wolke1 .z10 { left:65%; top:75%; }
p.wolke1 .z11 { right:70%; top:82%; }
p.wolke1 .z12 { left:45%; top:89%; }
	
}

@media all and ( min-width: 801px ) and ( max-width: 950px ){
	
	ul.nav li a {
	    padding: 38px 10px;
		font-size:18px;
	}
	
	header a.logo img {
 	   width: 200px;
    	padding: 19px 0;
    	height: 62px;
	}
	
	.contentwrapper .bgbox {
	    height: 300px;
	}
}


@media all and ( min-width: 950px ){
	.contentwrapper .bgbox {
	    height: 300px;
	}
}