
* {
 -webkit-box-sizing: border-box;
 -mo-box-sizing: border-box;    			
 -o-box-sizing: border-box;
  box-sizing: border-box;
}

body {
font-family: 'Source Sans Pro', sans-serif;
line-height: 1.5;
color: #666666
}

h1 {
font-weight: 400;
font-size: 25px;
}

h2 {
font-weight: 400;

font-size: 25px;
margin: 0;}

h3 {
font-size: 16px;}
a {
text-decoration: none;
color: 999;
}
.main-header-container{
	background: #fff;
}	
.main-header,
.workshop,
.impressum,
.intro, 
.intro-content,
.columns,
.slogan,
.legal,
.links,		
{
max-width: 960px;
padding: 20px;
margin: 0 auto;
background: 0;
}
.main-header .logo {
float: left;
}
.main-header h1 {
padding-top: 2px;
padding-left: 70px;
text-align: left;
}

.main-header h2 {
padding-top: 12px;
padding-right: 50px;
text-align: right;
}

.main-header nav {
float: right;
padding-top: 2px;
padding-right: 300px;
}

.main-header ul {
list-style: none;
margin: 0;
padding: 0;
}
.main-header li {
float: left;
}

.main-header nav a {
display: block;
padding: 5px;
text-transform: lowercase;
font-size: 18px;
font-weight: 300;
color: #666666; 
border-bottom: 2px solid transparent;
border-bottom-color: #00CDE1;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-mouz-transition: all .5s ease;
-o-transition: all .5s ease;
}

.main-header nav a:hover {
border-bottom-color: #222;}

/*.intro-container {
background: transparent url(../image/layout/meer.jpg) bottom center no-repeat;
height: 500px;
background: cover;}*/


.workshop-container{
padding-top: 20px;
padding-left: 70px;
padding-right: 80px;
font-size: 1;5px;
}

.ausstellung-container{
padding-top: 20px;
padding-left: 70px;
padding-right: 80px;
font-size: 15px;
}


.impressum-container{
padding-top: 20px;
padding-left: 70px;
padding-right: 80px;
font-size: 15px;
}
.links-container{
padding-top: 20px;
padding-left: 200px;
padding-right: 80px;
padding-bottom: 150px;
font-size: 15px;
}
.bilder-container {
margin-top: 10px;}
.bild {
margin: 0 200px;}

.profil {
float: left;
margin: 10px;}

.intro {
text-align: center;
padding-top	60px;
}
.intro h1 {
font-size:25px;
}

.intro h1 span{
 display: block;
font-size: 20px;
}
.intro p {
font-size: 5px;
}
.intro.content-container{
background: #f1ede4;
padding: 40px;}

.columns-container {
background: #f1ede4;
padding: 40px; 0}

.columns article {
float: left;
width: 33.33%;
padding: 0 20px;
text-align: center;
border-left: 1px solid #333;
}
.columns article:first-child{
	border: none;
}
.columns article .button{
display: block;}

.slogan-container {
background: #f1ede4;
}

.slogan p {
font-size: 15px;
line-height: 1.2;
}
.slogan p span{ 
display: block;
font-weight:  700;
}


.legal-container {
background: #2e2e2e;
color: #e3d8c6;

}


.legal-container a {

color: #e3d8c6;
font-weight: 700;
border-bottom:  1px solid transparent;
transition: all .5s ease;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
}

.legal.container a:hover {
border-color: #e3d8c6;
padding: 0px;}

.intro-content{
}

.intro-text,
.intro-aside {
float: left;
padding: 0 20px;}

.intro-text{
width: 66.66%;

}

.intro-text p {
margin-top: 0;}

.intro a{
color: #333;}


.intro-aside {
width: 33.33%;
border-left: 1px solid #333;
}

.intro-aside h3,
.intro-aside p{
margin:0;
}
.bilder-galerie-aktuell {
	float: right;
padding-left:150px;}

 .galerie-image {
	float: right;
	margin: 5px;
}
.atelier {
	float: right;
padding-left:80px;}


 
/* Button */
.button{
display: inline-block;
padding: 10px 15px;
margin-top: 15px;
border: 1px solid #222;
transition: all .5s ease; /* Einblendungs effekt der Hover Button */
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
}

.button:hover{
background: #00CDE1;
color: #222;
}
.bnt-dark {
border-color: #222;
color: #222;
}

.bt-dark:hover{
background: #222;
color:#555; }




.legal a {
font-size: 12px;
padding-left: 260px;
font-weight: 222;
}

/*clearfix */

.clearfix::after,
.clearfix::after {
content: " ";
display: table;
}
.clearfix::after{
clear: both;}

/* Mediaqueriew */
@media screen and (max-width: 850px){
	.main-header.logo,
	.main-header nav,
	.main-header li {
		
	float: none;
}

.main-header nav {
padding-top:  5px;}

.main-header {
text-align: center;}

.main-header li{
display: inline-block;}
}
.intro-text,
.intro-aside {
width: 50%}


@media screen and (max-width: 700px){
	.intro-container {
	height: 200px;}
	
.intro {
 padding-top: 20px;}
 
	.intro h1 {font-size; 30px;
}	
	.intro h1 span {
	font-size: 16px;
	}
	
	.columns article {
	width:  100%;
	border: none;
	border-top: 1px solid #222;
	padding-top: 30px;
	margin-top: 30px;
	
	}
	.columns article:first-child {
	margin: 0;
	padding: 0;
	width: 100%
}


